This is my first capstone project which was conducted over several months as part of Springboard’s UI/UX design course. Students were tasked to find a problem space that we found interesting and develop a solution for it.
I chose to look into a problem space that I have personal experience with and have helped others navigate through. That problem space is getting a tattoo, especially your first. The process of getting your first tattoo can be daunting and stressful due to a lot of unknowns, the lack of resources, including a tool to help users to figure out what they want to get. Sorry Mom is a smart phone app that was designed using user-centric methodologies to keep the users’ needs at the forefront throughout the design process.
Goal:
Design an intuitive app that will address the problems that people face when planning their tattoo and make the app something that users will use repeatedly.
Problems:
• Design something that is easy to use and intuitive to cut down on users having to learn something new.
• Organize and centralize all of the information and inspiration users should know and need when getting their first tattoo.
• Design an app to empower people while going through the process.
Challenges:
• Designing something that a first timer would use but also that would be helpful to someone that has several tattoos already.
• Incorporating premium features that add enough value that users are actually willing to pay for them.
• Designing an app that has multiple sections that will need to flow seamlessly from one to the next.
Solutions:
• Base the different features and components off of other well known/used products and run usability tests to create a smoother/easier user experience.
• Compile resources and examples into a searchable database that is easy to navigate and use.
• By giving users the access to pertinent resources and information they will feel more in control of the whole process.
I started the project by learning more about who is getting tattooed, how many people are getting tattooed, why are people getting tattooed, how are people deciding what to get, what are their influences to get tattooed, do people regret their tattoos and why, where are they going to get their information and inspiration.
Even with the popularity of a few different tattoo reality shows the tattoo subculture is still somewhat of an underground scene. Because of this I wasn’t able to find a lot of information and data. Even with the lack of hard data I was able to find out some key information.
Through my secondary research I found that my ideal users would be:
With these parameters in mind I used a survey to narrow down my 5 interview participants. The 5 participants were a diverse group of individuals. Through my interviews I set out to gather information and insights into why they haven’t gotten tattooed yet, what tools they have been using and how, how they think these tools could be better, gauge their knowledge of the tattoo process, the pain points and frustrations they have had, and how they would solve any problems they came across.
I then compiled the quotes, information, and data from the interviews into an affinity map.
Next, I used the affinity map to synthesize this information to find patterns and insights that were common between the participants. Through this research I found 3 main insights:
With the information from my secondary research, I began creating empathy maps. This helped me to define and better understand what the user is thinking, feeling, seeing, hearing, and doing. The empathy maps made it easier to refine and develop two different personas.
They represent two different groups of people that I centered my designs around.
To better define the problem, I used my data and personas to develop 5 “how might we” questions. They are:
With these questions in place I now have a list of problems that I will solve for and refer back to to make sure we are accomplishing.
I used these 5 questions and began brainstorming solutions for each of them. I came up with several different solutions for each problem and some of those solutions were able to address more than one of the questions. I then narrowed the solutions down.
To help educate the users:
To help the users organize inspiration and plan:
With these solutions in mind I began to create user stories based off of what the users goals would be while using the product and mapping the tasks that would be involved. After creating my user stories and seeing what they involved I prioritized them to see which would make up my Minimal Viable Product (MVP).
After choosing my MVP I created an app map to visualize, organize, and define the hierarchy of the different sections of the app. With the use of the app map, I was able to create user flows for the different routes a user would take to complete different tasks. With a couple of iterations, I was able to smooth out the flow of the login and check-out process. It also helped me to decide what screens needed to be made. I then designated which user flows would be my Red Routes. These paths will be critical in making the app successful.
I created low-fidelity rough sketches based on my user flows and red routes. These sketches were turned into a low-fidelity prototype that was used in my guerilla testing.
From the tests, I found that my quiz wasn’t clear and that the FAQs and Premium sections were a bit ambiguous. I also received some positive remarks stating that the concept is good and the general features are a good idea.
The issues were taken into account when converting the sketches into wireframes. I brainstormed some solutions and came up with adding a screen before the results board to explain some of the different parts of the app. I also added extra information at the top of the FAQs screen to give clarity to what the section was. In addition to addressing those issues, I cleaned up the sketches by setting up a grid, typography sizes, and looked at different UI Patterns and elements for reference.
Next, I set out to develop my brand. I decided to call my application “Sorry Mom” as a fun little nod to upsetting one’s mother after getting a tattoo (I know my mom wasn’t very happy after I got mine.). This helped to set the brand’s personality and attributes. While developing the rest of the brand and style guide I knew I wanted the UI elements and color palette to be neutral and clean to allow the images of tattoos and tattoo artists’ work to be the main focus. I also utilized a frosted glass effect for some of the UI elements that are above images to allow the images to stand out more. This was done in a way not to hinder the legibility and usability of the UI elements and text. After creating the style guide I started to design high-fidelity screens based on my wireframes.
Once I designed all of the high-fidelity screens I began creating a clickable prototype for usability testing. The testing consisted of remote moderated tests for 2 separate rounds on 5 different people each round. Each participant matched one of the 2 personas that I developed earlier. After each round, I would brainstorm and develop solutions to the problems that were revealed.
After the first round of testing, I learned that the information for the quiz and the results weren’t very clear. I chose to update the copy for the quiz to help clarify its purpose. I also learned that the names of the sections and the labels in the bottom navigation bar weren’t very clear either. I decided to change the name of “FAQs” to “Resources” to better represent the section. I also changed both the icon and the name of the “Home” section to “Explore” which was accompanied by a magnifying glass icon to give the user a better idea of what the section is. I received several accolades from this first round. Testers said that the app was visually attractive, the search, filter, and save features were seamless and intuitive, and that the checkout process was smooth and expected.
After making these updates to the prototype, I tested the second group of people. The changes I made helped to make it easier to use and understand but also brought some other issues to my attention. Some participants in the usability test didn’t understand the functionality, structure, and hierarchy of the “Saved” section. To help fix this problem I updated the name of the section to be “Boards” to make it cohesive and more apparent where the boards were located. I also had the user land on the “Boards” screen instead of the “My First Board” screen to help show the structure and hierarchy of the section. I added some information on the “Boards'' screen that will let the user know a little more about “My First Board” and how to add additional boards. Another issue that was brought to my attention was the usage of the word “Sex” wasn’t as inclusive as I set it out to be and was changed to “Gender” to be sensitive to different people groups.
I believe I was able to find a solution for each of my 5 how might me questions in a well structured intuitive application.
One of the biggest challenges I came across while designing this product was the names of the sections. With the help of the usability tests on the high-fidelity prototype I was able to find some labels that worked better with the different sections. If I had to do it again I would have done more brainstorming and user tests earlier in the design process specifically to find the best names of the different sections of the application.
Takeaways:
