Redesign MRP shop for selling aesthetic devicies online
Project duration: Dec 2020 to June 2021
Embedded Files
Overview
MRP specializes in empowering aestheticians by connecting businesses, clinics, and consumers with the right devices. Operating across North America, MRP provides suitable devices for all types of aesthetic businesses, including small labs, clinics, schools, and hospitals.
MRP developed mrp.io, an e-shop for aesthetic devices and accessories. This platform elevates MRP’s online services above the competition, streamlining the process for purchasing devices, accessories, and other related services.
I led the redesign of mrp.io, transforming it into a comprehensive online shop for buying and selling new and pre-owned aesthetic devices, accessories, and additional services.
Problem
Problem
Available online shopping websites have cluttered designs, inefficient systems for browsing through products, and confusing checkout processes.
Solution
Solution
Design a MRP website to be user friendly by providing clear navigation a new visual style that aims ahead while reflecting the company's core values and offering a fast checkout process.
My Role
My Role
I led the cross-functional desig tea, conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.This lead to achiving 27% increase in conversion rate.
User Centered Design Process
User Centered Design Process
Brainstorm & Ideation
Many clinicians consider their aesthetic devices to be crucial components of their practice. They are concerned about their devices' performance and want to ensure they are functioning optimally throughout the day. Therefore, we aimed to design a solution that can provide clinicians with peace of mind by allowing them to monitor their devices' status and promote greater clinician-device interaction.
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users visited the website during working hours and on desktop computers. However, many shopping websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of getting a good deal on a system or a part.
User research: pain points
Navigation
Shopping website designs are often busy, which results in confusing navigation.
Interaction
Small buttons on shopping websites make item selection difficult, which sometimes leads users to make mistakes
Experience
Online shopping websites don’t provide an engaging browsing experience
Language Barriers
New users don't know the names of the devises very well. They will feel more confident if they can translate the site in their native language.
Persona: Maggie
Problem statement:
Maggie a budget-conscious business owner, needs intuitive website navigation and search filters for online shopping.
User journey map
I created a user journey map of Maggie’s experience using the site to help identify possible pain points and improvement opportunities.
Starting
the design
Site map
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Site map
In order to develop the main user experience for MRP, we created a user flow. This approach helped us to prioritize the user's experience and learning needs, rather than focusing on the specific details that we would fine-tune later. Additionally, it allowed us to communicate the filter options more effectively, providing us with a better understanding as we moved forward.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper wireframe
screen size variations
Because MRP customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Digital wireframe screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
User research: pain points
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
5 Participants
Length:
20-30 min
Usability study: findings
These were the main findings uncovered by the usability study:
Cart:
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
Check out:
Users weren’t able to easily copy the shipping address information into the billing info field
Account:
There wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info
Refining
the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart without going through a complicated process to add or remove items.
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart without going through a complicated process to add or remove items.
Mockups: Original screen size
Mockups: Screen size variation
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Design system
Accessibility considerations
1
I employed headings featuring varied text sizes to establish a distinct visual hierarchy.
2
I implemented landmarks to facilitate navigation throughout the site, catering to users who depend on assistive technologies.
Innovations
I ensure that each image in carousels shares the same background to create a cohesive look and deliver a visually immersive experience for the products.
Going forward
Takeaways
Next steps
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps
1
Conduct follow-up usability testing on the new website
2
Identify any additional areas of need and ideate on new features
Thank you for reviewing my work on the MRP Website!
Reviews
Uriel was part of a team that instrumental in building out our initial IT platform from developing Magento and all its functionality, UX, photographing and listing, video production, PPC and SEO, etc.
He is punctual and committed to the vision of leadership. Although often quiet, he absorbs and simply gets the work done. He looks and desired new challenges. And thinks and acts ahead of coming barriers. He is a joy to have on any team and we would hire him back anytime.
Scott Carson
Founder & CEO
Powered by MRP
Page updated
Google Sites
Report abuse