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?
Take the prototype for a spin. Tap the Sign up button to start.
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.
Research uncovered the following eight challenges to be overcome in order to improve men’s shopping:
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':
The assumptions the research revelaed must now be tested. A hypothesis statement allows this to happen.
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.
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.
Based on the research, this question can be posed:
The persona is a synthesis of the data collected during the user interviews and research conducted.
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.
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.
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.
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.
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.
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:
During the task, users performed some or all of these actions:
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.
A palette centered on a gold hue comprised of harmonious warm and cool tones.
The name Kit was selected after brainstorming a number of ideas.
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.
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.
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.
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!
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.
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.
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.
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: