My muro
Overview.
This was our final project, where I worked in a team of 3 with a real client. It was a 3 week project where the final deliverables were:
• Research insight & findings concerning competitors, user types and behaviour
• Personas and scenarios
• Experience map/User journeys
• Information Architecture
• Design & usability recommendations for improvement
• User flows and Screen flows
• Product Sketches and wireframes
• High fidelity mock-up
• Prototype of design(s)
• A final presentation to the client which summarises the UX work
Client Brief
Company and Product Name: MyMuro
MURO is a beautifully designed, educational activity centre that’s modular so it grows as children develop. They are currently the only product of this type on the market. We’ve been trading for 2.5yrs and have sold nearly 2000 units so far.
URL: mymuro.com
Project brief
MyMuro is looking to optimise the content on the website, and develop it into a useful resource for parents to understand the development of their children and how toys can support this.
- Optimise the existing shopping experience
2. Understand what is and isn’t working well in the current user journey from product discovery through to check out.There are Google analytics available on this
3. Exploring how we might optimise and improve the way we use educational content on the site to provide value to our users
4. Currently have magazine
5. Want to be more educational for parents, informative
6. Different educational philosophies/stage of educational development — bring professional learnings into the home with or without our products
7. Become a helpful resource for people in itself
IDEA: could this be open source in some way — how others can contribute to this (this may be more of a long term thing, but could be worth exploring the potential for!)
8. Explore how we might add resources specific to a product e.g. educate them about the developmental journey fitting with that particular product. Currently working on this
Competitive research
To understand where Muro is on the market we performed competitive analysis, where we researched all the direct and direct competitors. In the following table you can see the main 3 competitors and some of the key features that are missing. These missing features were the space that we could work and make muro stand out.
Main takeaways from the research:
- Majority of educational toys are sustainable
- Most independent companies use video content
- Bigger brands do not tend to include detail on the developmental benefits but do have a much lower price point
Users and audience
Based on the Google analytics data we found out that most users are accessing the website through mobile desktop, specifically from Instagram and the biggest percentage are females 25–34 years old.
For this reason we created a persona, the personas are archetypical users whose goals and characteristics represent the needs of a larger group of users. In the persona’s profile we included behavioural patterns, goals, motivations, skills, attitudes, and background information, as well as the environment. Following that we based this information and designed the new website.
This is the persona we have created:
Roles and responsibilities.
That was our team.
We worked remotely and we used Miro board for all the work we had to do. On the first day we set team rules and discuss how we like to be treated when working with a group of people. Everyday we had a stand-up for the things to be done and we also had 10–15 min per day to talk about things out of work. We all had equal responsibilities and took place in every part throughout the process, researching, designing, interviewing users, meetings with the client and final presentation.
Process and what I did
After the research I continued with testing the current website with some usability testing. I found potential users and created an interview script and asked them to perform some tasks such as “find the story of the company” or “purchase the mega-bundle” .
The main takeaways from that stage’s usability testing was
- “Shop” was not immediately obvious
- “Magazine” not “blogging” was confusing they didn’t know where that will land them
- Main products are not highlighted on the homepage
- “Sold out” was off putting; when will it come back? Sign up for restock?
- How big is it?
- No product reviews (only brand feedback)
- Would be good to have a wishlist (e.g. could send to grandparents for accessories)
- The ‘why’ for accessory items was really important. For the bundles, a link to individual accessory pages would be helpful
- No link to socials on homepage
For this I decided to reorganise the site map and the main navigation on the website, when we speak about the sitemap we want to think about the width and the depth of the website. The current one is quite wide and the naming of every page did not give clear navigation to the users.
The old sitemap:
The new sitemap.
I wanted to make sure we empathise with Amy (our persona) so I created her emotional journey to clearly see her emotional state throughout her flow on the website and based on that I created an empathy map to really get in her way of thinking.
The outcome of that was the creation of the happy path and based on the happy path we started creating the low fidelity web page and eventually moved into mid and high fidelity. I designed in a mobile viewport as the biggest percentage of users were coming from mobile desktop.
The happy path.
For every fidelity stage we performed usability testing. We wanted to make sure that arriving on the high fidelity pages, we will make the least changes possible so we went into very deep research on the low and mid fidelity prototypes. I made sure that every user that was interviewed met the criteria, that’s why I published the survey on Facebook groups with mums and parents, I emailed mum’s net and also contacted grandparents that shop online for their grandchildren.
A few examples of the Usability Testing Script for the lo-fi iterations:
- Where would you expect to find info (e.g. educational)?
- Do you feel the products are categorised in a logical manner? (check taxonomy)
Scenarios that we used for the testing:
Task 1 — Show me where you’d find out more about why/how MURO was created?
Task 2 — Show me where you’d find information on the educational benefits of the toys
Task 3 — Add a mega bundle to cart + checkout
For the mid-fi iterations we did affinity mapping to categorise what the users said:
Final iterations notes for the high fidelity:
Update homepage to make it clearer what they can buy
Add PP to beginning of checkout
Add ‘refer a friend’ to checkout + footer (referral code preferred!)
Make benefits of newsletter sign up clear
Rename “how can MURO help” (sounds like customer service)
Better use of breadcrumbs
Better photos on PDP (only one video)
Audio version of blog posts
Problem statement
“Amy needs a convenient way to make an informed purchase of an educational toy because she wants to support her son’s cognitive and physical development but is short on time.”
Design Studio
In the end of the first week we performed a design studio, where we presented to the client and his assistant all our findings and showed him the main problems represented in HMWs. We voted with possible solutions and hand sketches and the best ideas have been developed on our design plan. We did our best to keep the client involved in every stage of the UX process.
How might we encourage users to explore more of the educational content?
HMW make the educational benefits (from a specialist’s POV) of each toy easily understandable to the user?
HMW direct users from an article to a product page without compromising the article’s ‘educational’ feel?
Styleguide
Challenges
Whilst we really wanted to keep Muro’s distinctive green, it did not pass accessibility checks, simply meaning those with visual problems may incur some issues when using the site. Ultimately, this could lead to incomplete purchases and increased drop off rates. By adjusting those levels, we made sure the site is accessible to all.
Typography
This type scale demonstrates the typeface we used within the site. We used two typefaces with rounded corners in keeping with Muros brand aesthetic.
Prototype
We deliver a high fidelity prototype, for the client to test and explore its function. We also presented the prototype in the rest of the class based on the user flow of the persona I have stated earlier.
Lessons
“We believe as the UX team that worked on this project, that by better educating our users about MURO’s USPs and developmental benefits, we can increase the sales conversion rate and corner a larger portion of the market.Through making this information both accessible and prominent we hope to have laid foundations to achieve this!”
Future steps
- Free UK shipping
- Future blog posts to be written by educators with clearly displayed credentials
- More video content, possibly health specialists and kids educators explaining why the product is important and maybe showing to kids in the video how to use it. This way parents can imagine their kids playing with the toy and can see the actually size.
- Podcasts to complement blog posts
- Product specific reviews
