Flexn
Complete rebrand of e-commerce clothing website
Overview
Background
Flexn, clothing store established on 1994, has over 400 successful offline stores around the world.
Followed by customers’ requests for online e-commerce store, Flexn decided to launch an official website.
Project
Self-directed Project
Tools Used
Sketch, Adobe Illustrator, Adobe Photoshop, Maze
My Role
Lead Product Designer
Lenth of Project
4 Weeks
Challenges
Current website is very outdated.
Customers are requesting for online store.
Difficulty of transporting remainder inventories between stores.
Goals
Design a logo that is modern and neutral to improve versatility.
Design a responsive e-commerce site for Flexn that is easy to use, browse, and filter in shopping experience.
Empathize
Market Research
Since I am not a person who purchases clothing often, I needed to understand the psychology of customers. Interview is the best way to actually hear what they think but even before that, I needed figure out my research subjects.
Competitive Analysis
Looking at competitors, I evaluated what works and what doesn't work.
In this stage, I uncovered gaps in existing solutions to see what could be improved.
Interview
To further discover common behavior of consumers and current struggles while online shopping, I conducted user interview with people who have shopped online with in 6 month.
Research Assumptions:
Most shoppers prefer shopping at home rather than going out to store.
Shoppers find more information about product via customer reviews.
Most People shop on mobile phone.
Persona
Synthesizing data gathered from interviews, I created persona that represent majority of our prospect users.
Emily is 28 years old graduate student who loves shopping with good deals. All future design decisions were made through Emily's perspective.
Define
Project Goals
Once I decided the user’s profile, project goal diagram to visually organize business, user, and technical goals. As some of the goals simaltaneiously satisfy multiple steak holders, I discovered what project features need to be implemented first.
Information Architecture
Feature Roadmap
To organized my project into actionable items, I prioritized each site features in different levels. I freed my creativity while coming up with functioning features for the website.
Open Card Sort
With keywords from various types of clothes, I conducted open card sort to group them in categories that are familiar to users. The result of the test will allow easier navigation through out the website.
While total 7 participants tested, I could not draw clear conclusion. I managed to gather more information from competitor website.
Site Map
In order to structure, label, and organize the website, I put together a site map. The site map visually structures the website with simple diagrams based on finding of goals, feature roadmap, and card sorting.
Task & User Flow
I created task flow and user flow to visualize different steps and required pages to finish certain tasks.
All of the featured tasks are in Emily’s (persona) perspective.
Design
Wireframes
To solidify high requirements and features on each pages of the website, I put together UI requirement document.
I started wireframing process with low fidelity sketches to focus on usable layout that has all key features. Also referenced user flow created earlier to focus on how the users will interact with the website.
Once basic structure is settled, I produced mid fidelity wireframes for desktop version.
Since some of the users do use mobile version of site to browse for clothes, some of the pages were designed to fit different devices within appropriate grids. This insures that we have most necessary components that are adaptive to usage of each devices.
Brand Identity
Now that all elements are in place and look balanced, I focused on aesthetics.
Chosen brand attribute:
Trendy
Friendly
Accessible
Warm
Minimalistic
Based on these attributes, I gathered pinterest board to shape direction of the brand with references.
I wanted to have heavier weight font following urban logo trends, with curved edges which will soften brand image to complement friendliness. Influenced by the warm tone color, brow represents comfort and accessibility.
Finished logo is now then added to my style tile and ui kit which defines overal aesthetics of the website including colors scheme, font family, and elements.
High Fidelity Mock Up & Prototype
On the the layout that I have created with placeholders, I placed all visuals and corresponding detail informations to create high fidelity mock up.
I updated responsive mid fidelity wireframes with same visual styles.
I transformed all screens from high fidelity mock up to make a working prototype so that users can interact in usability test.
Test
Usability Test
As a creator of the website, I knew how to navigate through the site but I need to make sure someone with no information about this site could use it easily.
Maze was used for moderated usability test
Total 8 people participated testing
All tests were held with video calls
Overall they seem to navigate the site smoothly
Affinity Map
Everything that happened in usability tests are put into series of notes. Then I grouped similar notes together to analyze successes, observations, insights, and pains to conclude with actionable iteration on the prototype.
Priority Revisions
When synthesizing from affinity map, I have noticed that people were having hard time locating the "sales" while using filter in result page.
To resolve that, I have changed the color of the "sales" filter button to brand color and placed it on top of the filter category section.
Conclusion
Next Step
Overall I mostly had positive feedback from the usability test, however my prototype only has few features enabled.
Things to add/improve:
Add more pages to the prototype
Improve on sorting options
As I develope on this project I would run more usability tests and iterate to finalized design.
Once the design is completed, I will hand off using Zeplin to the dev teams.
Lessons
In the middle of the project, while finding common patterns through other competitors’ website I noticed that many did not have review section. While doing some research, while having reviews could help users understand the product in honest point of view, most of the clothing brand either buys fake reviews to promote their product. So I decided not to put the review feature even though my research finding showed that reviews affect customer's buying decision. As a problem solver, I should've looked into another feature that would serve honest feedback of product, but would not be exploited by clothing company. In result of this project I learned to embrace problems rather than avoiding them.
"If user is having problem, it's our problem."
— Steve Jobs