I am a UX and interaction designer with lots of tricks up my sleeve...
CLIENT | TEAM | 3-WEEK SPRINT
Yodomo.co
Optimising an e-learning platform’s website
Yodomo is a platform for learning creative skills online with a mission to foster positive mental health, encourage human connection, and nurture meaning and purpose in life through the power of making with our hands.
UX
UI
Information architecture
Content design
Click to enlarge
Overview
Our customers email us saying they’re unable to complete their projects due to confusion about how to access their course, or believing they were buying something else.
— Excerpt from Yodomo’s brief
The problem:
So many formats, so much confusion
Because Yodomo’s products came in a variety of formats and combinations, users struggled to understand what Yodomo was offering.
Yodomo’s e-learning products varied between step-by-step image guides, written instructions, videos tutorials, craft kits, or any combination of the above.
Because of this diversity, it seemed customers found it hard to understand what exactly they were getting from Yodomo. This led to an influx of emails from confused customers, and a drop in user satisfaction and lost sale opportunities.
An overview of what we did as part of our Double Diamond research process:
Discover
| 4 original site usability tests |
| 100 survey responses | 13 user interviews |
| 4 Yodomo customer interviews |
| 12 competitor analyses | 11 card sorts |
Define
| Affinity mapping | Experience mapping |
| Persona | Scenario | Problem statement |
| Information architecture | Taxonomy |
Develop
| Sitemap | User flow | How might we’s |
| Design studio | Feature prioritisation |
| 19 redesign usability tests |
| Multi-fidelity wireframe iterations |
Deliver
| Onboarding design | Navigation redesign |
| Content redesign | Visual style guide |
| Accessibility review | Hi-fi prototypes |
| Implementation action plan |
The outcome:
A crystal clear experience and messaging strategy
We leveraged the Double Diamond Process to develop a design anchored in fact-based, iteratively produced research.
We created:
-
An improved customer onboarding experience.
We redesigned the homepage to give the user an overview of Yodomo’s offering and how their purchasing experience worked using clear, simple design and communication.
-
An optimised site-wide navigation.
Our team created a functional navigation system using meganav, breadcrumbs and tags, backed by information architecture research using card sorting.
-
Clearer communication through UX, UI and content improvements.
We used iteration and research-driven UI, interaction and content redesigns to streamlined Yodomo’s product offering – developing iconography, microcopy and layout solutions.
We also delivered:
-
An implementation action plan.
We delivered hi-fidelity prototypes, graphical assets and our research findings, as well as a recommendation for next steps on how to continue to implement our research findings on their existing platform.
Since our design solution was grounded in an understanding of the constraints of their platform, Yodomo was able to implement our design recommendations within days of our project delivery.
Successes:
Why this project mattered to me
Ultimately, our work wasn’t just of value to Yodomo - it was a great source of gratification for me too!
I got the chance to:
Harness my strengths
My experience in content and storytelling helped us craft a clear messaging strategy and streamline Yodomo’s content.
My visual design skills helped us create intuitive graphics and iconography to improve communication and help user understanding.
My technical skill set in CMSs, front-end and back-end development meant we were able to create a solution that Yodomo could implement within days of our project delivery.
Fulfill my values
I care about seeing people grow and thrive, so it was great being part of a project that empowers people through learning and by fostering mental wellbeing.
This project was created working alongside a team of awesome, supportive women (in our design team and on the client’s end too!)
Be adaptable
This project was produced entirely remotely due to COVID-19.
Remote working on Zoom didn't deter us!
🧶
Anlo’s go-to craft:
She sews her own clothes and loves DIYing with her power tools.
🥖
Catalina’s go-to craft:
She’s been mastering her sourdough baking skills over lockdown.
Meet the team:
A multi-skilled yet complementary trio
Our team’s combination of skills was ideally suited to tackle this problem space!
Anne Louise (Anlo):
Craft kween with a keen eye for spotting patterns
Anlo’s background combined the technical design side of fashion, as well its more strategic side from her merchandising work. This meant she was a star at finding the perfect craft-specific terminology, while also teasing the signal out from the noise when card sorting for Yodomo’s information architecture overhaul.
Catalina:
Data and analytics wrangler with a knack for visual design
Catalina’s marketing skill-set was vital in making use of Yodomo’s analytics data to inform and enrich our user research strategy. Her visual design support was also indispensable in allowing us to deliver a polished product on time in spite of the tight time constraints.
Soraia:
Multimedia storyteller with lots of tech-y tricks up my sleeve
My visual design and communication know-how helped us create a clear messaging strategy, and my web-related experience meant we designed a solution that Yodomo could implement within days of our project delivery.
✂️
My go-to craft:
Making and gifting origami, tessellations and paper-based art.
We collaborated and stayed organised on Miro
Staying focused but positive mattered to us
How we worked together:
A remote yet collaborative experience
I was lucky enough to work on this project with a team of talented, intelligent women, with a great work ethic and supportive nature.
We shared the workload. Because our team was so small, we each had a finger in every pot. This allowed us all to be involved in every part of the design process, and gave each of us the chance to learn from one another's strengths while we were at it too!
We worked hard, but stayed nice. We overcame the time pressure stressors by doing our best to be patient and kind to each other, and by working hard to keep focused and organised.
We didn’t let the remoteness tear us apart. We set up a set of team rules to help us stick to values and stay on track.
Our digital toolbox:
Yodomo’s sales picked up during the pandemic:
Craft-related Google searches during the pandemic:
Setting the scene:
Is craft an escape in a time of crisis?
During the COVID-19 pandemic, Yodomo saw a rise in sales. This in itself was an interesting insight worth digging deeper into!
In fact, this wasn’t just something Yodomo experienced. It was a phenomenon that took the world by storm, as was evident by the flood of sourdough baking, “low-key gardening” and DIY home remodelling projects that filled our instagram feeds in 2020. Google even saw an uptick in bread-making queries, while the BBC reported that during the pandemic, UK flour producers doubled their production and still struggled to meet demands!
So it’s worth asking: Why have people turned to things like DIY and baking during the pandemic?
Could it be because they now had more time on their hands? Were they trying to break up the monotony of being home-confined? Or quite frankly, was it to ease the pain and anxiety of social isolation?
Was Yodomo actually ahead of the curve here, having even focused their mission statement on how creativity and craft benefit our mental wellbeing?
These intriguing questions were all great tools to help set us off on our journey to discover what exactly draws people to making with their hands - and why they could turn to Yodomo for this as a result.
It's like therapy to me
Quotes from our interviewees
It’s a chance for me to switch off my mind
I’m gifting my time and attention, not just my money and style
I love zoom courses because I can ask questions and interact with the group
I should have watched some tutorials cause I wasted time and made lots of mistakes
I don’t like not having the right tools, knowledge and space to do a good job
It’s a pain having to order different parts from different places and waiting for them to arrive
Workshops are easier since you have a commitment and can plan accordingly
Researching the user:
Uncovering what motivates users to come to Yodomo
100 survey responses
13 user interviews
4 Yodomo customer interviews
We found that people got some pretty basic mental health stuff out of their craft-based pursuits – just as Yodomo had clocked on to!
So, why did people turn to crafts?
1. For a sense of fulfilment
People’s chosen projects played a big role in their identity, giving them a sense of growth and fulfilment when taken on. They felt gratified not just by the process itself, but from the progress associated with learning and nurturing a skill, and the reward of finishing something.
2. For a well-earned break
Another significant motivation was the change of pace from work-related monotony. This fits in with the need to break up the day from COVID-19 monotony too.
3. To share it with others
The "personal touch" of gifting works and making things with friends, family or as part of a group course was a more valuable experience to them.
Ok, how did they learn and problem-solve?
In an organic and unstructured way
Interviewees combined a variety of methods like googling for answers, reading blogs, watching youtube videos, as well as a good dose of trial and error. In fact, we thought this lack of structure in learning styles was a potential area of opportunity.
What about what they disliked?
They loved the fulfilment, but hated the friction
Because this was a way to “switch off” and enjoy themselves, some people would even specifically take on low effort and low commitment projects. Others liked attending live workshops because it reduced many of the frictions involved in doing a project solo (ie. not having a commitment to start, having time-boxing and planning issues, and not having answers to questions on the fly).
Some key pain-points were:
Obstacles and annoyances that get in the way
-
Not having the tools they need to start
-
Cleaning up afterwards
The difficulty and complexity of projects
-
Not knowing how to do things
-
Getting stuck and having questions
-
Making mistakes
A lack of structure and commitment
-
Not having the motivation or incentive to start
-
Not knowing where to start
-
Struggling to plan accurately and things taking longer than expected
Time management
-
Struggling to find the time
-
Wasting time by doing things incorrectly
-
Things taking longer than expected
-
Preferring a clear and fixed start/end time in order to fit it into their schedule.
created to draw out patterns from our interviews
Affinity map
This image is an excerpt – Click here to view the full mapping of our insights.
By speaking to users we discovered that the many frictions involved in carrying out projects could make their chance to unwind more of a burden than a treat.
Synthesising our findings:
Creating a persona that encapsulates our research results
Our research showed that people’s basic needs and motivations can be quite similar. So we used these shared experiences to build a persona that could represent Yodomo’s typical user.
This persona would help us focus in on the core reasons users come to Yodomo, so we could design a solution that best serves them.
Persona
created to distil our interview findings and help guide our design decisions
Daphne Maier
Grower & plant lover
28 // London // Digital marketing
“It’s my moment of Zen! Not only does it get my mind off things, but it feels great to end up with such beautiful tokens of my care and dedication all over my flat”
“When I see a new idea online that looks so good, I get so excited to start it, but the frustration of running into obstacles on the way can put a downer on the whole thing!”
Needs & goals
-
To find a project to help her unwind and switch off
-
To understand what she’s getting into, so she can plan accordingly
-
An easy way to know what tools she needs and how to get them
-
Clear ease/difficulty indications for the project
-
A way to manage her time (time estimates, or clear start and end times)
-
Clear instructions for the project, and help to overcome issue s
-
An “encouragement” or commitment to start
Pain points
-
Feels overworked and exhausted
-
Never enough time for her passion projects
-
Wasting time with mistakes and searching for solutions to problems online
-
The inconvenience of looking for and ordering tools from different shops
Behaviour & habits
-
Caring for plants is a relaxing break from her digital routine
-
Finds the active learning of using her hands fulfilling and gratifying
-
Feels that gifting hand-made pots is more special
-
Loves making projects with her friends
-
Looks for project ideas online
Interests
Daphne likes to live by the Danish concept of “hygge” [pronounced hue-guh]. This means she cherishes the little moments of comfort in her cosy space at home with the people she cares about. She loves vegan and organic food, as well as sustainable fashion and living.
An example of the usability task we gave to users
Connecting this to Yodomo:
Pin-pointing the sources of friction on their website
4 original site usability tests
Usability testing on their site confirmed that users struggled to understand exactly what Yodomo was selling, and as a result what they had purchased and how they would receive and access it too.
Pulling from our interviews and surveys, we created a task for some users to test a typical flow for discovering, browsing and purchasing on Yodomo’s website. We then asked them to go through the website and narrate their thoughts out loud.
Daphne's scenario:
Daphne wants to create a new plant project that she can gift for her friend’s birthday next weekend, but also as a way to relax and spend time away from the screen (double win!)
She is interested in finding a project that...
is low effort and can be finished in one sitting, and only requires tools that are really easy to find.
We used this scenario to map out the user's key pain-points on Yodomo's site
Finding opportunities:
Mapping the frictions out visually
Using our persona, Daphne, we visualsed an aggregation of our usability test users’ thoughts, actions and hurdles as they went through Yodomo’s website. This allowed us to highlight some key pain-points.
Picking out these problem areas helped us find areas of opportunity that we could tackle through our design to better meet the user’s needs.
Daphne’s journey map
An archetypical journey through Yodomo.co
based on our usability test insights
Click here to enlarge the above image
I’m actually not sure exactly what this site is selling
Heuristic: Is it clear?
Quotes from our
usability tests
I can’t see how long this will take me to do.
Heuristic: Is it useful?
I can’t see any terrarium or plant related stuff, it’s all more crafty stuff
Heuristic: Is it findable?
There’s so much text, like what is this exactly? – so not straight forward
Heuristic: Is it simple?
Wait it’s just instructions? I wouldn’t call that a course
Heuristic: Is it intuitive?
What kind of courses do they offer, is this like Skillshare? But it kind of looks like a shop too
Heuristic: Is it industry consistent?
Why does “Kits” take me to a page called “Courses + Kits” if there is a menu link called “Courses” - what’s the difference?
Heuristic: Is it internally consistent?
Applying best practices:
Using heuristics to assess the usability issues we found
We used 2 industry-standard heuristic metrics (or rules of thumb 😜) to give context to our usability findings within a formal UX framework.
Because by this point it was becoming clear that Yodomo was having both usability and communication issues, we used the classic usability focused Nielsen Norman’s Ten Usability Heuristics, but also Abby Covert’s more content focused Information Architecture Heuristics.
Let's take a look:
Is it clear? (IA heuristic #3)
Users couldn’t understand what Yodomo was saying or selling
Users struggled to easily describe what Yodomo was offering. Their website talked about courses but somehow looked more like a shop. What was it selling exactly? And how did their shopping experience work?
Is it useful? (IA heuristic #5)
Users couldn’t to get what they needed out of it
The information that users cared about most wasn’t available to them. According to what we discovered from our user interviews, these were things like project length, difficulty, tools needed, and a clear overview of the project.
Is it findable? (IA heuristic #1)
Users couldn’t find what they were looking for
Our usability tests showed that there was only one way to find the project our users were looking for, and it wasn’t a clear path either.
Is it simple? (Usability heuristic #8)
Users were overloaded with competing information
Overcompensating for a lack of clarity and user-centred information hierarchy, Yodomo ended up giving the user more information, instead of better information.
Is it intuitive? (Usability heuristic #2)
Users couldn’t latch onto familiar visual cues, flows or language
Relying on things users can naturally understand is a really useful way to improve communication. Intuitive design could bring improvements to information hierarchy, usability and navigation across Yodomo’s website.
Is it consistent? (Usability heuristic #4)
Users couldn’t anticipate what would happen next
Usability can also be improved by tapping into what the user expects to see. Consistency allows the user to use the website more intuitively and more efficiently.
Consistency with the industry: This means using designs patterns that are consistent with similar websites users are already familiar with.
Consistency within Yodomo’s own site: Making sure designs stay consistent accross their own website would make using it a lot easier.
There’s a lot of homogeneity in the
e-learning and e-commerce landscape. This allowed us to lean on existing design patterns to meet user expectations and facilitate understanding and usability.
Competitors used...
Structured navigation
Clear
onboarding
Descriptive filtering tags
Standardised
product labels
Becoming industry consistent:
Using design patterns to match users’ expectations
As our testing showed, we needed to tap into existing design patterns for e-commerce and e-learning websites to align Yodomo’s product with users’ mental models and expectations.
We looked at how users expected to access and purchase similar products, as well as what worked (and didn’t work) on competitor’s websites.
Navigation
A clear and structured system that empowered the user to get a full view of their options and showcased Yodomo’s product range. Our competitor research showed that based on common patterns users would expect to be able to browse:
-
A meganav to get a clear overview of their options
-
An all projects link to have the option to get an unfiltered view of all products
-
General categories to get a high level view of Yodomo’s offering
-
Subcategories to get a more granular view of options under each general category
Landing page onboarding
Many of Yodomo’s competitors who sold a combination of physical and digital products used clear onboarding messaging to describe how the process of purchasing their products worked using:
-
A step-by-step guide of the expected process broken down into 3 simple steps
-
Actionable headings giving an overview of each step in clear, simple language
-
Clear succinct descriptions giving more clarification on what each step entails
-
Simple imagery that is eye-catching and clearly representative of each step
Tags
For e-learning and e-commerce platforms offering a wider variety of products, the benefits of using tags were two-fold:
-
To help filter and navigate through subjects and themes organically from various places throughout the site
-
To give an overview of each product, showing a variety of descriptive characteristics like time, difficulty level, materials, subject-matter etc.
Product contents
Since Yodomo struggled to clearly describe what each product did and didn’t include, we also looked at design solutions that communicated this effectively. Generally, competitors with multi-format products used:
-
Clear, simple labels to section out contents
-
Standardised and consistent labels across all products representing the possible formats/options
-
No more than 4 labels, otherwise descriptors would probably be best displayed as categories or tags
93%
of products were consistently categorised in a majority of cases
80%
of products were categorised with a success rate above 75%
1
product only was inconsistently categorised more than half the time
Closed card sort: Testing our new structure
Using Optimal Workshop’s card sorting tool, OptimalSort, we set out to test how easily understandable our categorisation system is to the user. We gave our card sort participants this new set of category names and invited them to organise Yodomo’s inventory under it.
The key takeaways were that:
-
Overall, the results showed that our classification system proved to be clear and intuitive.
-
Some products could exist in multiple categories. This was especially apparent for Macramé items which, though placed under "Textile & Needlework" most of the time, were placed frequently enough under "Home & Living" to warrant them being listed under both sections.
Closed card sort
We tested our newly-created structure with participants to see how effective it was. Using the card sorting tool OptimalSort for this, we got the following results:
1. Most of the products were categorised correctly
3. Macramé and other decorative projects could be in both “Home” and “Textile” categories
2. Only one product was tough to categorise
1
2
3
We used Yodomo's product inventory as a starting point for our card sort
Participants organised Yodomo's products in a way that made sense to them using digital post-its on Miro
Creating an intuitive navigation system:
Using card sorting to structure the site in a way that makes sense to users
3 open sorts
8 closed sorts
We used a research technique called “card sorting” to uncover language and organisation patterns that fit what user’s expected to see on Yodomo’s website.
Open card sort: How would users structure things?
We compiled a representative list of Yodomo’s products and logged each item on a digital post-it on Miro. Then came the fun stuff!
Step 1: Discover
We asked each of our participants to organise and name groupings of Yodomo's products in any way that made sense to them.
Step 2: Synthesise
We used the groupings our participants made to create a synthesised version that showed the most common patterns that emerged.
The key patterns of this were:
-
Using categories & subcategories was expected. The fact that participants also grouped products in this way further emphasised the importance of following industry design standards, as we had seen from our competitor research
-
There were common groupings. All participants categorised distinct sections for “home decoration”, “textiles”, “paper” and “cooking & fermentation”
-
There were similar areas of inconsistency. Participants seemed to struggle to categorise metal, woodwork and leather items in a consistent way.
Step 3: Taxonomy - formalising our terminology and structure
Using a combination of research and expert knowledge, we created consistent labels for the resulting hierarchy of parent categories and child subcategories.
We used the user’s words. Where our participants used a word consistently, we opted for that.
We met the users’ mental models. Again, we relied on commonly used terminology in similar competitor website structuring to create labels the user would be more familiar with.
We referred to expert terminology. We also did a quick survey of industry professionals to get an idea of the correct language used in the field.
Some key insights were:
-
Textiles is a more appropriate and all-encompassing term than “fabric”, according to our teammate and resident fashion industry expert
-
Needlework is a catch-all term for knitting, stitching, crochet and sewing
-
Botany is a term more widely used in the UK and less understood by non-native English speakers
Open card sort
We created a synthesised structure based on our participants' groupings
How might we...
make it easier for customers to find what they want to learn according to their time availability, skill level and needs?
make it clear to customers what they are buying on the product page?
improve the homepage so customers can understand what Yodomo is offering?
How might we...?
Framing our research insights using “how might we” statements
The “how might we” framework is a tool we used to refocus the user challenges and needs from our research into an opportunity to start designing solutions.
We based these statements on customers like our persona, Daphne, who need to find “a project that is low effort and can be finished in one sitting, and only requires tools that are really easy to find.”
We introduced the client to quick-fire sketching with a fun warm-up exercise
We explored ideas for multiple "how might we" statements
Design studio:
Collaborative brainstorming with the client
Though user needs are at the heart of any successful design solution, involving clients and stakeholders in the ideation process is a great way to take business objectives into account too!
We started the session off by briefing the Yodomo team on our research findings so far:
-
To ensure our research and scope so far is consistent with their business needs and goals.
-
To set us up to creating solutions with our research insights in mind.
Next, we used our “how might we” statements to frame our problem areas as design challenges so we could start ideating.
And finally, we ideated using rapid, iterative sketching to visually articulate how features might look and behave and to explore design solutions together.
Here's a breakdown of how we ran this quick-fire ideation session by rotating through each of these ~5-minute long steps:
Step 1: Context – One “how might we” task is given to participants
Step 2: Ideation – A generative sketching round of 4-6 ideas
Step 3: Presentation – Each participant briefly talks through of their ideas
Step 4: Critique – The group discusses ideas and shares constructive feedback
Step 5: Iteration – Each person refines a favourite idea into one ‘solution sketch’
Step 6: Vote – The group dot votes on final solutions to reach a consensus
(Step 7) Repeat with the next “how might we”!
An unsorted compilation of the features and ideas produced from our design studio session with Yodomo:
Click here to enlarge the above image
Ideation results:
The key take-aways of our session
We came out of the design studio session with the client with a clear idea of the best solutions to start implementing in our designs.
Some of the most valuable outcomes of our design studio session with the Yodomo team were:
-
A set of design solutions rooted in our research findings
-
An aligned vision of the types of solutions, features and functionality to consider implementing
-
A wide diversity of ideas to choose from - ranging from the practical to the creative and farfetched
-
A good idea of the most liked solutions by everyone involved
-
An exploration of ways solutions might be implemented
-
A clearer image of what is “doable” - ie. how certain features might be more easily and quickly implemented within the restriction of Yodomo’s platform
-
An exploration of ideas beyond the scope of UX that may be interesting - ie, from a business or marketing perspective too.
How might we...
make it easier for customers to find what they want to learn according to their time availability, skill level and needs?
Prioritising what’s doable:
Consolidating our design ideas into a realistic implementation plan
Using the insights on this design studio with Yodomo’s team, and supported by my prior experience working in web development with a variety of content management platforms (CMS), we were able to prioritise the most energy, time and cost-efficient solutions.
Because Yodomo’s website ran between two platforms (Shopify and Teachable) and they didn’t have a team of coders to implement design changes on the fly, we needed to prioritise design solutions that were feasible within these limitations.
Feature prioritisation matrix
we used to chart our design studio ideas into an actionable plan
⭐️ My background in web development was essential in helping us prioritise the
most practically feasible features for Yodomo.
Designing our solution:
Applying our research findings and then researching some more!
19 redesign usability tests & iterations
Using the information architecture and usability heuristics we referenced in our research phase as a guide, here's how we improved Yodomo's website.
1. Onboarding
Explaining what Yodomo was about, and how they worked right from the start
Make it clear:
Original website:
The landing page didn’t explain how Yodomo worked. This was particularly confusing because though it looked like a standard e-shop, its main offering was DIY project guides and not finished products (though they sold these too!)
Our redesign:
Through a step-by-step onboarding, we created a clear overview of how Yodomo works right on the homepage, with links to empower users with the freedom to explore and find their own way around the site.
Being informative but succinct, in our own redesigns too!
Make it simple:
We worked on cutting out the mess to