Your Mobile App Design Starter Kit — In 7 Steps
“Design can be art. Design can be simple. That’s why it’s so complicated”
– Paul Rand
As a developer, it can be tempting not to think about design. We are often more inclined to focus on writing optimized code and efficient algorithms rather than aesthetic UI. However, no matter how good the code is, how sophisticated the algorithms underneath are, if the end consumer product is not polished, intuitive and easy to use, then all the other work is for nothing.
In creating the VESTA app, our team of Computer Science students at the University of Waterloo wanted to explore the User Computer Interaction world, and take a crack at design. We will now share with you this fun process, and show you how to use this as a starter kit to design that app we know you’ve been thinking about for months.
Step 1: Get to Know Your App
The first step in the design process is getting to know your app. I’m not talking about asking your app how it’s doing today. I mean taking the time to outline the goal of your project, and the value you want it to bring to users.
What Problem Are You Solving?
We want to change how online shopping works to place more of a focus on being more sustainable. People in Western society have been shopping online more frequently during the pandemic, and we have noticed that some brands are not as sustainable as others. With fast fashion becoming more and more prevalent, the focus is not being put on the environmental impact that some brands have but rather affordability and ease of purchase.
This is how Vesta was born. Our project goal was to solve the problem of making environmental impact a higher priority for shoppers. We wanted to build an app that could act as a resource for people trying to learn more about sustainable shopping.
For What Market Segment?
The general market segment the app targets are young people (18–35) who are looking to learn more about shopping sustainably, or already have some knowledge. Previously, to learn about a brand, a person would need to read through several articles found on the internet, that may even be biased. We wanted to bring a consolidated resource that has information on big brands and their sustainability practices.
Step 2: Who are you Designing for?
The second step in the design process, is determining who your target users are. Sit down and imagine someone downloading your app. After they admire how absolutely useful and usable it is, what do they do with it? Who are they? How old are they? Why are they using the app? What brought them there?
Our team held a brainstorming session where we discussed the types of users we imagined using our app. At the end we came up with 5 personas and created detailed analysis to answer all of these questions. This included personal information and an empathy map. Here are the 5 personas we foresaw using our app, as well as a detailed persona mapping for one of them.
- The Free Spirited Artist: The persona of DANTE is a former dancer living in New York City, who describes himself as a free spirit. Dante strongly believes in ethics and as such would never purchase products that harm animals. As a choreographer, he is not well off financially, but tries to do what he can to live ethically as a vegan, with his rescue dog. Lately, his research has been leading him more towards the impacts of the fashion industry.
- The Simple Stylist: Tanya is a Salvadorian woman that grew up in California in a large family. Her job as a Digital Marketing intern allows some breathing room in her budget, but not a lot of time. Tanya has a big heart and tries to help out as many causes as she can. She doesn’t give her style too much thought, but she enjoys having variety of clothes. Her impulse fast fashion purchases can sometimes make her feel very guilty.
- The Sustainable Brand Owner: The persona of YAEL describes a former fashion student that has started her own clothing line. Over the years, she learned a lot about the negative impact of the fashion industry on the environment and decided that her brand would be one that promotes sustainability. Her driving factor is finding the right balance between fashion and sustainability, while compromising neither.
- The Convenience Seeker: Marco is an engineer with a thirst for knowledge. Fashion is often at the back of his mind, but he is very curious about how human actions are contributing to environmental decay. Above all, Marco craves a convenient and easy lifestyle. He would make lifestyle changes, but only if it were simple enough for him to do so.
- The Fashionista: Marie is constantly looking for ways to reinvent her style and stay ahead of new trends. She grow up reading Vogue, and in her friend group, topics of conversation often include fashion and cuisine. Her biggest motivator is being admired for her style, and although she is not a fervent environmentalist, she recognizes the importance of shopping ethically. She believes wearing sustainable brands will be the next thing to do in the fashion world.
PERSONA EXAMPLE: MARIE (The Fashionista)
We realized that our personas were all relatively young and somewhat fashion oriented, as this was the target demographic we were catering to. We decided this was the best option for us, since these are the users most likely to use mobile applications frequently in their day to day lives, especially relating to online shopping, as well as be in a place financially where they purchase their own clothes. However, an alternative would have been to put more of a focus on older individuals or young teens, in order to provide more variety in the points of view. These are the kinds of tradeoffs that are important to think about when hypothesizing about your target users and who you are designing for.
Step 3: Interview Those People
Next on the list of the design process is conducting User Interviews. We’re not telling you to go find the real life Yael, Marco, Marie, etc. but attempt to set up interviews with people that most resemble the future users of your app.
Who Should We Interview?
Our user interviewees for our Vesta interviews were about 50% male and female. We wanted our app to appeal to both genders, providing style and fashion information that can appeal to both male and female users. Most of the interviewees were young, (around 20), the oldest being in their 30s. We figure this is the age where people are the most fashion oriented, and willing to pursue social causes. We had approximately 8 interviewees in total, updating our questions throughout our design process. We also made sure to interview a brand owner alongside shoppers to understand the industry from both perspectives, having different questions tailored specifically to each.
How To Conduct Interviews
To organize our interviews, we first needed to create questions to ask our interviewees. We needed to ask the right questions that would give us the best information.
We used an affinity diagram to iterate on our initial interview questions, since it allowed us to focus our scope and reveal common issues across all users and provide us with the knowledge of what we needed to get more details about.
After running our mock interview we noticed that the interviewee left with a sense of guilt for not taking the environment into consideration when they purchase goods. We then made slight modifications to our questions to try and minimize that since we did not want them to be swayed by our line of questioning.
We also carefully created and iterated upon our questions so that they wouldn’t be leading. We did not want our users to pretend to lead a lifestyle that they do not actually have.
Are your shopping habits sustainable? Are you aware of the impact fast fashion can have on the environment?
Do you think it’s too hard to shop sustainably & you need an app to help you do it?
These are clearly questions with an AGENDA. We don’t recommended asking leading questions, because you will not get real and honest answers.
In your opinion, what is the hardest part about shopping for clothing sustainably?
The above question allows the interviewee to express to us their pain points without feeling like we expect or are leading them to a specific answer.
In a further iteration on our interview process, we used a Sequence Model Diagram to reflect on the steps and intent with which users conduct sustainable fashion research today and how we can improve upon the process.
We learned that our interviewees tend to rely on product reviews made by other shoppers in order to make purchasing decisions. Some users even examine materials and other aspects of clothing to make purchase decisions. In terms of research, everyone tends to use a general method of searching for sustainability articles or fashion trends through Google. We observed similar pain points between users such as information being too scattered, not knowing what to research or where to look, etc.
What We Learned from Interviews
Some interesting ideas came from our interviews. For example, we realized that most people who live very sustainably tend to not shop very frequently. They enjoy pretty minimalistic lifestyles as a whole. This information made us shift from making an app you can shop on, to an app that acts more like a resource about sustainable shopping.
In addition, we learned that the average shopper does not know as much about sustainability or environmental issues around clothing as we thought. This meant that our app needed to take on a much larger “informational” role than we originally anticipated.
Step 4: Decide What’s Important
Great, so you conducted some User Interviews! Evidently now you know all about the needs of your target users and are ready to find out the best ways to address them.
The next step in the process is to decide what features are most important to address your users’ issues. Drill down to the 5 most important features you want your app to have.
Our 5 Features:
- First Launch Experience: Sign up process, introduction to sustainable fashion & fashion footprint quiz.
- Customizable Dashboard: The main dashboard of our application, containing modules catered to the user (articles, clothing items, etc.)
- Blogs and Forums: Social component of our app, allowing users to post questions and read/write blogs, creating a sense of community.
- Brand Profiles: Place where users can search and view sustainability details about specific brands, as well as compare different brands.
- User Profiles: A feature where a user’s information is displayed, where they can see their starred, articles, sustainability score, etc.
For us, once we ran a few interviews it became clear what the main issues with living a sustainable lifestyle were. People did not know how to be more sustainable and don’t know where the resources are to learn more about it. They indicated that they were interested in making better shopping choices, but often didn’t know where to start.
Something that helped us when outlining our 5 main features, was creating design arguments. These were just structured sentences that pointed out the exact purpose and intent behind a feature, and why it is necessary. From user interviews, we learned that users were interested in starting out in the sustainable fashion world, but feared not being knowledgeable enough or being overwhelmed. This learning from the user interviews, let us know we needed to provide some sort of explanatory and introductory experience for new users that could ease their on boarding onto the app. This was our first app launch feature, with the Design Argument:
Next, we utilized user stories to put our selves in the shoes of our target users in order to determine what they actually needed from our app. Here is the user story of a student interested in learning more about their own shopping habits and how to improve them. This was the trigger for the User Profile feature.
Going even further down this path, for each of our potential features, we each drew a user story describing the usage and importance for that specific feature. The inspiration for our customizable dashboard feature (a centralized screen where the user views tailored content and can customized to their interests) for the following story board:
Following this came the sketches and User flows. When considering our individual features, we drew rough approximation of the journey a user would take to use our feature. Below, in the sketches for our Brand Profile, our early thoughts were to have a “profile layout” using visually pleasing components of different sizes, as well as a display for the brand “score”. We also hypothesized what would be the easiest way to display a brand comparison.
After all of these activities and points of reflection, we finally arrived at making our paper prototypes! To the best of our abilities, we created pencil-to-paper drawings of the different screens of our application.
Below we have the paper prototype for our Dashboard feature. Although it didn’t end up looking exactly like this, it’s clear this was the basis for all of our improvements and ideas.
Step 5: Conduct Evaluations
Don’t throw out your pencil and trading it in for a more high tech tool until you go through this step. We created paper prototypes representing the bare bones of our application and a very rough user flow. The next step was to test those prototypes on real users.
Prototype Evaluations
We assumed that even if an element of our design was obvious to us, it wouldn’t necessarily be as obvious to the user. For this reason we came up with a series of tasks to request from the user, to see how they think to approach it, and if they run into any difficulty or confusion along the way.
We requested that they create a blog, participate in a discussion forum, look up the sustainability details of a brand, compare different brands, reorder the layout of their dashboard, go through a sign up process, visit the User profile, etc.
Following this, we asked them questions about their experience and they were able to identify and pain points they experienced.
Results and Analysis
Through the evaluations we realized that user behaviour can in fact be very unpredictable and we would need to account for a wide variety of potential actions or clicks. However, we were able to get a lot of relevant feedback.
The first view of our application involved a Sign Up/Log In process. Having the participant follow through the workflow of the feature, we found out that they were expecting there to be a way to to skip or circumvent the sign up page, which we did not account for. They felt it was unclear why they would be required to sign up to use the app, without testing it first. From our perspective, we thought signing in should be mandatory due to the User Profile feature, but it gave us something to reflect on.
Step 6: Make Improvements
Design Iteration One
After hearing all of the feedback from the paper prototype evaluations, we took the time to update the necessary screens from our designs.
Regarding the First Launch Experience feature, we received feedback that the results of the “fashion footprint quiz” should be more detailed and more precisely indicate what the score translates to, as it was perviously simply a score on a scale. For this reason in the final screen below we added a statement “your closet contribution is the equivalent of XYZ flights from X to Z”.
Other users mentioned that there should be the option to skip the fashion quiz even if the user has already started it, since they can change their mind if they feel like it is too long or they no longer want to do it, and so this was included in the designs.
Another change added was to circumvent the login process by adding a “Skip to app” option on the first screen, as well as adding password rules and validation in the sign up process to make the user’s account more secure.
For the Brand Profiles feature, we iterated using 3 main concerns. The first issue during the evaluations was the distinction between what was clickable and what was not. This was fixed by not encapsulating non-interactive items with a solid border.
Next, the labels in some areas caused confusion — this included the previous comparison labels (ex. Location became Factory Location) as well as the ‘Compare’ button which some users did not clearly identify as a button. By putting a clear ‘GO’ symbol here users know they are able to click it to compare the brands.
Lastly, I updated the ‘’More Resources’ section to look cleaner — instead of just being clickable URLs these links will be held in buttons with the source’s website logo or design on it. This will provide a cleaner and more appealing look to the user.
For the Blogs and Forums feature, in one of the interviews a user asked how they could share their article on other social media networks such as Facebook, Twitter etc. This was an idea we hadn’t previously considered, but it would be a very good way to broaden the types of people these articles may reach, and bring more users to the platform.
Another interviewee asked about how they can exclusively see all the chats/forums they have created. Prior to that, if a chat was created it was just added to the list of all the currently available chats. Instead, a filter option has been added so that users can sort by most popular, my chats, newest etc, to see the content they want.
Design Iteration Two
In this second design iteration, before moving on to the next phase of the design process, we re-evaluated all of our features, making sure that they were still in accordance to the problem we are trying to solve through the building of our app.
The main problem we identified is that our scope is too large for some features. To solve this, we went back to our value proposition and tried to identify which components of each feature were working towards that value proposition, and which weren’t or were out of scope. We found that for most of our features there would need to be some additions, removals, and improvements.
Customizable Dashboard
The Customizable Dashboard feature will now serve to help the user discover other features. Brand discoverability (brand of the week) will link to brand profiles. Custom article and brand recommendations will link to blogs and forums and brand profiles respectively. Prompts to update your sustainability score will link to the user profile.
User profile
The User Profile feature will link the current user to they favourited articles and brands. The CO2 and Trees Saved metrics will be removed, due to lack of reliable data on these metrics, and will be replaced by more approximate but still descriptive data.
These were the two features that were most updated before we continued into the High-Fidelity prototypes. Two other features received minor edits and we decided not to change the Blogs and Forums feature at all. Overall we definitely were not afraid to make a lot of changes to our designs.
Step 7: Become a Designer Extraordinaire
Now we’ve definitely arrived at the fun part! Insert Figma, or any other UI tool you can use to create your High Fidelity Prototype. This is where we brought our paper prototypes to life and were able to create the final designs for our app.
We chose to design for IOS, since it’s the common platform in the US (our target demographic). When selecting the colour scheme, we picked a navy, teal, yellow and green colours for the app. The logo is a shopping bag with green leaves on it and the navigation bar was placed at the bottom of the homepage (similar to Instagram). The logo can be seen on the dashboard pages of the app, and to match the clean/minimalist theme of our app, we decided to choose Roboto and Red Hat display to be our main app fonts.
After creating our Hi-Fi designs, we tested them via cognitive walkthroughs and heuristic evaluations. From our 4 testers, we were able to receive very relevant feedback.
Our heuristic evaluations focused on auditing the consistency and aesthetic of our designs, visibility of system status, as well as match with the real world. From these evaluations we learned that we needed to we stay consistent with the terms “Forum” and “Chat” in different areas of the app and that the blogs section should include visuals to better capture the idea of the article’s subject matter. The second heuristic evaluation suggested that the user profile should have a separator between sustainability score and favourited articles. They also suggested getting rid of the “+” icon in forums as it’s existence is redundant.
The cognitive walkthroughs focused more on the intuitiveness of our app’s navigation. It involved task based requests without specific instructions, so we could ascertain with what ease the user completes them. When completing the “create an article task”, the user expected that the article they just created would appear automatically on the list of articles to indicate that the action was successful. We also found that after completing the “compare brands action” it was difficult to get back to the dashboard (3+ back clicks are required because there is no menu bar at the bottom) which is not an optimal experience.
There was also some confusion about how to actually compare the brands. The tester kept switching back and forth between the brand discovery page and the dashboard. Given this confusion, we changed the language surrounding brand comparison to be more clear.
We approached all of the feedback elements critically in an attempt to arrive at a solution. We ensured we used “Forum” instead of “Chat” throughout the app, we added/removed visual elements from the User Profile, we made it so that the “back” operation was intuitive to use, and finally we updated the language surrounding the Compare Brands feature to make it more obvious what it was possible to do.
Conclusion
In the end, it’s safe to say that we all learned an incredible amount throughout the last few months, with every activity and every iteration on our work. Our design process included user interviews, paper prototypes, evaluations, more user interviews, design improvements, a lot of team calls and heated debates, but in the end we arrived at a product that addressed the problem we set out to solve at the start of the term. We have an app that can inform and provide resources to those looking to shop more sustainably.
We remained open to feedback throughout the entire design process and ultimately that allowed us to make something we are really proud of, by seeing where we went wrong and being open to fixing it.
The design steps outlined in our User Computer Interaction course (CS 449), took the huge and terrifying task of designing an ENTIRE mobile app, and made it manageable and intuitive.
If we re-did this project again we would likely spend more time on the shopping aspect of the sustainable fashion industry. We would work to find the balance between offering sustainable products while not promoting over-consumption (which in itself is a non-sustainable practice).
Overall, we are extremely happy with what we have achieved, and we strongly believe that following these steps, anyone can create something they are proud of! :)
P.S Take a look at our amazing Demo Video!
You definitely want to download the app now, don’t you? Yeah, we know.