eCommerce Website
A personal project to improve the mobile and desktop experiences of an online LGBTQ+ apparel store.
PROJECT TIMELINE
4 weeks
(May 2019)
MY ROLE
Redesigned the Home Page to be responsive, mobile-friendly, and more accessible.
SKILLS HIGHLIGHTED
UI Design
Responsive Web Design
User Research
Wireframing
Prototyping
MAIN GOAL
Make it easier for shoppers to find what they're looking for on the home page.
01.
THE PROBLEM
There are millions of eCommerce websites out there that offer great mobile experiences to consumers who are constantly shopping on-the-go. Yet, RainbowDepot.com fails to provide a mobile-friendly shopping experience with clearly communicated product information. As a result, customers are leaving the site to find LGBTQ+ inspired gear elsewhere.
The Opportunity
With Pride Month fast approaching, I saw an opportunity to help RainbowDepot.com connect with customers on a deeper level by making it easier for shoppers to find LGBTQ+ inspired gear and celebrate pride in style.
Business Objectives
-
Increase website conversion rate during Pride Month (June 2019).
-
Decrease bounce rate of the home page
-
Generate more sales from Pride 2019 Collection
About the Company
Rainbow Depot is an online store that offers affordable LGBTQ+ inspired gear from graphic tees to pride flags and more, so members of the LGBTQ+ community and their allies can show their pride and be their most authentic selves.
02.
MY ROLE
My responsibilities:
First, I conducted user interviews and user testing among the LGBTQ+ community to learn more about users' behaviour and where they were struggling the most on the Home Page. I created sketches, low-fidelity wireframes and high-fidelity mockups to explore different solutions to users' pain points.
Then I created a mobile and desktop prototype to test with users and validate my designs. Lastly, I iterated my designs based on user feedback.
03.
MY PROCESS
I follow IDEO’s human-centered design and lean UX design thinking process to make sure that my design decisions are supported by user research and feedback.
04.
UNDERSTANDING USERS
Personas
I conducted casual interviews with 8 people from the LGBTQ+ community to learn more about their needs and goals. Based on my interviews and my assumptions about Rainbow Depot's users, I created personas for 3 types of users. See below:
THOMAS (trans man)
Thomas recently transitioned from female to male & has never felt happier in his own skin.
Since his top-surgery, it's been challenging to find clothes that fit his new body proportions.
GRACE (lesbian)
Grace is afraid to come out to her family because they are very strict & conservative.
She's still figuring out her identity & own unique style, so she looks at other lesbians on Instagram for style inspiration.
JAMES (gay man)
James is proud of being gay but still struggles with depression & anxiety from being bullied as a child.
He feels his best when he looks his best, so he likes staying on top of the latest trends and prioritizes the quality & fit of his clothes.
Usability Testing (in person)
I reached out to 5 users to complete a series of tasks on RainbowDepot.com. By asking them to explain how they were feeling at each stage of the shopping process, I was able to validate some of my assumptions from the personas.
Customer Journey Map
To help build empathy for users, I created a journey map to illustrate their experiences shopping at RainbowDepot.com. Users were the most frustrated by the clutter/disorder on the Home Page, the glitchy filter and search functions, and the tedious checkout process.
Customer Journey Map.
Empathizing with users through 'Job Stories'
I created job stories to explore different contexts in which a user would be shopping at RainbowDepot.com. This helped me understand users' motivations and desired outcomes.
Situation → Motivation → Outcome
1 - When shopping for Pride clothes online, I want to be able to filter by size and colour, so that I can find clothes that fit me and my style.
2 - When shopping on international online stores, I want to be able to easily switch currencies, so that I can see how much my item will be in CAD before shipping.
3 - When shopping online, I want to be able to see what's on promotion or on sale within a couple of seconds, so that I can compare products to other websites.
Important insights I discovered during user research:
User Quote
"Lesbihonest, if I can't find what I need on a site within a couple of seconds, I'll go find a better site."
— Joelle, Toronto (Age 22)
1
Mobile is king
75% of users interviewed said they prefer to shop online on their phones rather than desktop.
2
Design matters
60% of users said they would pay more for a product if they are guaranteed a good user experience.
3
Users will compare
Users will shop around for quality and value first before they make a purchase.
4
Users are distracted
Users are frequently interrupted
with texts & notifications while shopping on their phones.
05.
DEFINING THE PROBLEM
Identifying Pain Points
After usability testing, I jotted down each user’s pain points onto a Post-It note. Then I used affinity mapping to group the pain points into similar categories on a wall.
Affinity mapping pain points on a wall, each colour represents a user.
Prioritizing Pain Points
Then I prioritized each pain point based on its importance to the user as well as its importance to Rainbow Depot’s business needs.
Prioritizing pain points on a 2x2 matrix.
I redefined 4 main pain points below:
Home Page
Users found Home Page cluttered and struggled to find the information they needed.
Product Info
Product information was either missing, hidden, or not presented clearly.
Checkout
"Guest checkout" was not available, which slowed down the overall checkout process.
Imagery
Site images were irrelevant, poor quality, or overwhelming
to users.
Usability Testing
I asked 5 users to complete the following tasks on both a desktop and mobile device:
1. Visit RainbowDepot.com
2. Find a t-shirt
3. Add t-shirt to shopping cart
4. Proceed to checkout
This test helped me discover specific problem areas on the current site so that I could brainstorm solutions for each pain point.
These were some of the results:
I highlighted issues users encountered on Rainbow Depot's current home page.
06.
IDEATION
THE CHALLENGE
How might we design a mobile-friendly home page for users who are frequently interrupted?
How might we design content to compete with other eCommerce websites offering similar products?
Taking a mobile-first approach...
Why mobile first? Because the vast majority of Rainbow Depot users shop online using their phones over other devices like desktop and tablets.
I came up with several potential solutions for both desktop and mobile to address the pain points mentioned above.
Mobile concepts:
Desktop concepts:
Sketching out wireframes was a quick and easy way for me to explore different ideas, without getting caught up in the finer details.
Low-fidelity Wireframes
After examining my Home Page sketches and selecting the layout that was the most simple and user-friendly, I created some quick low-fidelity wireframes for mobile and then for desktop, using Sketch.
Proposed solutions for mobile:
Wireframe of mobile home page, designed using Sketch.
Proposed solutions for desktop:
Wireframe of desktop home page, designed using Sketch.
UI design inception worksheet.
Mood board created in InVision.
Creating a 'rainbow' colour palette that's easier on the eyes...
Working with a 'rainbow' colour palette was tricky because too many colours can often be overwhelming to eyes, but I was determined to make it work!
I picked 'red' and 'blue' as the primary colours to keep things simple. Throughout the website, I used dark overlays and neutral colours to tone down the rainbow accent colours.
Colour palette created in Sketch with the Prism plugin.
Choosing a "hip" typeface...
'Avenir' is a familiar, friendly looking font. The sans serif font keeps the website looking modern and minimalist.
Typeface style guide created in Sketch.
UI Elements, Buttons, & Icons
UI elements and shapes are rounded but precise for simplicity and easy recognition. Users prefer minimalist aesthetic, so I kept buttons clean, with occasional pops of colour.
UI elements designed in Sketch.
The old Rainbow Depot logo was dated, and users I tested the original website with, found the colours overwhelming.
With the new logo, I toned down the rainbow colours, changed the typeface to a modern font, and made the font weight lighter for a friendlier, more approachable look. I sketched out initial ideas on paper, then created the final logo in Adobe Illustrator.
Designing a more modern logo...
Setting the mood...
The Rainbow Depot brand is about being proud of who you are, being a part of a community, and lifting each other up.
Through vibrant colours, rounded shapes, and a modern typeface, I hoped to evoke a young, fun, and hip vibe.
A branding exercise to help organize my brain...
After creating the low-fidelity wireframes, I started working through the details of the UI design, branding, and building a style guide.
UI Design Inception
07.
VISUAL DESIGN
& BRANDING
Old logo
New logo
08.
PROTOTYPING
THE SOLUTION
Design for interruptions by making the site easy to re-engage with.
Hi-fidelity Mockups
After determining the mood, colours, typeface, and shape of UI elements, I started designing high-fidelity mockups in Sketch using the greyscale wireframes as a reference.
High-level design objectives:
-
Simplify navigation and reduce clutter
-
Communicate messaging clearly (eg. promotions/sales content)
-
Design clear, prominent, and frequent call-to-action buttons
Mobile design solutions:
Hi-fi mockup of mobile home page.
Desktop design solutions:
Improvements made to the desktop home page.
09.
VALIDATION
5-second Validation Test
One of the tests I conducted was a 5-second test on 5 users to assess information and visual hierarchy of the Home Page. The test also helped uncover how clear and memorable the home page was to users.
How the test works:
-
I showed the Home Page design to a user for 5 seconds, then removed it from sight.
-
I asked them what they remembered about the design and what they thought the purpose of the web page was.
The results:
The majority of users visit Rainbowdepot.com in a distracted, multitasking state, so the "5-second test" was a good indicator of how users really experience the website.
Design Iterations & Testing
After running usability tests on the Home Page with 5 users, there were a couple issues brought to my attention.
Issue #1: Users didn't realize the "shopping bag" icon was a shopping cart.
Solution: Add a red '0' inside the shopping bag for easier recognition. This will let the user know right away that their cart is empty.
Issue #2: Users struggled to find the "switch currency" button.
Solution: Replace "switch currency" button with appropriate flag (Canada or US flag) for quicker recognition.
10.
KEY TAKEAWAYS
Reflection 💭
There were many directions I could have taken with this project, including redesigning the product pages and simplifying the checkout process.
But for the purpose of this project, I wanted to focus on increasing website conversion, starting with the redesign of Rainbowdepot.com's home page. After all, first impressions are lasting impressions.
Throughout the process, it was user frustration that helped guide me to the best solution, which was solving for these 3 things:
-
Designing a responsive, mobile-friendly page
-
Improving navigation and flow
-
Communicating key messages and promotions clearly
Lessons Learned ✌🏼
-
Designing for interruptions and short attention spans made the site easier to re-engage with
-
What mattered most to users was efficiency, control, and ease of use
-
Millennial users will move on the next best thing if you don't meet their expectations, so make a great first impression and give them a reason to stay
Much more to be done...
If I were to take this project even further, I would include a "Recommended for you" products section to give users a personalized experience. I would also provide ample opportunity for user-generated content and feedback, such as star rating and reviews on product pages of the site to invite users to participate.
And lastly, because these users are extremely socially-oriented, I would have pushed more social media interaction by coming up with a hashtag they could use to share their Pride 2019 outfits and generate buzz.
Note: I do not work for, nor am I affiliated with, Rainbow Depot. I created this UX case study because I am a designer who likes to solve problems and I wanted to show that the Rainbow Depot website has the potential to sell more products and connect with customers on a deeper level with better UX.
