Design portfolio / User research and mobile app UI UX design / FimiMALL Mobile app UI UX Design

FimiMALL Mobile app UI UX Design

2023 B2C industry project sample. Fashion shopping search platform mobile app design response.
Special thanks to Diego Salvatierra, Jasmine Yuan.

About This Project

FimiMall is a fashion shopping search platform that allows users to shop multiple local stores in one cart within delivery time of 5 to 72 hours. The mission is to make fashion shopping easier and more accessible.I redesigned the search and filtering user experience for the FimiMALL mobile app.

Timeline

2023, 7 weeks

Team

Research analysis and design response were created individually. User interviews were conducted together with Harness Project design team of 8 designers.

Role & Discipline

User research, UX design, UI design

Project Framework

1

Research

  • Stakeholder Interview Key Insight
  • Heuristic Analysis

2

Ideate

  • Problem Statement
  • Goal

3

Prototype

  • Initial Design Solution & Wireframe
  • Usability Testing
  • Iterated Design Solution & Wireframe
  • Prototype
  • Style Guide
  • Feedback From Stakeholder

Stakeholder Interview Key Insight

We began with stakeholder interview through video conference and it gave us a better understanding of FimiMALL's current state.  

“To become something that people love, to be the first place people think of when trying to find clothing, specifically my audience.”
-- Michela | CEO, Co-founder of FimiMALL

What's going well:

  • One of the strongest competitive advantages is the idea of making fashion shopping easier by simplifying searching process and providing guarantee fast delivery.
  • FimiMALL elevates local fashion business.

Here's some pain points:

  • FimiMALL app does not have categories and filters to assist users to find clothes.
  • FimiMALL app needs to do better on the search function.
  • As a marketplace, FimiMALL needs to get more products or more retail stores to join the platform.

Heuristic Analysis

After the stakeholder interview, I conducted heuristic analysis to identify current user experience issues in FimiMALL app. Those images on the left side are current FimiMALL app screenshots.

Problem Statement

How might we help FimiMALL design a search and filter experience that their target audience feel convenient and intuitive to use?

Goal

Current FimiMALL mobile app is well functioning, my goal is to improve it to a more industry-standard fashion search experience and bring more clarity in users' navigation to help build better utility.

Initial Design Solution & Wireframe

Based on the user research, I came up with several design response ideas.

  • To design a search user flow
  • To design a view product category experience
  • To design a filter product user flow

Search user flow

  • After clicking the search bar on the top, users will be directed to a careful guided search page, including search by text, visual, location and brand;
  • When searching by text, users are allowed to error spell, to remember or to delete previous searching and to auto provide search suggestions;

Product category

  • Users are allowed to quickly access to industry level fashion product categories to gain better search experience；

Sort & filter

  • Users are allowed to filter and sort fashion products with popular options;
Initial wireframe

Usability Testing

The users are assumed to have logged in and have set their current delivering addresses in the FimiMall app. The starter screen is the Woman clothing landing page. The users' goal is to navigate through the clickable wireframe prototype, including the top search bar, bottom menu bar and all the interaction elements on the screen to find their desired dresses.

Test Objective

  • Does the content on landing page attract you to click on it? What content are you expecting to see?
  • Does the search bar help you find your desired product?
  • Does the product category bar intuitive to use?

Response

During the user testing process, I conducted two user interviews targeting test objectives and took notes along with users’ navigation through the clickable prototype. I did card sorting categorized by different functional pages and designed iterations after each round of user testing.

Key Insight

Landing page

  • Both user testers commented that it is necessary to prioritize discount information on the landing page.
  • Better to high light sections with attractive visuals, such as trending, seasonal features, personalized items based on their previous search habits and results.

Search page

  • One user mentioned that it’s nice to provide several guidance when users start to search. And she expected to see “search by occasions” and “visualize brand locations on the map” on this page as well.  
  • Another user expects tags under each category can be demonstrated interactively in the prototype. She also recommended me to research successful searching platforms such as yelp, amazon and airbnb to modify the search guide sections.

Product feed page

  • Both users like the filter button interactions design. As for the product card, one user suggested adding color options. Another user felt confused about the “hover on” interaction to show “Quick add to cart” button. She felt that the “hover on” interaction is not intuitive to use on mobile app.
  • One user mentioned that the back buttons to the previous page should be more consistent among all the screens.

Iterated Design Solution & Wireframe

Based on the responses and key insights from usability testing, I designed a second version wireframe with more specific design solutions.

Landing page

  • Prioritize search bar and editable deliver address on the landing page;
  • Simplify general menu into 5 categories;
  • Highlight discount information;
  • Add CTA buttons to product feed page;
  • Popular sections including seasonal collections, trending, featured, etc;
  • Create direct links according to search guide.

Search page

  • Provide customized search guide when users just start to search for items, including search discovery, search brand, view brands by locations on map, search occasion, search history and search previous viewed items;
  • Prioritize search by text;
    Search by visual could be considered in the future;
  • Clickable tag buttons direct to popular categories;
  • Easy back button to previous search step;
  • On each brand card, show estimated deliver time and  distance to users’ current locations;
  • Allow users to filter brands by distance, rating and estimated deliver time.

Product feed page

  • Allow users to browse and locate products through category, occasion, sort and filter;
  • Allow users to quickly absorb enough product information without clicking into the product page.
Iterated wireframes after user testing

Prototype

01

Landing page

If the video is not autoplay, press the "pause" button on the right below corner:)

02

Search page

03

Product feed page

Style Guide

Feedback From Stakeholder

I received positive feedbacks after presenting my UI UX design response to FimiMALL's stakeholder Michela. She really likes the detailed features in the search page instead of just "search bar" alone. She thinks it is a different approach from everybody else.
She also loves the "estimated delivery time by brand" on the "search nearby brand page" a lot. She thinks it creates more transparency in customer delivery experience, and it is something she definitely would consider, since users would like to have this feature in the app. She told me it is very informative and it is something she never thought of before.

View other UI UX design projects:

Enterprise Work Sample

Learn more

XR - UX Design & Prototype

Learn more

Mobile UI UX Design

Learn more

View 3D/XR Design Projects

Learn more