Mobile app design case study

The smartest way to shop for menswear.

Many men dislike shopping. It’s time-consuming, stressful, confusing, and frustrating.

Can we reinvent the experience or offer tools to make shopping better and even fun?

iOS, Android
Designed and built with

Part 1

User Experience Design

The first step in designing a mobile app is to understand the problem space.

Conducting research and user interviews is critical to being able to empathize with the people who face the challenges the app seeks to solve.

The Problem

Research uncovered the following eight challenges to be overcome in order to improve men’s shopping:

Double Diamond: Research & Discovery

The Double Diamond is a framework that guides teams to work as a cohesive unit both individually and as a collective.

As can be seen in the diagram, it's organized into two parts, roughly described as research and design. During the 'diverge' component, information and ideas are collected, which are then analyzed and discussed by various stakeholders and decision makers during the 'converge' portion.

For the research and discovery segment of this project, direct user interviews was the method chosen to learn about the user's:

  • Current habits, behaviours, and motivations
  • What they like and dislike about their current process
  • Where and how they currently complete their task
  • When they might use the app
  • What sort of devices they possess

Hypothesis

The assumptions the research revelaed must now be tested. A hypothesis statement allows this to happen.

User Interviews

In-person and telephone interviews were conducted with men aged between 25 - 49 in order to learn about their motivations and empathize with their pain points.

Research Insights

Much was learned from the research and interviews with potential users. In particular, this insight was identified as key to the next phase of the design.

How might we...

Based on the research, this question can be posed:

User Persona

The persona is a synthesis of the data collected during the user interviews and research conducted.

“I hate shopping. It’s my least favourite activity.”
Mike  Brown
Developer at a tech startup, age 31
Goals
  • Update his old and worn out clothing
  • Refresh his style and increase variety
  • Find items to wear and look good in
  • Be able to select clothes that fit him well
Frustrations
  • Dislikes spending money on clothes
  • No time to waste on frivilous shopping trips
  • Overwhelmed with selection
  • Intimidated with exploring unfamilair stores

Part 2

Mobile App User Interface

When a good understanding of the problem space has been achieved, it's time to begin the design process.

This is when we as designers can start to get our hands dirty with creating mountains of sketches, dozens of mockups, and digital prototypes. It's highly satisfying witness the transition from the abstract work of generating low fidelity wireframes to the more refined high fidelity user interface components.

Double Diamond: UI Design Ideation

The Double Diamond framework is revisited at this point of the process to guide us through the user interface design phase.

Here, we employ a number or techniques in order reduce the risk of making a mistake that's expensive to fix later on in the process and to maximize usability by experimenting with low fidelity mockups and prototypes.

Design Intervention

To approach the problem of men who dislike shopping, the decision was made to focus the intervention on a mobile app. This would allow the user to browse products at their leisure and provide maximum convenience.

Paper Sketching

During the design ideation phase of this project, rough paper sketches are generated for various screens and interactions. Paper sketches are worth their weight in gold. They allow us to work through ideas quickly. Good ideas can be explored further, bad ones are eliminated.

Below, see the first attempt to sketch the loading screens. This was later simplified to reduce user confusion and expedite the process.
The initial home page sketch shows ideation for including a number of components together in this central screen.
Early on in the process, I had imagine a more complex onboarding process that included six steps of data collection. This was later simplified to include just two quick steps.
The sketches below show the process for the user to have his body measurements scanned by the phone's camera using the SmartTape concept.

Low Fidelity Mockups

These were then translated into low fidelity digital mockups.

These digital prototypes—brought to life in Figma—were thoroughly tested by users to determine their strengths and weaknesses. Refinements were then made for subsequent rounds of user testing to analyze.

Below, the initial concept for the bottom navigation bar.
Here, see the early protype for the measurements collection tool.

Here's how the initial Home Screen sketch was realized as a working prototype.

User Testing

Once a working prototype had been created, prospective users were engaged to evaluate usability of the initial flows.

Testing participants were given the following task to perform:

Browse your personalized clothes feed on the home screen

During the task, users performed some or all of these actions:

  • Create an account
  • Set up a profile
  • Enter measurements
  • Select favourite brands
  • Select favourite retail stores
  • Choose personal style

User Testing: Round 1

During testing, users provided invaluable feedback. Read some key takeaways below.

Intro Screen
  • Improve clarity with regards to what user can expect.
  • Give users more control over the experience.
  • Users prefer to enter as a guest before creating an account.
  • Users are wary about giving over email and personal information before trust is established.
Onboarding: Profile
  • Second paragraph of text at the bottom feels redundant, maybe best to just have a ‘Skip’ button.
  • Introduce more space around the image itself.
  • Account setup screen was a surprise. Expected this to occur at signup or during checkout. 
Create an Account
  • Spacing is a little off, something not quite right. The terms of use text isn’t quite centred.
  • Set a password: users like to be able to confirm their password with a ‘peek’ button.
  • Users feel like I they have more control by choosing email over Google or Apple, or social media.
Onboarding: Measurements
  • Provide an option to change imperial to metric 
  • Set a password: users like to be able to confirm their password with a ‘peek’ button.
  • Users feel like I they have more control by choosing email over Google or Apple, or social media.
Onboarding: General
  • Users want the option to go back at any time.
  • Move the Next button to the bottom, Skip buttons can be more consistent. 
  • Remove Stores from onboarding. The system should know what stores carry which brands.
  • Start with the process with the brands category. Users are familiar with those.
  • Onboarding would be improved by collecting a more general clothing size.
Onboarding: Brands
  • Users would prefer to see logos in instead of / in addition to text.
  • There are too many brands. Simplify to smaller list of more common brands.
  • Consider putting the most popular brands at the very top.
  • Consider organizing by category.
  • Consider suggesting related brands.
  • Consider moving the sidebar navigation to a horizontal block for larger buttons. 
  • Would there be a way to pinch and zoom with the logos?
Home Screen
  • Remove Learn section from bottom navigation and merge that intended content into Articles. 
  • The Log in / Sign up prompt is confusing. 
  • The Sign Up button isn’t intuitive.
  • It’s not clear that users can scroll down the page.
  • Users expected to be able to swipe on the banners at the top.
  • The top banner navigation dots don’t look like buttons.
  • Consider introducing a welcome introduction experience, some sort of fanfare, confetti; a message to say ‘Hey, well done. Nice job. here’s what you can do next’, ‘Based on your choices...’, ‘Here’s what’s new’, ‘Here’s what’s trending right now’,  ‘Here are some bestsellers’.
  • The Shop by Style horizontal scroll is not intuitive.
  • The Categories area is too big. Reformat this.
  • When a user taps on search, show recent searches / search history, trending searches.
Design Revisions Matrix

User Testing: Round 2

After the first round of testing, adjustments were made to improve the app's usability. A second round of testing was then conducted.

Create an Account
  • I don’t read field labels. I would enter my full name here.
  • Feels like I’m signing up for a newsletter.
  • Fix Date format for DOB.
General
  • Home Screen icon: t-shirt is more natural. Fits the theme better
Onboardng: Brands
  • A slow animation of the logos would be cool.
  • These are brands I can’t afford or don’t recognize.
  • Consider introducing a filter for price, category.
  • I don't want to rule out seeing products from brands I don’t recognize.
  • I would change the order of the onboarding. Consider showing the Styles first.
  • Present the style category: favourite brands within the category.
  • Offer the option for users to choose style, brands, or both.
Home Screen
  • News articles feels like it doesn’t belong.
  • I would order items to be recommended for me first, then happening at retailers, then new from brands, then shop your style, trending searches, trending items.
  • It would be cool to allow the user to customize the order of the home screen.
  • New from Brands > a page of tiles, a row for each brand > a page of all the same brand, filters.
Profile Page
  • I would reorder these items
  • Consider 4 large buttons instead of the rows. But it has to look good!
Measurements
  • Feels like a necessary evil. Feels like a lot of effort.
  • Needs a tooltip / info button to explain the purpose and reassure the user that this isn’t required and is instead supposed to be a handy reference.
  • After editing the screen should return to the previous view
  • Maybe a tooltip or bouncy icon to hint at the other view
Map
  • Show all clothing stores
  • Select favourite stores
  • Manage favourite stores in the map section
Brands
  • Swipe to delete
  • Make a brand a starred favourite to see more of their products
  • Brands listing: your favourites could be at the top, or at least indicate that they have been selected
  • Listing: filter by cateory
Design Revisions Matrix

Part 3

Brand Identity Design

The goal was to generate a look and feel that would appeal to men in the 25 - 49 age demographic.

The product's tone and aesthetic should exude a modern, stylish, and masculine approach. It must strike a balance between luxurious and casual in order to feel fresh, youthful, and trendy, yet authoritative and trustworthy.

Color Palette

A palette centered on a gold hue comprised of harmonious warm and cool tones.

Dry Sand
Burnished Gold
Dark Gold
Pewter
City Night
Overcast
Cloudy Day
Snow Cloud
Storm Cloud
Battleship

Name Selection

The name Kit was selected after brainstorming several ideas.

The word has several meanings the relate to the product well. A kit is:
  • Slang for clothing, an outfit
  • A group of items that are kept together
  • A set of tools
  • A verb: to outfit or equip

Part 4

High Fidelity UI Design & Finished Product

With the low fidelity prototypes built and tested, and a developing set of brand colours and iconography, the next step is to refine the design aesthetic and polish the user interface.

High Fidelity Mockups

The next design phase involves taking the low fidelity mockup to the next level and applying the level of detail that makes it feel like a high quality and trustworthy product.

An animated interaction was built to illustrate the SmartTape concept. Instructions are given for the user to place his phone down, then stand still in order to be scanned by the camera. Neat!
The finalized bottom navigation bar. Each icon was customized manually to create a harmonious set. Shown with the alternate dark mode.
The end result of the home screen.

Working Prototype

Feel free to take the prototype for a spin!

Marketing Website

Responsive promotional site built with Webflow.

Alternate Platform

This app design currently feels very much at home within the iOS ecosystem. With additional time, it would be advantageous to create an alternate version that features the doing language of Google's Android platform.

Project Effectiveness

On balance, I do feel that this app, if carried through to production would be a useful and successful product. That said, it's not a simple proposal. The product database would require a dedicated team to curate, manage, and update.

In addition, during user testing, one participant suggested that the same concept could be ported over to travel. It's an interesting idea, and indicates that the ideas underpinning this product could be applied to a number of verticals.

Challenges Encountered & Key Project Learnings

The problem of solving shopping for men isn't a simple issue. There are a lot of things to consider and despite the presence of shared frustrations, every shopper has unique needs.

During the process, I encountered challenges around some of the features I was looking to build. A major issue was being a little to ambitious and wanting to roll in too many ideas. Ultimately, the product may have suffered from trying to do too much in the allotted time. It would have been a better idea to keep the focus narrow, and add features once the core function was working well.

Design Impact & Future Thinking

It's hard to say what the imact of this design intervention is, as it's still just a prototype. I'd like think that if it were to be taken to the next level and built as a fully functional app, that it would be receive popular support and widespread use.

In that case, it would have a beneficial impact of alleviating one of the most frustrating issues that many men face—shopping. Users could gain a new sense of appreciation for their wardrobes and actually come to enjoy browsing for and buying clothes that they find value in.

Some of the things I learned during the process:

  • The importance of sketching and interrogating concepts at an early stage.
  • Trusting the process and really going through each step.
  • Keeping things simple.
  • I learned a lot about Figma and finally now understand how to use Auto Layout.
  • I can now use Webflow pretty well, and am looking forward to becoming more proficient.