Yoopick
eCommerce
Adding new features to the mobile app of the first eCommerce second-hand comparator in Belgium.
Role : Product Designer
Client : eRowz
Date : 2021
Tool : Figma, Trello
What I did
UX Scan
Wireframes
What I delivered
Feature Redesign
HI-FI Wireframes
UI Design
1st second-hand items comparator
Yoopick is the first second-hand product comparator in Belgium. The search engine is helping users finding products across different platforms in one glance.
The project started as an internal experiment while the founders where working at Veepee - an international eCommerce company specialised in the flash sales industry.
The app aimed to make the second-hand market more accessible as well as gaining more time to the users while comparing products from different platforms. The mission was to create a better experience while navigating through the app and improve the conversion rate. After brainstorming and analysing the usability testing sessions that were conducted by the product manager, I was in charge of optimising the final CTA button.
Pain Points
My challenge was to redo the result page for the mobile app that would improve user engagement and retention. To be sure we were addressing the right problems, we designed our process around regular cycles of prototyping and user sessions to validate every step of the way with the input from real users. After noticing users didn't understand how they could compare different products and where was the CTA to click on, we've come to the agreement to change the information architecture of the product page. The main problems encountered from the users were multiple. I've pointed out a lack of accessibility around 3 factors : font size, color contrast and touch target. First, the font size and the word spacing were too small to read, especially for the elderly. Secondly, the colour contrast ratio wasn't enough paired with its background to make it distinctive. People with visual disabilities perceived less the component on the product page. Thirdly, according to the Fitts' law, the CTA compare button was too far from the thumb which makes it harder for the user to click on while using the mobile with one hand. It also implies users with potential mobility impairments. Also, they weren't enough inactive space to avoid the user to overlap with other touch target. Based on research, the CTA compare button had to be revalued.
01
FONT SIZE
Font size is a cornerstone of UX, influencing readability and accessibility for diverse users. It creates visual hierarchy, directing attention to vital content, and adapts responsively for consistent legibility across devices, enhancing overall user experience.
02
COLOR CONTRAST
Color contrast is vital in UX for accessibility, aiding readability and usability for all users. It establishes hierarchy, guiding attention and focus within interfaces. Thoughtful contrast choices enhance aesthetics while ensuring content clarity and accessibility.
03
TOUCH TARGET
Fitts's Law in UX: larger and closer elements on interfaces are quicker to interact with. It emphasizes the relationship between target size, distance, and interaction time. Design utilizes this to optimize user experience by prioritizing larger, closer elements for easier interaction.
Wireframes Low-Fi
3 suggestions
Prototype
3 suggestions
Solution
Using the Design Thinking method, I set out to design a solution that would meet the needs of the target user (3 personas has been settled by the product manager for this case), the company's objectives and technical capabilities.
With research goals in mind, the product manager and I gathered contextual information about the online second-hand market. I identified a baseline for what users expect from a search engine. The analysis revealed the users need to easily select multiple products they might be interested in. With the product page as the main touch point, I set up the app's architecture based on the main use-case : ' I want to compare the same product from different platforms'. Focusing on the utility of selecting items, I suggested 3 sketches to the product manager before pursuing with the low-fidelity wireframes. While sketching, the focal point was making the touch target closer to the thumb. Also, knowing users spend most of their time on other apps, it means they prefer the app to function the same way as what they already know (e.g. check box and toggle component). Again, the CTA had to differ from the rest in order to be remembered (e.g. green color contrast when selected). The priority in given solutions was to make it functional and accessible.
After taking into account the product manager's perspective and directives, I've pursued the result page design that were planned to be developed one last time for testing before launching.
