My Role
-
UX Research
-
Typography
-
Visual Design
-
Responsive Web Application
Tools Used
-
Adobe XD
-
Adobe Photoshop
-
Wix
-
Miro
The Problem
People struggle to use the outdated site and become frustrated that they can't browse products
ORIGINAL HOMEPAGE
My Process
Empathize & Discover
Define
Research & Synthesize
Ideate & Evaluate
Design
EMPATHIZE & DISCOVER
Initial User Interviews
I interviewed & conducted user testing on 5 participants to gain insight about what customers experience during their online shopping sessions. I discovered 3 reoccurring issues:
-
CONFUSING NAVIGATION - Participants struggle to navigate the website, most people resort to using the search bar. This limited their ability to browse products which caused frustration.
-
HARD TO VIEW PRODUCTS - Product pictures are few and too small to view. Participants craved more visual information.
-
OUTDATED WEBSITE - Old website layout is underwhelming and limiting. None of the participants would recommend the site to others.
Heuristic Analysis
Scandinavian Form & Design has confusing navigation, lacks product pictures, and has an outdated layout which makes browsing for products difficult and unpleasant. I did my own heuristic analysis to discover more possible pain points.
HOMEPAGE
DEFINE
Persona
I used Scandinavian Form & Design's Facebook data to determine that the 88% of the fans are women ages 45-65. This along with the information from the interviews I created persona Amy Andersson.
With its confusing navigation, unclear branding, and outdated appearance it is easy to understand how someone like Amy might choose to leave the website instead of browsing the site and placing an order.
RESEARCH & SYNTHESIZE
User Insights & Testing
I asked 9 female participants ages 25-60 questions about the website as they were instructed to browse for a product, place it in their cart, and checkout. Some of the questions included:
-
What is your first impression?
-
Can you understand the navigational categories?
-
How did the checkout process make you feel?
-
What do you think would make it better?
Users wanted to understand more about the brand and felt like the website lacked any personality. They wanted to be able to browse categories and wanted more pictures of the products. When asked if they would recommend the site to a friend none of them said they would.
Affinity Map
I took the information from the interviews and user testing to find common themes.
Main Insights
-
CONSUMERS WANT TO SUPPORT RELIABLE BRANDS - They want to know that the products they are buying is quality, they support brands they enjoy and get recommended by others.
-
VISUAL REPRESENTATION IS KEY - products should be front and center. People make their shopping decision based on the images they see of the product, staged photos help them envision themselves with the products.
-
PEOPLE WANT OPTIONS - Lack of choices and freedom leads to frustration and cause them to leave in it search of something better.
Competitive Analysis
I researched home goods e-commerce sites as well as brands whose main focus was on Scandinavian products. I found direct and indirect competitors and analyzed how they built their websites, while keeping in mind the results of the user test findings.
IDEATE & EVALUATE
Solution
Increase browse-ability through streamlined navigation, brand establishment, product visibility.
Design Iterations
COLORS
Pulling from inspiration from our mood board and market research we came up with dozens of color combinations. Ultimately we were able to make a choice by A/B testing 5 participants who chose the final color scheme.
LOGOS
I wanted to modernize the original logo while keeping certain elements in order to stay recognizable by customers. My personal favorite on the very right, it is fun and modern but ultimately too different from the original logo. With the stakeholder we were able to narrow down a winner.
HOMEPAGE
The original template was a great guide for myself to get started on some homepage ideas. I wanted the products to be front and center so I focused on highlighting those through large hero images. Ultimately I opted for a smaller hero image as the text on the image was hard to read.
FINAL SCREENS
Desktop
Landing page focuses on delivering the important information to users.
Large hero images, clear copy, and featured items show users what items can be found and encourage them to click and browse the site. Navigation is front and center and clearly displays parent categories.
See flow below of how a user would navigate to find a product, place it in their cart, and proceed to checkout.
Mobile
I made sure to create a responsive website since 50% of our interviewees reported shopping on their phone.
Final Design Guide
Future Opportunities
SWEDISH COPY - I want to include Swedish translations underneath the English categories, I have it included on some pages but would like to include this for all page categories.
INFORMATION ABOUT THE DESIGNERS - I want to write more about the designers that are featured on their website to give users more context about who these designers are which creates an intimate shopping experience. I want the customers to feel that their purchase is special and connect with the designer's visions and stories.
PRODUCT REVIEWS - I want users to be able to leave reviews under products since it was a reoccurring need that came up during our initial user interviews.
For more work inquires do email me at jj.mhnilsson@gmail.com
Thank you for reading!
Email me at jj.mhnilsson@gmail.com