Okala’s platform redesign, modernizing the user experience, aligning with the brand identity, and building a scalable design system for future growth.
What is Okala?
Okala is one of Iran’s leading e-commerce platforms, offering a wide range of products from groceries to electronics. With over 3 millions of users, Okala aimed to modernize its mobile app to improve user experience, align with its new brand identity, and stay competitive in the rapidly evolving e-commerce market.
Understanding the Problem
Outdated Design: The interface lacked visual appeal and modern design standards.
Poor Usability: Users struggled with navigation, leading to low engagement and high drop-off rates.
Rebranding Needs: The app needed to reflect Okala’s new brand identity and values.
Scalability and Design Sustainability: The design had to be adaptable for future updates, requiring a scalable system architecture within tight time constraints.
Attracting New Users and Increasing Retention: We needed to balance features that appealed to new users while retaining existing ones.
A meetings with all teams to present our findings and new ideas
Creating Our “How Might We” Statements
To frame the problem and guide our design process, we developed a series of “How Might We” questions:
How might we simplify the user journey to improve engagement?
How might we modernize the app’s design to reflect Okala’s new branding?
How might we create a scalable design system for future updates?
How might we balance the needs of new and existing users to drive growth and retention?
Defining the Project
The project involved a user-centric redesign of Okala’s mobile app, focusing on usability, visual consistency, and scalability. As the Product Design Lead, I led the research, strategy, and execution of the redesign, ensuring that every decision was rooted in user needs and feedback. The goal was to create an intuitive, modern, and scalable app that not only addressed current pain points but also anticipated future user and business needs.
Research and Design Process
Due to the importance of improving user experience and designing a process suitable for the team’s and project’s needs, we conducted a thorough study on various user-centered strategies. We aimed to achieve a coordinated approach by considering parallel design, using different techniques, and incorporating team members’ feedback. This collaboration resulted in a final, executable process that met the project’s and stakeholders’ requirements effectively.
This process not only increased the product’s development speed but also significantly improved its final quality. Close and coordinated teamwork and the use of user-centered methods enabled us to create a product that fully met users’ needs and desires, providing them with an enjoyable experience.
A card sorting session about home page sections with 25 people
Parallel Design Phase:
Based on the collected data, we decided to create a main flow that included key elements in four different design prototypes. We tested these prototypes to identify the most cohesive option. Our goal was to incorporate and implement elements such as accessibility, navigation, layout, and simplification in the designs.
Where Did We Focus?
Our Primary Goals
Improving the Homepage Experience:
- Redesigned the homepage to reduce confusion and guide users effectively.
- Removed dead-end scenarios and unnecessary steps to create a smoother journey.
- Enhanced visual cues to minimize reliance on the back button.
Improve Usability: Simplify navigation and reduce friction in the user journey to create a seamless experience.
Modernize the Design: Refresh the app’s visual identity to align with Okala’s new branding and appeal to modern design standards.
Enhance Scalability: Develop a robust design system that could support future updates and expansions efficiently.
Drive Growth and Retention: Design features and content that attract new users while retaining existing ones, ensuring long-term success.
Enhancing the Product Card:
- Improved visibility of the Add-to-Cart button and refined the hierarchy of elements for better usability.
- Introduced a quick-view feature to allow users to access product details without leaving the browsing context.
- Added minimal animations to make interactions more engaging and visually appealing.
Improving the User Experience on the Homepage
Users often felt lost in the app due to unclear navigation and progress indicators, while frequent dead ends forced reliance on the back button, causing frustration. To address this, we redesigned the checkout journey and improved interaction patterns to streamline navigation, enhance UI, and align with project goals. Key actions included:
Removing Unnecessary Steps and Dead-End Scenarios: This ensured that users could progress smoothly through their purchase journey without encountering roadblocks.
Improving Visual Cues: We redefined functional elements to reduce reliance on the back button, making navigation more intuitive.
Focusing on Metrics: We prioritized measurable goals such as increasing conversion rates and “Add to Cart” rates to track the impact of these changes.
The results were significant:
Higher Conversion Rates: A noticeable improvement in the percentage of users completing purchases.
Enhanced User Satisfaction: The seamless journey from browsing to checkout led to positive feedback.
Increased Engagement: A better flow encouraged users to spend more time exploring the app and making purchases.
The new journey was designed to guide users effortlessly from search to purchase, improving their shopping experience while increasing overall engagement and driving business goals.
Enhancing the Product Card
The product card was another crucial element we focused on improving during the redesign process. Several pain points were identified that required attention:
Visibility of the Add-to-Cart Button: Ensuring users could easily spot and engage with this critical action.
Hierarchy of Elements: Organizing card elements based on user and project priorities.
Seamless Access to Product Details: Replacing the traditional method of opening a new page with a quick-view option that keeps users in the same browsing context.
To address these issues, we revisited various design elements and conducted usability tests with users. Key improvements included:
Improved Button Visibility: The Add-to-Cart button was redesigned to stand out and capture users’ attention effectively.
Refined Element Hierarchy: Product card components were reorganized to ensure that users could quickly identify essential information such as price, discounts, and product availability.
Quick-View Feature: By introducing a quick-view capability, users can now see a summary of product details without leaving their current page. This eliminates the need to navigate back and forth, reducing interruptions in the shopping journey.
Results and Achievements
Through this redesign project, we achieved significant outcomes, driven by careful monitoring of user behavior, usability testing, interviews, and leveraging product data. The most notable achievement was attaining nearly 100% user satisfaction. Additionally, we resolved the long-standing issue with the overuse of the back button in the previous version, which resulted in a decrease in dead-end rates and a marked improvement in user engagement.
Key improvements:
Increased Engagement: User engagement improved by 30% within the first month of launch.
Overall Conversion Rates: Overall conversion rates from Login (Session) to sucessfull order improved by 2.1% and increased order per customer by 1.6%.
Higher Conversion Rates: Streamlined navigation and checkout led to a noticeable increase in completed purchases.
Positive Feedback: Users praised the app’s intuitive design and ease of use.
Scalable Design System: Established a design system that ensured consistency and efficiency for future updates.
Business Impact: The redesign contributed to higher user retention and strengthened Okala’s position as a market leader.