Complete rebrand of
e-commerce clothing website
FLEXN
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 has finally launching their responsive clothing website.
Project
Self-directed Project
My Role
Product Design
Tools Used
Sketch
Adobe Illustrator
Adobe Photoshop
Maze
Time
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 through out shopping experience.
Process
-
Empathize
-
Define
-
Ideate
-
Prototype
-
Test
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.
Surprisingly, Millenials, Gen X, and Boomers shared similar ration in terms of online shoppers.
Majority of shoppers agree that customer reviews of the product affects customers's buying decisions.
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
I conducted user interview with participants by asking series of questions to learn more about their user experiences.
Not being able to meet in person due to COVID 19 definitely didn't help for having rapport with participants but I still managed to gather good number of responses.
Empathy Map
To synthesize all the findings after the interviews, I chose to make empath map since it makes whole process feel like a card matching game.
When matching cards are put into small groups, I observed user's common need:
-
Need detailed product information
-
Need to find sales items
-
Need to save time while shopping
From those needs, I was able to make some insights:
-
Shoppers need to be sure of what they are buying.
-
Shoppers would like to save money.
-
It is important to use time efficiently while shopping.
Persona
Gathering all the synthesized information from interviews, I created persona that represent majority of our prospect users. All future design decisions were made through Emily's perspective
Define
Project Goals
I created diagram to illustrate business, user, and technical side of goals to implement features that satisfies multiple goals.
The most overlapping goals that satisfied all was to have a straight forward navigation and faster process in online shopping.
Feature Roadmap
Here, I was able to expand my creativity with new features for the website. Carefully evaluating priority levels for each features I was able to first focus with Must-Have features.
Card Sorting
With keywords from various types of clothes, I conducted card sorting to group them in familiar categories. This way users will be able to navigate website with ease.
I was only able to conduct card sorting with 7 participants so I could not draw clear conclusion. However, I managed to gather more information from competitor website.
Site Map
After successfuly gathering high requirements for the website, I put together a site map. The site map visually structured the website with simple diagrams based on goals, feature roadmap, and card sorting.
User Flow
Creating user flow for customers' full experience helped me to make sure I design all the necessary functions and pages to provide smooth experience.
Wireframes
To solidify solidify high requirements and features on each pages for user's tasks, I put together UI requirement document to guideline before moving on to sketching layout.
I proceeded on making rough sketches of homepage to focus on overall layout.
Once I made up my mind on how basic layout should look like, I quickly produced wireframes using appropriate grids for each screen sizes.
Style Tile
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 designed brand style tile.
Logo has lots over round edges and curves to convey friendliness.
Chose modern brown for brand color to represent trendiness.
Model shots with white background is chosen to tie with minimalistic look.
Test
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. Extra screens were created, also in high fidelity and I transformed them to make a working prototype so that I can test the design with users.
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.
I used a tool called Maze, which is usually used for unmoderated usability test. Maze actually flattens all my pages in web format so each page loads really quickly. I didn't want the participants to deal with slow loading sites.
Moderated usability test were held with 8 people. They were given total 4 simple tasks. Since the 4 tasks were in same scenario each test began where the last task ended.
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.
Hero image's headline is located in center of the image to be consistent even when images are replaced.
The location of bread crumb has been changed to have static location even on search result page.
'Sales' filter button is much easier to see with brand color and its placement within categories.
Reflection
Take Away
When conducting usability test, I noticed that I did not have enough pain point from the participants. First, I thought my design was perfect thus it doesn't need many improvements. However, looking back I should have made participants start from the homepage as they are completing each tasks I gave them to see full flow. It think that might have widen my observations on user behaviors.
In the middle of the project, while finding common patterns through other competitors's 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
Ideate
Task Flow
I created several tasks to layout necessary pages that needs to be designed.
All of the featured tasks are in Emily’s(persona) perspective.