Case Study: E-commerce for small local business
Hello Medium readers. Below you can find a case study of an E-commerce group project for the UX/UI Bootcamp course at Ironhack. This project was centred around the problems of a small café in Lisbon without much of an online presence who wanted to increase their visibility but on their terms. It was done remotely by three UX/UI students.
Discovery
User research
Interviews
The owners: Our objective for the interview was to get a clear image of them as a business and see if we could expand or use that in an e-commerce setting. After over an hour of interview, laughing and chatting we understood that authenticity was very important to them. The café offers a selection of vegetarian and vegan food, all locally sourced and seasonal. They stated several times that it was important for them that the café should feel like a home away from home, where the neighbourhood could gather and socialise.
“Our main struggle was keeping up with the competition online. Beautiful Instagram posts are not something that comes naturally to us and we don’t feel like we fit in on Instagram. The main goal for us is to get more visibility. “
— Fatima
User: After talking with Fatima and Frank we also interviewed a frequent user of the café to see it from a different angle. She had a very positive view of the café and offered some valuable intel on the food, the atmosphere and the customer service and also on what she thought they could do to take their business to the next level. Her opinion on improvement mainly came down to their lacking online presence. To our amazement, she more or less used the same keywords as the owners to describe her view of Tiffin café. Again, honesty, authenticity, healthy and community were mentioned.
Surveys and Online Reviews
We conducted two different surveys, one focused on the users of the café and on their impressions. Another with a more general focus, aimed at café goers to understand their needs and expectations. Through the survey, we saw that their customer have a very positive experience at the café and that they would love to buy their products online if they should decide to sell their products online. Looking at the online reviews we were surprised to see they had over 60 reviews and ALL of them were 5-star reviews. Imagine all the hard work!
Affinity Map
The surveys and interviews gave us quite a lot of data to work with. In order to get a clear overview, we gathered all the information on digital post its and categorized them. Soon we started to identify reoccurring patterns in the information. We saw these words numerous times:
- Authentic
- Friendly
- Healthy
- Quality
So, with all this in mind.
How might we help the café increase their visibility online in a way that they feel correctly represented?
Business and competitive analysis
Time to look at the competition. Cue inspector Gadget music! From the interview process, we uncovered some of the competitors and compared them to the café with different tools like Business Model Canvas, Brand Opposites analysis, Market Positioning Map and so on. This gave a great understanding of their position in their market and gave some ideas on how they could improve their visibility. Their competitors seem to understand the importance of branding and having a strong online presence.
Making the Prototype
Scenarios
In this stage, we were racking our brains to find all kinds of reasons why people would possibly want to visit a café website: to check opening times, check if they had plugs, find the address, view allergens options, check if it was a romantic spot for a date, look at the menu etc. This was useful for us to make sure that the website was easy to navigate through with all scenarios in mind with as few clicks as possible.
User flows & Use cases
Similar to what we did in scenarios we imagined ourselves as a user coming to the website with one specific goal in mind and made a visual representation of how that would go down, trying our best to predict all types of approaches and alternative routes.
Concept sketching
With all our research in mind, we set out to make a concept sketch. For the first time in what felt like 4 months, I stepped away from the computer, found a pen and paper and started actually sketching. The others did the same and after we compared sketches, picked out the best from each and made our final concept sketch. It was a must to include the keywords (honesty, authenticity, a home away from home, healthy) in this phase to make sure the site accurately represented Tiffin. Keeping those in mind I attempted to make it simple and straightforward.
Site map
After discussing what we liked about the competitors' sites we put together a site map that would make sense for the café. I’m even laughing right now thinking about how young, dumb, naive and confident we were, thinking this was the final one.
You can see what the final prototype looks like 8.636.048 alterations later by scrolling down to the prototype section.
Testing
Card sorting
Card sorting was the first tool to punch our beloved site map in the face. So naturally, you can understand my contentment for this tool at this point. Following our teacher’s advice, we gathered all the menu options on a digital card sorting tool by Optimal Workshops and asked our peers to test to see where they would categorize our menu options intuitively. 10 people did the exercise and they all seemed equally confused about our choices, especially with ‘shop’ and ‘order’.(half-heartedly thanking Card sorting).
Prototypes
Now it was time to test our ideas visually with the users to see if it was intuitive and made sense to other people than us. Our main problem in this phase turned out to be to figure out a way to separate the “takeaway” section from the “buy products” section in a way that made sense. We ended up combining them. Also, we took a couple of our scenario and used them to understand how we could shorten their paths and reduce the amount of clicks.
We created the simple happy path of ordering a carrot cake and made people test our prototypes through Userberry, a great site that does a screen recording of your users testing it so you can see exactly where they got confused during the test. It was hilarious to see the amounts of rage fits people had over the “takeaway” and “buy products” buttons, so much so that I considered keeping it that way. However, in the end, 3 testing sessions later, sense and sensibility prevailed and we came up with a solution that our users on Useberry cracked straight away.
Our final prototype was designed to be simple yet effective with shortened paths and features like a progress bar and the menu highlights to make it more userfriendly. Our happy path of buying a carrot cake and have it delivered to your home was reduced from 9 to 5 clicks — we’re quite happy with that!
What would be the next steps?
I have to confess I fell in love with Fatima and Frank and their story through this process and I would love to be able to do something that would be really valuable to them. In the beginning, I thought we would make something that had more value to them but in the end, our mid-fi prototype won’t do them much good. This was personally quite disappointing for me. So hopefully in the near future, we’ll have the chance to make a hi-fidelity prototype for them!
Takeaways
- Being open to everyone’s opinion is very valuable.
- Be super clear on the main objectives throughout the project and make sure they function like the red thread.
- If you’re not sure about a feature, show it to someone without explaining everything and see if they understand
- Just because HBO released two Killing Eve episodes on the night before the presentation day, doesn’t mean that you should watch them
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
Thank you for reading!
