In this post, I’ll share my approach for designing products. Specifically, a mobile app called Custom Keds, where you can create and buy customized Keds.
It is a completely made up app for the purpose of sharing my thoughts on this post.
When given any design problem, my first step is to come up with a strategy for the problem, the context, and the goals of the project. The strategy keeps my design focused, and I refer back to it often to make sure my ideas support the project goals.
Below is my strategy outline for the Custom Keds project.
I chose to work on this project because while there are nearly infinite varieties of sneakers available for sale, shoe companies have mostly neglected the opportunity to allow customers to design their own shoes.
My goal for this project will be to design an experience where users of the app can customize their shoes, and leave the app with an understanding of exactly what they will receive in the mail.
Understanding the user is most important for any design project. When thinking of a design strategy, the first question I always ask is: Who is this product for?
Personas are a great tool to help align your strategy to a specific user group. It gives you a glimpse into your users’ goals, motivations, and behaviors.
For this project, I came up with two possible personas.
Samantha is in college studying English. She loves art and photography and often can be found working on crafts and DIY projects in her free time. When it comes to fashion, she can be very picky. She needs a new pair of shoes and wants to buy a pair that allows her to express her own personal style.
Mary is a stay at home Mom in her 40s. She is looking to buy a unique birthday gift for her daughter. Her daughter needs a new pair of shoes, but Mary is not quite sure which ones to buy. She doesn’t stay up to date with current fashion trends.
Since no user data was available for this project, I based the personas on my own ideas for two different user types. Although these personas may not be 100% accurate, they help narrow the target audience and scope.
At this point in the project, I studied competitive products to identify with the user I am designing for, and immerse myself in the problem and current solutions. I spent time using competitive products and took note of the things they are doing well and the things that can be improved.
Starting at a very high level, I mapped out the entire ideal customer journey from the user’s perspective. Thinking through the customer journey helps you better understand your customer and prioritize your product to match their specific pain points.
Focusing more narrowly on each step of the journey, I wrote user stories, sketched out task flows, and made a list of features for each screen.
By now, I usually have a pretty good idea in mind of how I want to design the product. Starting with sketches I transfer the design to paper and continue iterating until I’ve created pixel-perfect mockups.
At every stage, there are always design decisions to consider.
Take the home screen for example. I knew I wanted to center the app around community and engagement, which is why I chose to show pictures of shoes customers have designed as the main screen. My first thought was to show one picture on top of the other with a photo of the customer, their name, and the title of the shoe.
But the more I thought about user scrolling behavior and other inspiration/discovery apps like Pinterest and Instagram, I realized that people like to see lots of options and choose which one sparks their interest. Seeing lots of images is more engaging than seeing one at a time.
I also decided that the customer photo, name, and title of the shoe were not important to show on this screen. Every element and piece of information has a certain priority. Before finishing a design, I always ask myself if the most important elements are highlighted and if there is anything unnecessary that can be removed. The photo of the shoe was the most important element for customers to see in order to make a decision. Everything else was just a distraction.
Lastly, in the wireframes, I designed a “Customize own” button at the bottom of the screen, but in the final design I decided to remove the button. The button allowed users to create their own design from scratch with a blank template, but I decided a more elegant solution was to have a photo of a completely white shoe permanently in the first position. This is a decision I definitely want to test, as I am not quite sure how users will respond.
High Fidelity Mocks
You never know how successful a design is until you see it in action. Prototyping and testing your design ideas is a great way to start learning from users early.