Role
UI/UX Designer
Timeline
3 months
Project Type
Ecommerce Application, Website UI/UX
Klinq
As the lead UI/UX designer, I led the project from research and wireframes to interactive prototypes and final design. I worked alongside my team to redesign our clients existing e-commerce website using best practices.
360%
increase in
orders
3%
increase in average order value
140%
increase in
conversion rate
19%
increase in users
reaching checkout
Results
Shopping Cart Flow
SEO Combination Key Words
Research + Design Process
We gathered our research insights by communicating with the stakeholders and examining their industry's most significant pain points and their customers by reviewing comments and reviews. Our team also conducted an in-depth study of their current customer's experiences using HotJar to record their present movements, existing site analytics, and an audit of their main competitors.
The audit helped us determine what features needed to be added or replaced to be at parity with their competitors and capture market space.
Hueristic Evaluation
Analysing Research
Analyzing the research from our discovery phase, we realized that there was a huge opportunity to streamline multiple aspects of the website - including the home page, primary navigation, category pages, product pages and checkout.
Old Information Architecture
vs
New Information Architecture
mega menu before vs after
Primary Navigation
By streamlining the main navigation - we were able to have our client's customers reach their desired page in two clicks instead of five.
category page with filtering options
before vs after
Category Page
On the category page, we added features such as product filtering to help users find their favorite product while also being introduced to new ones.
The user could now search by product type, size, and scent, with scent being one of the white space categories that could help separate clients from their competitors.
Wreframe
English vs Arabic Screens
Enable RTL Layout
-
Choosing Arabic-optimized fonts
-
Flip icons like arrows, carousels, breadcrumb chevrons to follow RTL flow
-
Form Labels and CTAs
-
Ensure layout still feels balanced even when mirrored (test image + text alignment)
UI Design Elements
We also designed for a mobile-first approach, making sure to also address pain-points users had on the desktop version.
Click heat mapping also showed that users could not only understand the new product selection modules flow but also explore more categories
This before and after heat mapping image shows that users were now scrolling a lot more with the new re-design than before. Users were now able to explore the content much faster - which correlates to how much quicker they could reach check-out.
Results
We reached our client's end overall goals within two months of launching.
-
Integrating established design elements from packaging and marketing onto the website to solidify the brand's presence.
-
Creating a new flow for users to search for educational content + products helped increase checkout reach
Key Skills + Deliverables
Competitive Analysis, Lo + Hi- Def Wireframes, Interactive Prototypes, Design Research, Visual Design, Content Strategy, Prototyping
Tools
Hotjar
Figma
Adobe Creative Suite
Team
Project Manager
UX/UI Designer
Visual Designer
Developer x2
© 2022 by Fatema Nadeem