Case Study:
Redesigning the Mobile App for

Project Overview

The goal of this project was to redesign a mobile app for a leading e-commerce brand to streamline the user flow and improve accessibility. The app had several user-experience issues that made navigation difficult, and many users abandoned the app due to poor flow and usability issues.

 

My Role

As the Senior UX/UI Designer, I led the design process from research to prototyping. I worked closely with developers, product managers, and stakeholders to ensure that the solution aligned with the client’s vision while focusing on user needs.

 

Tools:

  • Figma for UI/UX design and prototyping
  • Miro for brainstorming and creating user flow diagrams
  • Google Analytics to track user behavior and identify pain points

Timeline

The project lasted 12 weeks, with key milestones such as initial user research (week 2), wireframing (week 4), prototyping (week 8), and usability testing (week 10).

 

Problem Definition

Target Audience

01

Fashion Enthusiasts:
Users who enjoy organizing and exploring new styles.

02

Busy Professionals:
People looking to save time by planning their outfits efficiently.

03

Sustainability Advocates:
Users who want to maximize their existing wardrobe.

Problem Definition

Challenges

The app had a complex navigation system, and users were often frustrated by the long checkout process, resulting in a 30% cart abandonment rate.

Business Objectives:

  • Increase conversions by simplifying the checkout process.
  • Improve accessibility to cater to a broader range of users.

Target Users:

  • E-commerce shoppers aged 18-40
  • Mobile-first users who prioritize speed and simplicity

Research

User Research:
I conducted 10 user interviews to understand user frustrations and completed an online survey with 300 respondents. Key insights showed that users struggled with finding the checkout button and were often confused by the multi-step process.

Competitor Analysis:
I reviewed three competitors in the same space, focusing on their mobile app experience. I discovered that offering a streamlined, one-page checkout was common and highly effective.

User Personas:
Created personas based on the research, such as “Busy Shopper” who values speed and convenience and “Careful Shopper” who wants to compare multiple items before buying.

Ideation & Design Process

01

Create a modern, user-friendly app design.

02

Build a seamless user flow for wardrobe management and outfit planning.

03

Use AI-driven recommendations to enhance personalization.

Process

Step 1

Discovery & Research

  • Conducted surveys to understand user pain points:
    • Users struggled with visualizing their wardrobes.
    • Lack of outfit planning tools led to frustration.
  • Competitor analysis of existing fashion apps (e.g., Cladwell, SmartCloset) to identify gaps.
Step 1

Step 2

Ideation & Wireframing

  • Mapped user flows for key features:
    • Uploading and categorizing clothes.
    • Planning outfits via an interactive calendar.
    • Browsing AI-powered recommendations.
  • Created wireframes to define the app’s structure and interactions.
Step 2

Step 3

Design & Prototyping

  • Developed high-fidelity mockups focusing on:
    • Pastel and vibrant colors for a playful yet clean look.
    • DM Display typeface for bold, modern headings.
    • Responsive design principles for seamless use across devices.
  • Built an interactive prototype to simulate user flows.
Step 3

Step 4

Testing & Feedback

Conducted usability testing with a sample of users:

    • Users appreciated the clean interface and intuitive navigation.
    • Iterated on the design to improve feature discoverability and clarity.
Step 4

Virtual Wardrobe:

Users can upload photos of their clothes, categorize them, and create a digital wardrobe.

AI Recommendations:

Personalized outfit suggestions based on user preferences, weather, and occasions.

Outfit Planner:

An interactive calendar for scheduling outfits.

In-App Shopping:

0Integrated links to shop for missing pieces or complete outfits.

Key Features

  • Streamlined Navigation: Improved accessibility to key information, reducing the number of clicks needed to find content by 40%.
  • Interactive Design: Included multimedia elements, such as videos, carousels, and hover effects, to engage users.
  • Responsive Layout: Fully optimized for mobile, tablet, and desktop use, ensuring a consistent experience across devices.
  • Creative Storytelling: Presented the organization’s initiatives through compelling visuals and narratives.

Visual Design Highlights

  • Color Palette: Pastel gradients combined with vibrant accents to create an engaging and friendly atmosphere.
  • Typography: DM Display for headers and Open Sans for body text to balance creativity and readability.
  • Icons & Imagery: Playful, custom-designed icons to enhance usability and visual appeal.

01

02

03

The client selected Option 2, which incorporated vibrant orange accents alongside modern typography. This option stood out for its ability to blend trustworthiness with creativity, perfectly capturing the organization’s innovative and forward-thinking approach.

Results

  • Created an intuitive app prototype that addressed key user pain points.
  • Enhanced usability by simplifying navigation and feature accessibility.
  • Received positive feedback for the design’s visual appeal and functional depth.

Final Deliverables

  • Created an intuitive app prototype that addressed key user pain points.
  • Enhanced usability by simplifying navigation and feature accessibility.
  • Received positive feedback for the design’s visual appeal and functional depth.
Session Increase
0 %
Session Increase
0 %

Conclusion

The redesign of the Israeli National Center of Blue Economy’s website successfully transformed their online presence, aligning with their mission and engaging their audience. The modern, creative design combined with an intuitive user experience has significantly boosted the site’s usability and stakeholder satisfaction.

Final Outcome

Results

  • Reduced cart abandonment rate by 15%.
  • Improved user satisfaction scores by 20%, as measured by post-interaction surveys.

Screenshots of Final Design:
[Include high-quality images or an interactive prototype link here.]

Reflection:
This project reinforced the importance of user testing and iteration. In the future, I would focus more on refining the microinteractions to further enhance user satisfaction.

Years Experience
0
Area Coverage
0
Recent Projects
140
Succeeded Projects
0 K