So you want to build an app? A UX Case Study into application creation from scratch.
Creating a new app or even process of just thinking about an app is easy. That’s what most people think. I remember looking at Craigslist.com for some freelance projects and coming across ads like this: “I am looking for a developer to make an app for me. Don’t worry, I know what I want, you will just be making one, since I have no knowledge of coding. There is no pay, but you will get equity in it.” I don’t think people who post ads like this, have any knowledge of what “making an app” means in terms of the whole process. Just having an idea is nothing. First you will need to find out what problem for users this app will solve. Then, will there be actually any users who want to use the app. After that, how to retain the users to continue to use the app. Building out an app or product (in my own experience) is actually is more like step 3 out of 3 (User Experience Design+Visual Design (both of these usually go hand-in-hand) and finally Development) and what I mentioned above is pretty much are a few things of many that are involved in step 1!
Steps 1 and 2 are my job. Being a UX Designer I need to use a vast knowledge of techniques and tools to identify an opportunity within a problem space and select an appropriate platform for which to design a solution for, as well as research, synthesize, ideate and deliver the final designs to developers, who finally after all of my work, can actually create an app for users and hopefully that app will change the technical landscape in a niche that we (a group of UX/UI Designers with Development team) are trying to occupy to solve user needs.
Presenting Circle. What is it? Well, let’s go over the whole process and how my team of 3 people came together to create an app that should help people in our very Social Media heavy world be able to take care of themselves and have positivity in their lives that is only shared with people who they really trust.
My team of 3 UX Designers have received a brief from internal stakeholders to identify an opportunity within a problem space and select an appropriate platform for which to design a solution. We didn’t have any specific industry to choose, but through group facilitation meeting we came up with 2 specific areas we wanted to focus on: self-care and creativity
What follows is my team presentation on how a team of UX Designers created an app based on user research and followed all the steps necessary to make sure app is usable by the audience we selected.
Users & Audience
Since this was a new app built from scratch, we didn’t really initially had a user base we wanted to focus on, except for that they should be someone who takes care of themselves both mentally and physically. Age didn’t matter, income didn’t matter, sex of the user didn’t matter as well. What mattered was how users were defining self-care and how they did it for themselves.
Roles & Responsibilities
Our team consisted of 3 people: me — Sergey Bestuzhev, Roma Patel and Jose Lee. We didn’t really assign any specific roles to each of us, except for that Jose (also known as Joey to the team) was our scrum master. We all continuously worked together on most of the steps with exceptions to user questioners, as well as usability reports that were written by Roma. Through our process of working together we realized where each of us shines the most — Roma is a great analyzer (she has a science research background), Jose/Joey has a great brainstorming mind (he has a music/art background) and I have a sense of how to organize all the data we got into design that users of any caliber can understand.
The tools we’ve used during our Unit 2 process were Figma, Google Slides and Docs, as well as Photoshop and some online free image/video editing tools.
Scope & Constraints
Our timeframe for the project ran from November 12th, 2019 (getting the assignment) to November 22nd, presenting our possible solution to the stakeholders. First week was spent doing user research, creating lo-fi wireframes, overlooking user testing and compiling data from all of these sources. Second week was spent working mid-fi clickable prototypes, doing more user testing with the prototype and creating final hi-fi mockups in Figma to be presented to the stakeholders.
We did not have a budget for this project.
The roadblocks that we hit were short deadlines, with time spent on the weekend both at home and at General Assembly.
Process
To start we have worked on creating a screener survey to find out information we needed for this project. For this survey, 26 people submitted their answers. 21 people qualified and 5 have been selected to further interview in person or over the phone. Four people have been interviewed in person and one person over the phone. Below you can see their survey information that they filled out and we later based our affinity mapping and lo-fi paper prototypes during Synthesis stage of the process.
1. GOAL
Find out how users use their creativity in their self-care routine
2. OPENING QUESTIONS
- What is your name?
- How are you?
- Do you feel well-rested today?
- What is your profession?
- How old are you?
- What is your experience with practicing self-care?
3. PRIMARY QUESTIONS (BEHAVIORAL AND TOPICAL)
- What do you define as self-care?
- What do you do to practice self-care?
- Do you practice self-care alone or with other people?
- Are there any applications or websites that you utilize to aid in your self care practice?
- If so is there anything that they are deficient in?
- Are there any ways that practicing self-care helps you?
- What does your self-care routine look like?
- Do you think you need to improve in terms of your self-care practice?
- What is the most useful method you have found in your routine?
- Can you recall your best self-care experience within the last 6 months?
- How about your worst experience?
- Do you have any hobbies or passions?
- What are they?
- Does creativity play a role in your self-care practice?
- If so, how?
- What about it is beneficial for you?
- Do you use any applications for this?
- How often are you using these applications
- Could they be improved in anyway
Affinity Mapping
After the process of interviewing 5 people, we have decided to work on Affinity Map to figure out “I” Statements that will help us shape a Persona.
Out of these we have decided to focus on 5 “I”Statements that are:
- I find structure is integral in my routine.
- I use apps to help me with self-care.
- I find music to be helpful [in my routine].
- I use social interactions to distract myself [from stress].
- I like to be with nature.
From there on we have created a Persona — Chelsea. Creating this Persona really helped us to provide a common understanding and get a deeper understanding of the user that will be a core user of our app. With that in mind we came up with clear problem statement (please see slides below for more information).
Design
Our first step was to do a Design Studio where we all develop ideas and combine them into first draft of the app. From this we developed a MoSCoW map that shows what our app Must, Should, Could and Won’t have on a first build. These are the functions that we brainstormed in out Design Studio:
Below you will find the Competitive Landscape Matrix that we have made to show the Comparators and Competitors of our app.
As you can see our Comparator was Facebook, who is a juggernaut in Social Media, but it has a lot of negativity that follows with the words “Social Media”: negative comments, number of likes, competition to have more likes on your Page and etc. It’s very big on Social Connectivity, but completely fails on Shareable Self-Care Content/Tools. An app that is closest to ours was Sanity & Self, but it 100% for women only and everything is actually shared publicly to the community. There is no private groups that you can be in. All your feelings shared to the world. While it can be a good thing that a stranger can be actually nice to you, we felt that some things you want share only with your friends and that’s where our research and Persona development came through. We only connect users with their closest friends, Feed is shared only with them and there is no public commenting or likes. Everything is shared privately, except for activities/goals for today and (if you want) how are you feeling today. Of course the idea of group “chat” came around during this stage but we decided it would be something down the roadmap and not yet available on first build.
We went with the iOS platform because the majority of our users used this. We chose to create our design within a native application, because most of our competitors are mobile apps. And also the user can access downloaded content without needing internet.
We chose to partner with Apple because we wanted to keep all the platforms and integrations in the same place. Having an iOS platform with Apple Music and Apple Health is very convenient for the user.
Low-Fidelity Prototypes
For lo-fi prototypes we have had to come up with 2 scenarios for 2 functions that we wanted to test users on to see if they understand how to use the app.
Here is the flow of how user should be able to complete these 2 tasks:
- The user is shown their home feed page and will click the “How are you feeling?” drop down to log in their feelings.
- For physical state, they can select how they feel.
- They can do the same for their mental state and click “OK”
- This progress of their physical and mental health will be logged over time through the Apple Health integration.
- Returning back to the home feed page, the user can check in on friends that are not doing too well.
- When clicking on “Support” next to their friend’s name, the user has options on how to make their friend feel better.
- The user can select to send music to their friend and will be prompted to select a song integrated through Apple Music.
- Once a song is chosen by the user, they can confirm what and who they’re sending to.
- The user receives a confirmation page that the song was sent.
User should be able to complete these with no problem, right?
… and the actual User Testing Results after talking to 5 users:
Analysis: Despite the fact that 3/5 users would use this application, it is not clear in the icon language and the flow of steps.
Recommendations:
- Change the Suggestions icon and its name.
- Redirect the user flow to send suggestions through messaging instead of having a separate icon.
- Allowed users to attach content to messages since they were originally confused
Mid-Fidelity Prototype
Taking notes from low-fidelity testing, we’ve created the mid-fidelity flows in Figma. We also came up with the app name:
What does Circle mean? It means that this app is designed for very close friends, a Circle so to say, where no information is being shared to the public Feed.
Analysis: While doing User-Testing we realized that some of the things we are still missing or some things may still be confusing to the users. Here is what we found out.
Recommendations:
- Change the wording for inputting feelings at beginning of flow.
- Rename the “Articles” icon in the Tab Bar.
High-Fidelity Prototype
After compiling the results from our mid-fi usability tests, we revised the design and created a hi-fi prototype in Figma. Let’s see how one of the paths Chelsea can take works.
And with that, we had to do a presentation to internal stakeholders, without any user testing yet done on hi-fi prototypes or any report on that.
We did create a Spec Doc for the app to be handed over to Development Team, so they can at least look over what they need to do in very near future. We will provide them with updated one once the app is approved for the buildout by the stakeholders.
Next Steps:
- User Testing on hi-fi prototype
- Hi-Fi User Testing Report
- Implementing feedback into updated design
- Do more User Testing till app is ready to be sent to the Developers.
Leanings:
This was our first app development cycle from scratch all the way to the hi-fi prototypes. We had to come up with an idea and make sure this idea will work and easy understandable by users. Taking an idea of how a user views self-care and what do they do to implement it, became our app Circle.
Where did the project leave off?
Taking the internal stakeholders feedback on our presentation, we decided to to do the hi-fidelity user testing, especially to make sure our app is ADA compliant and every possible user can access our app and understand how to use it easily. We will also try to do more user testing on additional functions that we have in mind for this app, but because of tight deadlines for this project, we were not been able to show in the current presentation. We will never stop creating something new in this app. Always improving is our goal.
“You can’t use up creativity. The more you use, the more you have.” — Maya Angelou
