header-home3_edited.png
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.

This project was produced for Yodomo as part of General Assembly’s User Experience Design Immersive.

soraia-yodomo-portfolio-mockup9.png

 Click to enlarge

UX

UI

Information architecture

Content design

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

|   3 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.

emoji-star.png

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

emoji-muscle.png

My experience in content and storytelling helped us craft a clear messaging strategy and streamline Yodomo’s content. 

emoji-muscle.png

My visual design skills helped us create intuitive graphics and  iconography to improve communication and help user understanding.

emoji-muscle.png

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

emoji-heart.png

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.

emoji-heart.png

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

emoji-meridian.png

This project was produced entirely remotely due to COVID-19.

IN A RUSH?

for an overview of our research and solution

OR, READ ON

for the full case study

soraia-portfolio-bg-dark.png
 
group-zoom2_edited.png
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
miro-workspace_edited.png
team-rules_edited.png
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:

toolbox-software_edited.png
soraia-portfolio-bg-dark.png
 

Yodomo’s sales picked up during the pandemic:

yodomo-sale-surge_edited.png

Craft-related Google searches during the pandemic:

craft-sale-surge_edited.png

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.

 
 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-persona-img.png

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.

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...
competitor1.png
Structured        navigation
competitor2.png
Clear
onboarding
competitor3.png
Descriptive 
     filtering tags
competitor4.png
    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

 

This site is still in progress 👷🏻‍♀️🔧

More work is coming soon!

Updates to come will include:

●  Facilitation & Teaching

●  Video & Motion

●  Visual Design

●  Creative Programming & Connected Objects

... and of course...

●  MORE in-depth case studies!

Want a sneak peek? Get in touch!