Design Case Study
My Collections
Elevating the E-Commerce Shopping Experience through new Ratings & Reviews features.
By: Elle Luo (Product Designer)
About
After discovering that there was low usage of ratings and reviews on the e-commerce site, LCBO|next set out on transforming the user e-shopping experience by integrating features that provide customers a way to remember which items they’ve liked or disliked in the past and motivate them to try new products.
This page features the demo & design journey.
Timeline
October - November 2022
Team
-
Shimona DeSouza (Product Manager)
-
Elle Luo (Product Designer)
-
Richard Xu (Full Stack Developer)
-
Tristan Parry (Full Stack Developer)
Design Journey
Discover
Explore
Ideate
Design
Deliver
Discover
Through self led innovation workshops, we identified problem spaces of LCBO's services through brainstorm methodologies.
We decided to focus on Ratings and Reviews as it complemented LCBO's current web development and impacted a large number of customers.
Explore
As the only product designer, it was critical for me to push for thorough research to maximize business value and time, but most importantly, make sure the product is one that customers actually want and enjoy.
Market Research
The product team started by investigating many external articles and past case studies to understand the general market and its value for the business.
We also connected with the LCBO E-Commerce Data Team to better understand needs from users with LCBO Accounts based on specific data to determine the monetary value of the project.
Product Research
With market research looking very promising, I started preparing for possible conception. I analyzed other platforms known for their successful ratings and reviews system, trying to understand what was received well with customers in the past. This also served as a great base for user interviews to test their excitement towards various solutions.
User Interviews
To gauge LCBO customer specific needs and their reception to this new feature, I conducted user interviews, focusing on understanding their journey shopping at the LCBO. I took a deeper dive into pain points and gaps they experienced with the E-Commerce site and their perceived value of ratings and reviews for beverages.
Our team also sent out a survey gathering 15 submissions from customers to further validate the need for this product.
Ideate
Coming up with a Feature Set
As our problem statement and target customer group started to clearly define, we began ideating for the solution. Based on all our user interviews and data research, we were able to classify the information in groups of features. At this point, we also wanted to highlight if there were any confusion to how the feature would be integrated into the site so we could make it more intuitive in design.
Furthermore, to champion an MVP - we broke down the design into phases, planning for a long term iterative process.
Laying out the infrastructure
With the feature set listed out, I worked closely with the Product Manager to set up a user flow of the new feature. We worked on minimizing the number of steps required to complete tasks and reusing existing business flows to make it inviting for customers to try the feature.
Design
Since this would be part of the LCBO page, it had to be accessible by mobile or desktop view.
Below are my key design decisions.
Sketches
With so much data to display (ie. the ratings, reviews, product details, and buttons), I started with quick hand sketches to help me familiarize myself with the layout space and its possibilities.
Wireframes
Collaboration is Key
With a better understanding of some designs, I shifted ideas into a more realistic wireframe. I started hosting design reviews with developers, presenting various alternative solutions to ensure feasibility for each design and get a better understanding of their development toolbox.
1. Maximizing Information Space
I worked with the team on prioritizing what content to put in each row so viewers could still read their own reviews easily.
2. Enabling private reviews
The biggest selling point was to allow users to privatize their reviews. I debated on how to allow users to do this - some ideas included as a pop up, direct on the page, or external product page.
3. Reduce Visual Load
For Mobile View specifically, I thought about possibilities to reduce details on the screen, such as through drop downs or buttons.
Prototyping
After receiving internal feedback, I translated the wireframes into realistic visions.
1. Components & Style
To make it as seamless as possible, I built a Figma design system off of existing component systems to keep consistent with the site’s typography, colour palette, components and style.
2. Privatizing Reviews - Toggle Button
I rearranged the toggle button to be embedded into the review. This maximized space for each row but also enabled users to conveniently adjust the privacy of review directly.
3. Toggles & Drop-downs
To allow the user flexibility in how much detail they want to see on mobile screens, I used a toggle to show all and individual drop-downs together. I positioned each item so it wouldn’t distract the user from the main content.
User Validation
If the users think it's a good product, then it's actually a good product. I started conducting user interviews again, reconnecting with customers that I had interviewed before as well as new customers to get a balance of user feedback. Then, I worked with the team to prioritize the features for the next iteration.
We received very positive feedback, with all users saying they would create an LCBO account just to use our new feature. The E-Commerce team liked the idea as well, adding it to development backlog.
Delivery
Taking into consideration all the user feedback, I implemented it into a final design for this phase.
The main adjustments added were focused on giving the user more flexibility in using the feature.
-
The ability to add a product to multiple lists
-
The ability to sort lists by date added, price, and rating
-
Making the buttons more accessible by color contrast
