n11.com Homepage Revamp Design
Redesigning the third biggest Turkish e-commerce company's homepage which hasn't changed since 2014.
The Challenge
We worked with a large team to understand the data of our users, the needs and constraints of users, business, development team and stakeholders. At first, we had to get approval from C-level by creating priority wireframes according to our analysis and we had to explain why we should do “revamp”. The whole team worked fast and hard to get approval from the C-level for the designs. After we got it, we created a Gantt chart that we could complete all flows of the n11.com in about 3 months. While renewing the entire flow, we started from “the homepage” design due to the request of the C- level and project restrictions.
My Role
As a Senior UX Designer of the n11.com service design team, I worked with 5 UX designers, 4 user researchers, 2 UX optimization specialists, 2 UX writers and 5 UI designers to renew the entire site of n11.com.
The Goal
WHY we’ve needed to revamp;
​
"While n11.com has not changed in 8 years, our competitors have renewed their designs and usability 4 times since 2014."
​
• We’ve needed to catch the trends.
• Our design system and technology should have been omnichannel.
• We don’t have enough touchpoints to communicate with our users.
• We should have prioritized projects to increase organic traffic instead of paid traffic.
• We should be been discoverable. We obtain many features but our users are not aware of them (i.e: garaj11,pet11)
• Human touch interaction should have been our priority, not the human system.
“In this study, although we completed all the flows before development, I will share the process of designing “the homepage”, as it is the first revamp of the website.”
UX Design Process
As the service design team, we could not run design sprints together with other departments due to the organizational structure of the company. For this project, we decided to create a new structure where we can run our design sprints.
​
-
Planning design sprint in every week and running it two weeks
-
With the help of Jira, dividing the work into sprints and observing the effort
-
Planing refinement meetings
-
Receiving status updates every day from the team in daily meetings
-
Creating UX/PO alignment meetings
-
Creating MVP and detailed design to reduce effort of the development team
-
Prioritizing the suggested functions and flows
-
Validating the prototype with real users
-
Executing UXAT processes in development testing processes and after the release
The Discovery Activities
Understanding User Needs
• 1-to-1 User Interviews
• Usability Tests
• Online Surveys
Understanding Business Needs
• Stakeholder Interviews
• Online Surveys
• ”How Might We” Workshops
Data Analysis
• Google Analytics
• Hotjar Heat Maps
• Hotjar Video Records
• Benchmark Studies
• Baymard Reports
The Discovery: Understanding Users
Users
n11.com users 70% male users aged 25-44. 35-44 ages are more dominant than 25-34. 50% of the users are new users. One of our goals in the new design is to attract more female users.
​
Strategy
In our analysis, we found 120 improvement areas for the homepage.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
According to research findings, business needs and data analysis, we align with these strategic goals for the new homepage design:
​
1. Simple & Trendy Design
2. Personalization & Recommendation
3. Displaying Campaign & Promotion Effectively
4. Enhancing Visibility & Understandability of Our User Benefits
5. Enhancing Discoverability of Famous Brands and Sellers
6. Increasing Findability & Discoverability of Our Values and Functions
7. New User Acquisition
8. Improving Omnichannel Experience
​
General Problems
Also, we summarized all findings under five main problems:
​
1. Limited use of personalization
2. Irrelevant recommendations
3. Inconsistent omnichannel experience
4. Not showing any advantages of sign up or log in
5. Old fashioned design (User Interface and Design)
Problem Definition
User Survey Results
Top 5 Category Preferences
​
User Experience Problem Definition & Solutions
​
Ideation
Design Phase
Prototype & 5-Second Testing
After finishing our wireframes, we collaborated with the UI team. Then I created clickable prototypes using InVision and tested them with users.
While the tests mostly went smoothly, there were a couple of rough areas that required rethinking. Most notably, our client’s brand focus on discounts that a product might have any number of applicable sales offers and up to three different prices at any given time. Trying to display all of these at once on the product detail page presented a unique challenge.
We mocked up around 30 different versions of the product detail page and conducted countless 5-second tests before finally arriving at a version that users could understand at a glance.
The Results
Current and Revamp Design Comparison
Competitors vs. Old & New Design​
