David v.s. Goliath — Small Ukulele shop E-commerce UX Redesign (2/2)
There once was a small ukulele shop. A small, but beautiful, shop that brought together finding the perfect ukulele and learning to play it. However, their webshop was struggling. It was outdated and strong e-commerce competitors had stepped up. This is the story of how a small shop took the time to learn about it’s customers and got creative to provide a fulfilling, online shopping experience.
This project has been a collaboration with Margaux and Elyse. Make sure to check them out! We structured our redesign using Design Thinking. New to this? Read up on it here. It will be worth your time!
During this project we spend two weeks honing our UX skills. Using many different techniques, through empathizing to prototyping, we redesigned the webshop of a small Ukulele store. In this article I will talk about the prototype we build using the research described in the previous article.
Information Architecture — Day 6 and 7
In the previous article we empathized and learned about our client and our customers. We defined the problems our customers experienced and saw how it impacted our business. We ideated solutions and prioritized them to solve the problem.
Ideas are fun, but we had to make them real and find out whether they actually worked. We build different (physical and digital) designs and tested them over and over. Each time we got closer to a better redesign.
• Sitemap
Every page should have a goal and a purpose. Sites without these are often unfocused, hard to navigate, and offer poor user experiences. This map helps clarify the site’s goals before you start designing or creating content.
We looked at all the pages we would need to help us provide users with the right information. We made categories of what would go into the shop and finally organized it into an easy overview (the sitemap). This would guide us in future development.
The biggest difference with the old site is the way we structered the product categories in the shop. We also made some small changes to the lessons and activities pages.
• Information architecture of a product page
At a high-level, information architecture “focuses on organizing, structuring, and labeling content in an effective and sustainable way.”
Having an overview of the entire site, we turned our attention to the product page. The most important features we wanted to introduce would be found on this page, so it was worth giving it some extra effort.
→ 1. AR: We found out that customers had trouble estimating the size and looks of instruments with simple images. To help them along we came up with an augmented reality feature that allowed them to see the instrument in the context of their own room.
→ 2. Employee experience: Another important reason users bought in-store was to easily ask questions to employees. We have tried to make this knowledge easily accessible by adding personal notes to the description. We also added an easy chat feature (not in image).
→ 3. Audio samples and video’s: These give users a great way to experience the sound in different ways. Hearing the instrument was incredibly important for most users.
• User flow
This shows the path or paths a user takes to complete a task. They help validate your user journey. You will be able to detect possible pain points and simplify your solution quickly.
Returning to George (our persona) we imagined how he might travel through our site. After arriving on the homepage he would take a quiz (because it is an easy way to start). He would then look at the product pages of recommended products before comparing them side to side and ask some help from an in-store employee. Finally he might add a recommended product before completing his purchase. We visualized this journey in the user flow below.
Prototyping — Day 8 and 9
Having done all our research and (re)checking the layout of our site and its features it was no time to build a prototype and test with users!
• Paper prototyping
The quick way to try out digital ideas by sketching them on paper. This is part of low fidelity prototype (a prototype with a low level of detail and realism).
We asked several people to try out our prototype. We did this by asking them to complete certain tasks and having them interact with the paper sketches we made. Whenever they clicked on something we would exchange the paper with another another piece to simulate interacting with a website.
The image shows an example of our homepage. As we did with the product page we used IA to change the lay-out based on our users’ needs.
This quick and easy testing provided us with all the feedback we needed before going into mid-fidelity prototyping using Sketch.
• Digital prototyping
We used Sketch (a software program) to make a mid fidelity prototype. This type has a higher degree of detail and realism compared to a low fidelity prototype. However, it still has no colors or other visual design components.
The digital, mid-fi prototype, is the last step before moving on to the final design including UI and styling. We used this version to do additional testing and made some last minute changes (mostly small).
To have a preview of the design, watch the video here.
Conclusion
It was quite the journey. Over the course of 2 weeks (9 days) we explored different UX techniques to redesign a ukulele shops’ e-commerce to compete in the market. We used all gathered insights (see part 1 here) to develop this mid-fi prototype.
While we’ve concluded the UX part, user testing is never finished. We will be working on the UI and styling of this project at a later point and will be using our user research techniques again to validate our design.
To those reading; I hope you enjoyed these articles and that they gave some insight into a practical application of the design thinking/UX process.
If you liked this article and have questions or suggestions, please leave a message below. Thank you for reading!
