MissingInk
Elisabeth Donovan
About: Student Project at Career Foundry
Role: UX Designer
Duration: 6 months (10-20 hours a week)
GOALS
To create an environment where anyone can find the tattoo they desire and have confidence making their decision.
To increase business for tattoo artists and studios by introducing them to a new audience and allowing easier options for connecting and booking appointments.
RESEARCH METHODS
I began my research by conducting an online User Survey, which allowed me to reach far more potential users, whether they have tattoos yet or not, and gain a variety of insight.
My survey showed the main reason people do not get tattoos is that they fear the pain. While this is understandable, it seemed to be that lack of knowledge and communication significantly contributed to this fear. With this insight, I designed MissingInk with a professional look and feeling in mind. Then main factors I focused on was ease of searching, communicating with artists, and a section of advice and answers that any participating professional can add to.
Using the data obtained by the 62 participants, I was able to formulate questions and prepare for User Interviews. I conducted three interviews to gain insight into the mind of my potential users.
I focused my first iteration mainly on potential, already tattooed, clients before looking at the business side of the app. If my app doesn't work for tattoo seekers, studios and artists will have nothing to gain from using it as well.
I delved into each users journey to get a tattoo and where they found their inspirations. Users felt an open and frank dialogue with the artists was key to the process. I discovered that for new people, the world of tattoos appears intimidating. This idea was incorporated into the colors and fonts used in MissingInk, balancing professionalism and fun.
Utilizing the information gained from my research, I created User Personas and User Flows & Journeys to help layout the direction of my app and keep focus on the needs of the user.
The User Personas I created helped ground me in my development phases, reminding me who MissingInk is designed for. I constantly referred back to their journeys & flows throughout each iteration.
Working with my discoveries from User Interviews, I determined the main categories needed for my app, such as Tattoos, Artists, Studios, and Favorites. An Open Card Sort showed me how everyday app users think and navigate. I then created users Mental Models and refined my Sitemaps. As mentioned earlier, participants wanted a place to find advice and answers and the card sort results proved the same. Therefore I implemented a change in my sitemap to have a separate Advice category.
Once I had my designs ready, I ran the first of many Usability Tests. I performed five remote and one in-person test, all moderated. This aided in pointing out the high priority issues that I needed to fix first, such as unrecognizable icons and signup issues.
When time allowed, I was able to attend to lower priority issues, such as cosmetic fixes. A/B Testing encouraged another change in font and color usage.
WIREFRAMES
LOW-FIDELITY
Through my testing I learned that the onboarding process needed to be minimal and simplified.
The first iteration involved so many onboarding screens that the user would lose focus and skip before finishing. The next iteration contained only the most important information needed to get started.
MID-FIDELITY
More testing showed that onboarding should be different for tattoo users and professionals.
The log-in options evolved as well, variations in color to help differentiate, and a separate option for Professional log-in is then added to the Splash Screen.
For each Usability Test I conducted, I gained valuable feedback from my targeted users. I would ask users to complete certain tasks unassisted, in a monitored environment.
One of the main lessons I learned is that not everyone interacts with an app the same way. For example, certain icons and prompts I thought would be easily recognizable stumped a majority of the participants. I solved this particular problem by asking them what they expected a certain icon to look like, as well as using labels for increased accessibility.
HIGH-FIDELITY
Throughout my first few iterations I was designing a Top Nav Bar to choose different styles of tattoos. This was not ideal for a mobile app and was later changed to its own option from the home screen.
Another fix was changing the List options to a pop-up box rather than loading a new screen.
ACCESSIBILITY
MissingInk uses simple and concise language for easier translation to the users main language. Text is seperated from images in order to allow any translation overlays. I also revised text boxes to allow for spacing and height difference between languages.
STYLE GUIDE
FINAL MOCKUPS
The end product is a professional and welcoming app, helping users on their journey and connecting them with the right tools, ideas, and people they need. MissingInk will help increase business and customer satisfaction through open communication and ease of reach.
You can view the full MissingInk prototype here
To see a walkthrough of some features, please click here
PROJECT LESSONS
User testing is key. Due to the circumstances of the pandemic, it was a bit harder to find willing and available participants. While the users I met with provided me with invaluable feedback, going forward I would like to make sure to have a more varied pool of participants.
A little goes a long way. Simplicity works far better than overwhelming your audience. Minimalist style is not only more attractive, but likely to get users more engaged. Don't sweat ALL the small things!
Never stop learning. Asking questions is essential and everyone may have a different answer depending on their needs and views. You can never create an app that appeals to everyone, but you can only be successful if you keep questioning.