UX Strategy: E-commerce MVP of a local business
Our challenge this week is to empower local communities. Let’s make our local environment sustainable. We should build an e-commerce for a store nearby.
Lack of strategy makes 90% of startups fail.
Yup. No Market Need is the top reason for startups to fail. We’re creating products that no one wants. This is why business analysis is so important in the process.
This talk inspired me to think more about the “Why” and help my future clients understand that know your value proposition may be the difference between success and failure.
How do I build a brand that people can relate to?
If I don’t know where I want to go how do I get there? For example: if you want to go home what’s the first question you should ask? “Where the hell is my house?”. So let’s find “why” together.
Our client
Boutik, Lisbon’s Surf Shack (https://www.boutiklisboa.com/)
Nice Pierre welcomed us in his house with an open smile. He was very receptive to this project. This is great since our group really felt a connection with this store.
🔍 Business Analysis
UX strategy is the bridge between business and users.
Even with little time to do it we decide we will interview:
- The owners;
- Customers (because we already got permission);
- A big bunch of users that buy clothes online so we can understand barriers, positive aspects, and demographics.
We decided to dig in and overview our strategy using… Guess what? A canvas!
🧐 Insights
We understood after finishing this blueprint and done our desk research that:
- The brand lacks coherency;
- It’s hard to define personas since they’re aiming for different things (surf style, healthy food, gallery of art, books, beauty, clothes from “less mainstream” stores and unique pieces they collect whenever they travel, working space);
- We should focus on selecting the main MVP and work on that.
⛔️ ATTENTION, BLOCKER ⛔️
Yes. This happens. We should interview Pierre and some clients to confirm or dismiss our assumptions but it was impossible. The store closes on Mondays and Tuesdays.
We decide to send an email and cross our fingers for him to reply. Not having customers to interview we decide to collect some stats to get to some conclusions. So we decide to go with surveys and try to overcome this blocker.
The focus of Pierre’s interview:
- Understand the store’s value proposition so we could analyze how we can stand out from the competition;
- Pierre’s perception of his customers so we could try and define personas.
Focus on the survey:
- Understand possible barriers from buying clothes online;
- Get insights on how some aspects may incentive users to buy online;
- Demographics.
🧐 Insights
We don’t have client/owner qualitative data yet so we have to work with our surveys. We divided by male/female and tried to create personas so we could know exactly who we were designing for. Now that my mind is switching to think more about the user it didn’t make sense to me until we made this.
Say hi to:
- 👩🏻💼Anna, the Travel Girl: is 27 y/o. She comes from the UK and loves to travel to discover new places, cultures, and food. She always tries to collect memorabilia from all the places she visits. She’s very practical always traveling light with her backpack. Loves adventure. Usually plans her trips. Listens to her friends’ experiences when traveling or buying. She’s a bit stressed and likes to have things under her control.
- 🏄🏻♂️Nuno, the Sports Guy: comes from Portugal and loves outdoor sports. He’s 30 and usually goes on surfing trips with his friends. He’s super practical and likes to keep things simple. He’s a hipster but has a low budget so he’s always searching for the best unique stuff at the lowest price. Already has an app with an alert when something lowers price because he most of the time knows what he wants.
🥊 Competition
While some of us were working on the interviews, the others were searching for the direct competition online to compile data that could show us:
- How do they position themselves on the market;
- What are they doing nicely;
- What we should avoid doing.
We discovered that our main direct competitors are the ones that sell similar cloth brands online. There are other competitors but we considered them to be indirect since they may have similar concepts but sell specifically surf products or more mainstream brands.
Our main competitor is Collectivestore (www.collectivestore.pt)
👩💻 Information Architecture
Meaning: a system that helps users complete tasks.
🔍 Sitemap
We started by brainstorming on what categories should our sitemap has and build a correct hierarchy from then.
It was CRUCIAL to test this beta version of our sitemap.
We also used Optimal Workshop to create that same card sorting online so we could have quantitative and qualitative information.
🧐 Insights
It was really interesting for us to understand that:
- Most people didn’t know the meaning or connection between most of our categories: “Apparel”, “Travel Uniques”, “Boards”;
- Most of them placed “Countries” as a sub-category of “Books & Maps”;
- Most also changed our categories in a more simple way.
It was great to understand that this was a whole mess and we should do a 2.0 version. Most of our assumptions were wrong and it’s great to understand this in this part of the process. Remember:
Fail fast.
So this is the result of our research with the users:
So we start by creating scenarios: imagining situations that could bring our users to our website. What could be their goal?
From that simple scenarios, we were able to create more concrete Use Cases. We selected 4 of them and tried to be more specific about which may be offline steps taken by users until they get to our website.
Kudos for us (especially Ed ❤) who didn’t understand that we should create ONLY 4 Use Cases. So Ed went full storyteller and created… 10! 😅
Last but not least: User Flow. We select one specific use case and create the path of this task. We chose our lovely Anna and her desperate need to buy a shirt.
🧐 Insights
Awesome to understand what’s missing and how many steps does it take to complete the task. We understood, for example, that:
- It would be a lot easier for her to pick in store. It is also related to her personality;
- We forgot about the profile!
Error > Test it > Change it > Test it
You’re not your user
We hear this so many times that our minds are beginning to switch. It’s awesome to understand how many you can change in such a short period of time with so much work done already.
After having all the site’s content and structure, it’s time to start testing our solution. After some concept testing with Round Robin, we tried to understand from our different designs what made more sense for our persona.
We started then by creating a low-fidelity prototype. This is super important to test your concept since you don’t have colors or actual text. When you test with high-fidelity concepts there are 2 things happening:
- People tend to judge your design and not the flow itself;
- You may spend a lot of money designing something that doesn’t work for your end user.
We used paper first because we needed to sketch our solution. So we created different pages for Anna having always in mind her user flow. Pop-ups were post-its to make it easier for people to understand that that’s a consequence of an action.
Then we began testing and this was the most interesting part. We used our TL and TA as victims first so we could test our interview style and the design itself.
Then we finally went to Boutik’s and got to talk to Alice. We presented our project and tested with one of her waitresses and one of her clients. Their feedback was…
🧐 Insights
- We were missing payment methods on our check-out screen;
- We created a “quick shop” step but no one seemed to notice. Once they understood what it was (I’ll explain later) they all wanted to use it;
- We tested 2 different Size Guides (since it was one of the user’s barriers) and all 5 preferred one of them;
- The login process was a BIG barrier;
- They generally understood our website’s goal and flow.
And the most important part… Most of them loved this design!
Now that we know what we need to work on, we added some features.
I know that you shouldn’t fall in love with your design but for this one, I’ll have to say that’s just impossible. Our first baby wireframe is just beautiful (for me). I’ll make sure to work on that throughout my career (my clients may help) 😅
Final tests
The final day to work on our project and we think we don’t have that much to do. So wroooong. What we thought would take 2h took almost all day.
We copied our structure already on the paper to Sketch. It’s time to build proper wireframes and test our content and user flow online.
After building, changing, building, testing and changing again, we came up with our final prototype.
Our prototype
You can actually interact with Boutik’s e-commerce (mid-fidelity prototype) down here 👇
You can also check out our final presentation to our client here 👇
This was BY FAR the project I liked the most. E-commerce is super complex but super fun. I learned that organize content for websites is no easy task and, once again, that research and testing are the most important part.
New mantra: “ Trust the process 🙌”.
Credits:
- My awesome colleagues (edmundo miranda and Luiza Kuster)
- 101 Startup Failure Post-Mortems — CB Insights (http://www.cbinsights.com/blog/startup-failure-post-mortem/)
