Mymuro
Overview
This was my 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
For full case study visit medium https://bit.ly/32bQxwP .
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.
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
Examine how we might optimise and improve the way we use educational content on the site to provide value to our users
Explore how we might add resources specific to a product
Competitive research
To understand where Muro is on the market we performed competitive analysis, where we researched all the direct and indirect competitors.
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.
Process and what I did
After the research, we continue with testing the current website with usability testing. We 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 were 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 is really important. For the bundles, a link to individual accessory pages would be helpful
No link to socials on homepage
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 was quite wide and the naming of every page did not give clear navigation to the users.
The happy path.
For every fidelity stage, we performed usability testing to make sure we change anything that is not clear for the users. We wanted to make sure that, when arriving on the high-fidelity pages would make the least changes possible.
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 categorized in a logical manner? (check taxonomy)
Sketches
Initial sketches
Usability testing on the mobile version of the e-shop showed that the CTA was not clear, we made sure SHOP was visible and clear on the redesign.
The client wanted to make sure that the users will be able to differentiate the brand from others based on the educational value on them from the homepage, we added a section explaining the reason behind it.
We added filters based on the needs of the specific education value that the parent wanted to focus e.x motor skills to improve holding pen.
We added a small description on top of the photo explaining why this product sets itself apart from other toys, through the educational value.
Iterations
CTA clear SHOP, on the hi-fi we created the “puzzle” effect to look more funky and close to kids
Clear explanation on why and how the toys are educational.
From interviews and testing the users explained that they like stay connected with other parents through Instagram and most of the traffic came through Instagram posts so it was clear that we have to add this on the homepage.
Testing showed that we can find a better way to communicate this part with the users.
Parents explained through the survey we did that the most convincing way to buy a toy is through reviews from other parents, we added reviews on the homepage.
We rephrase the sentence and added a picture of a child to make parents visualize their child playing, changed the button under the text, and followed the design pattern with the green circles.
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, by testing the color contrast with Stark.
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 actual size.
Podcasts to complement blog posts
Product-specific reviews
Final wireframes
(Just a few examples video link below for the prototype.)
