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?

Designed & Built with

Working Prototype

Take the prototype for a spin. Tap the Sign up button to start.

Marketing Website

Check out the promotional site built with Webflow.

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 framework 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' stage information and ideas are collected, which are then analyzed and discussed by various stakeholders and decision makers during the 'converge' phase.

During the research and discovery step, I used interviews to learn about users':

  • 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


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
  • 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
  • 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 gets 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  allow us to work through ideas quickly. Good ideas can be explored further, bad ones are eliminated.

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

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
City Night
Cloudy Day
Snow Cloud
Storm Cloud

Name Selection

The name Kit was selected after brainstorming a number of ideas.

The word has several meanings that 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 & 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!

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 & 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.