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?
Working Prototype
Take the prototype for a spin. Tap the Sign up button to start.
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
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.
Mike Brown
- 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.
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.
Name Selection
The name Kit was selected after brainstorming a number of ideas.
- Slang for clothing, an outfit
- A group of items that are kept together
- A set of tools
- A verb: to outfit or equip
Logo Design
The result of the brand design is a simple geometric logo mark with parallel diagonal lines cutting through the letterforms.
Angular modern architecture was a source of inspiration.
How the type was customized.
In addition to the bold and striking buildings pictured above, the shapes, lines, and angles seen in the fixtures at menswear retailers provided further inspiration for the conceptualization.
Typography
This project features the Barlow typeface.
With a design intended to be highly readability, it's an ideal type family for mobile apps. And the narrow letterforms maximize space efficiency.
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.
