Joe Fresh
As the lead UX designer for the Joe Fresh e-commerce app, I played a pivotal role in crafting an intuitive and engaging user experience. Our goal was to seamlessly integrate a fashion-forward design with robust functionality, catering to the needs of modern shoppers. I worked with multiple cross-functional teams that included Product Managers, Engineers, and Product owners to deliver the first mobile application for Joe Fresh.
Role
UX Designer
UI Designer
Researcher
Usability Tester
Tools
Figma
Miro
Platforms
iOS
Android
Team
Product Designers
Developers
Project Managers
Product Owner
The Problem
Joe Fresh had identified a significant gap in their e-commerce strategy: while they had a functional website, their mobile experience lacked innovation and was primarily web-based.
Project Summary
The goal was to create the Joe Fresh e-commerce app aimed to streamline the shopping experience, offering features such as personalized recommendations, easy navigation, secure checkout, and seamless integration with loyalty programs. By focusing on user-centered design principles and continuous improvement, we aimed to create a platform that not only drives conversions but also delights users at every touchpoint.
Phase 1
Discovery - Understand and Immerse
In order to understand our users we decided to conduct workshops, this was a great way to understand how they use current tools and what pain points they encounter.
Phase 1
Key Features
-
User-friendly Interface: A clean and intuitive design that allows easy navigation and seamless browsing of products.
-
Robust search capabilities with autocomplete suggestions and filters to help users find products quickly.
-
Scanner feature for customers to scan an items barcode and find it online.
-
Personalization: Customized product recommendations based on user preferences, purchase history, and behavior.
-
Order Tracking: Real-time order status updates and shipment tracking to keep users informed about their purchases.
-
Push Notifications: Alerts for order updates, personalized promotions, and reminders for abandoned carts to re-engage users.
-
Accessibility: Design considerations for accessibility features, ensuring the app is usable by all users, including those with disabilities.
Phase 2
Design - Create and Iterate
After gathering all the data and insights from our users we moved on to creating the first concepts. Underneath you can see the design process and journey we went through.
In transitioning Joe Fresh's web shop to a mobile app, our design explorations focused on optimizing the user experience for smaller screens while maintaining brand consistency and functionality. We began by analyzing user behavior and preferences through extensive research, identifying key pain points and opportunities for improvement.
Phase 3
Low-fi Concepts - Testing
Our goal was to check and test functionality of our early concepts with low-fi prototypes rather than the visual appearance of the product. Throughout the process, collaboration with stakeholders and continuous user testing ensured that our designs effectively translated the web shop's features into a cohesive and engaging mobile app experience, aimed at driving customer satisfaction and conversion rates.
Final Design touches
After conducting usability testing sessions to gather qualitative feedback and quantitative data on how users interacted with the app. We used this insights from testing to iterate and improve the user experience continuously and complete the app's design work.
Let's dive in!
Discover Tab
The first one in the Discovery tab is where we have the opportunity to discover, get inspired and just see what's new and what's coming within the Joe Fresh assortment.
Shop Tab
The "Shop" tab serves as a central hub for browsing and exploring products based on categories, departments and more.
Sale Tab
This Sales tab serves as a dedicated section where users can easily discover and explore discounted or promotional items.
Showcasing ongoing sales, discounts, clearance events, or special offers prominently to attract users looking for deals and savings.
Highlighting specific categories or products that are currently on sale or promotion, often with eye-catching banners or badges indicating price reductions.
Account Tap
The Account tab enhances user engagement and satisfaction by providing a centralized hub for managing personal information, orders, preferences, and interactions with the e-commerce platform, ensuring a seamless and personalized shopping experience.
My Learnings!
This role provided me with the opportunity to tackle a wide array of challenges, significantly advancing my skills across various domains crucial for UX design:
-
Working on the design development of a new e-commerce application honed my ability to craft engaging user experiences that foster customer loyalty and retention.
-
Recognizing the significance of intuitive design, I gained expertise in leveraging existing patterns and creating new ones that resonate naturally with our customers.
-
Embracing design systems such as tokens, provided efficient methods for managing design properties and values across our system, ensuring consistency and scalability.
-
Collaborating closely with cross-functional teams, I strengthened my skills in user research, prototyping, and iterative design, which were essential in delivering a seamless and user-centric e-commerce platform.
These experiences not only expanded my technical proficiency but also equipped me with a comprehensive understanding of the intricate relationship between UX design and e-commerce, empowering me to contribute effectively to the strategic growth and user-centric evolution of digital retail experiences.