Why is everyone suddenly making bread doing lockdown?
During the coronavirus lockdown across Europe, became increasingly difficult to find flour at shops and supermarkets. In the UK, flour producers have doubled production, but are still struggling to meet the demand.
Yodomo is here to help you get on board on this trend. Yodomo.co is an online platform where you can buy online courses and kits to learn crafty skills. I worked in a team with two other UX designers to create better online solutions, according to the brief, for our client Yodomo. The project was our final project at General Assembly where I trained as a UX designer.
The Brief
After having seen a spike in sales since the coronavirus lockdown, Yodomo is looking to expand the number of instructors and kits/courses on the platform from 20 to 150+ over the next 6–12 months. We were asked to help with:
- Investigating efficiency of user experience and user journeys
- Improving our onboarding of customers
- Identifying areas for improvement in design and navigation
- Identifying improvements to the process of buying a kit and getting to an online course
Discover
The first step to improve Yodomo’s online experience was to test the current website. We tested it with two users and some interesting findings came up. We found that there were three main issues, which were the navigation, clarity on the product page, and how to access “my courses”.
“All Courses vs. Kits” in the global navigation were confusing to the user, who could not tell the difference between the two. When our user selected either category they landed on the browse page where categories were a search filter.
On the product page, our user was not sure what they were about to buy and how the course was taught. The long text seemed too long, and there was not an easy and quick overview of the product.
After having placed an order our user received 4 emails which were overwhelming. The user arrived on the page “My Courses” where it was unclear which option to pick.
User Research
We researched Yodomo users to find out more about them. In order to do that we conducted a survey and had 100 responses. We also interviewed 12 people, where 4 were regular Yodomo users, to get a deeper understanding of the users and how we could help improve the online experience for Yodomo. Below are some highlights from our survey.
54%
Follow a guide when doing a craft project.
36%
Prefer to follow a video guide when doing a craft project.
Distilling our findings from our user research we created an affinity map to find trends and patterns by using Miro. We found 4 main overall trends which were motivation, pain points, social, and learning methods. Below is the motivation snapshot of the affinity map we did.
Key Findings
Motivation: Fun, Switching off, Relaxation, Satisfaction, Achievement
Pain Points: Not enough time, Not having the right tools, Cleaning
Learning Methods: Online learning (zoom), Real-life workshop, Googling to find help, Through project (learn by doing), Books
Social: Sharing with people, Real life workshop, Interaction with instructors, Low interest in social media sharing
The main take away from the affinity map was the motivation and the lack of time. The user was super motivated to start a craft project but because of a lack of time, they needed an easy and quick way to find and see the project so they did not lose interest.
Define
After discovering the competitors and customers of Yodomo we went on to define the user and the problem. To do this I created a customer journey map below, which is a visual story and an exercise that helps you see Yodomo.co from the users perspective, by using the insight from the user research and the usability test. The customer journey map made it clear to us where to focus as the user's mood was negatively affected when going to the browse page, product page and my account page.
Persona
From the survey and user interviews, we built the persona “Erin”. Our persona Erin helped us gain a better understanding of our user's needs.
“It’s a chance for me to switch off my mind”
Erin lives in London, is 28, and a serial maker. She gets crafty to relax and do something else that does not involve screen time. She also loves the gratifying aspect of making. Her pain point is not enough time and she struggles to keep motivated when she gets stuck. Her goal is the enrichment of learning a new skill.
Having defined our persona and pain points we now needed to clarify the pages we wanted to design in order for the user to have a happy path through the website that we could test. We created the below scenario to help us set the below user flow into perspective.
Scenario: Erin is interested in finding a project that can work as a home decoration piece and fits her skill level and time availability
When we created above user flow is was clear to us that we wanted to focus on the main pages and not the check out process as Yodomo uses Shopify as a platform which has a standard check out.
Problem Statement
Finally, we went to define the problem. We used the finding from step 1 and 2 and with Erin, in mind, we created below problem statement.
Erin needs a way to clearly understand a course’s content and offering so she can make informed decisions about which one is best suited to her requirements and needs.
Ideation
Welcome to the second part of the double diamond process, phase 3, ideation. I love this part of the process as I love hearing other people’s ideas, get inspired and share my own ideas. We arranged a design studio exercise with Yodomo and I was so excited about this despite the lack of sleep and being a bit nervous. A design studio exercise is a sketching exercise to explore possible solutions to our design problems and it helped us visually articulating features and ideas. I volunteered to facilitated the design studio with a short warm-up exercise followed by two rounds of 5 min sketching, then presenting, evaluating and at last we dot voted on the best ideas.
In order to sketch a solution to our problem we framed 3 “How Might We”. An HMW suggests a solution to the problem is possible without giving the solution, as an HMW can be answered in many ways. I other words an HMW is the perfect framework for innovative thinking.
- HMW improve the homepage so the customer can understand what Yodomo is offering
2. HMW make it clear to the customer what they are buying on the product page
3. HMW make it easier for the customer to find what they want to learn according to their time availability and skill level
We did the design studio fully remotely by using google hangouts and Miro and it worked very well. Each of us would take a picture of our sketch and upload it to Miro. Above shows, some of the sketches form the design studio. It was a super fun afternoon and everyone felt very inspired afterwards.
Features
After having completed our design studio we came up with the following features which we prioritised on a feature prioritisation matrix. We decided to focus on features which were essential given the time constrain and to focus on the tasks listed in the brief. The features we did not include were more time and effort consuming as well as less critical to a functioning prototype.
Navigation
Before doing our first wireframe we wanted to see how we could tackle the navigation issue. I really like doing this as I could use my analytical side as well and I find it super fun organising stuff (I was a merchandiser for a while so that might be why).
We created the current site map to clarify the structure we wanted to improve. A site map is a list of pages of a web site and the relationships between them. As you can see the site map was very simple and did not support expanding the offerings on Yodomo.co.
The first step in improving the navigation was to do an open card sort which means that you group the inventory into categories and subcategories. We did a card sort each and below is the card sort I did, which, with a few adjustments, we ended up testing. When we did the card sort we realised that each of us had a different association in relation to the categories and what we would expect to be included. Macramé was a very difficult item to place as the finished product belongs to Home & Living (Plant hanger) but the process is more related to Knitting & Crochet.
Testing
To test our categories we used Optimal workshop and 8 people completed the test. The categories we tested was: Home & Living, Textile & Needlework, Accessories, Paper Art, Metal & Woodwork. We asked people to do a closed card sort where you place items into the categories.
The test result showed that most items were placed correctly. 80% of all items were placed in the correct categories with a success rate of 75%+. Macramé divided people as well however most people placed it under Textile & Needlework (63%). The other “half” placed macramé under Home & Living (38%) which indicates that there is a strong argument for placing macramé under both categories.
New suggested site map
From the successful testing, we created our new suggested site map for Yodomo with the expansion in mind to add and remove categories as your business changes.
Designing & Iteration
We first drew up a “paper” prototype on Soraia’s iPad to collate our ideas from the design studio. Our approach was mobile-first as we found that 53% of Yodomo’s sales come from a mobile or tablet.
When the first paper sketches were finished we uploaded it to InVision and tested the prototype. After conducting 7 user testing sessions, we had enough insights to iterate into mid-fidelity. For the mid-fidelity, we split up the screens to faster get a result. I focused on the landing page as I had done the research for the onboarding.
Testing
For the testing, I created a test script in excel to collect all our finding. We asked each of our users to complete the below task:
Imagine your have seen lots of people on instagram doing sourdough bread and now you want to get involved as well. You know Yodomo have kits and courses for getting creative so you go to their mobile page. Talk me through how you would go about finding the right kit and course.
We also took notes on how the user reacted and felt throughout the test. One of the issues we found from the usability testing was the access to “my courses” so we wanted to make sure we tested this bit by asking each of our users: “Where would you find already started courses?”. We found that 5 out of 7 users went straight to the burger menu and found my courses which were a clear success.
Onboarding
As I was designing the mid-fidelity landing page I developed the concept for the onboarding. When we tested the mid-fidelity version we found that having the pictures structures asymmetric was too messy on mobile and one user’s feedback was “I feel a bit seasick”. I then tested other versions both with pictures, number and at least icons which you can see below.
Finally, we found that icons were easier for the user to understand as well as icons did not favour any makers and products. For the final high fidelity version my colleague Soraia took over and finalised it and created the icons, which you can see below:
Browse Page
To make it easier for the customer to understand how the course is taught and what is included Soraia came up with the idea to use icons in different stages, as you can see on the high fidelity version. We found that Yodomo offers three types of products: a kit, instructions and a video guide. This was very well received and all our users and Yodomo loved the fact that they could quickly get an idea of what they were buying.
Product Page
When we tested the mid-fidelity version with our users we found that the product description should be right after the product photo. From the usability testing, the user had been confused about the word “Kit” so we wanted to improve the understanding. We tested tool-kit in our low-fi version but found that half our users thought it was only the tools and not material so we changed it to “materials kit” in the high fidelity version which from testing was more clear.
Style Guide
Lesson Learned
So what did our Yodomo client project teach me? One of the main things I was super happy about was the amount of time we spent brainstorming and sharing ideas in our group. Everyone in our group was super creative and up for spending that extra time on the project to make it a success. One thing I learned was I enjoy the first bit of the process with research, ideas and developing the concept more than I enjoy creating the final high fidelity prototype.
Next Steps
We presented our findings and suggested solutions to Yodomo with a 20 minutes presentation on Zoom. The findings and solutions were very well received, and the changes we suggested are already implemented on their website. Go have a look at Yodomo.co. Further, we suggested some next steps to them as well that could be interesting to investigate further.
- Investigate category names further and test with more people by doing a closed card sort.
- Looking at the website from the perspective of someone who already bought a course/kit.
What to know more? Have a look at my portfolio.
