Zapped
Zapped is a geo-based tattoo app that genuinely deep dives into the experience of permanent body modification. With offerings such as in-app booking, new artist discovery, and a virtual studio, Zapped creates a suitable environment for first time clients through tattoo collectors.
Overview
Problem Statement
Tattoo enthusiasts need a way to connect to tattoo artists because they want to be able to source better inspiration and find an artist who will deliver the perfect permanent piece of art to their body.
We will know this to be true when we see users seek this product to find their source inspiration and begin booking appointments with artists they have newly discovered through the app.
Tools
• Adobe xD • Google Forms • Optimal Workshop
• Adobe Photoshop • InVision • Usability Hub
• Balsamiq • Lucid Chart
Research + Analysis
Goals
Further identifying habits and behaviors in which users go about sourcing tattoo inspiration and booking artists.
Determine key features to include in my own development process.
Understand any frictions, pain points users encounter while sourcing a tattoo in traditional manners or with competitor apps.
Interviews
Key Insights
The results of the survey allowed me to formulate better questions and understand how to elaborate into more specifics.
Incorporating a lasering/tattoo removal feature would be important for any users who have tattoo regrets.
An anonymous rating system would be best to avoid any social issues or future bookings between a client and artist.
Most people are not willing to pay for premium services to integrating those features in the best way possible without the price or low cost attached.
Affinity Mapping
There is no one easy way to book an appointment and to see all of the artists' information - rates, reviews, artwork, availability, etc.
Even though not all of our users get tattooed frequently, they are constantly staying updated on trends and willing to educate themselves further within the culture.
Although we did competitor analysis on two other tattoo related booking apps, Instagram will seemingly be our biggest competitor. We can possibly use this to our advantage and use that platform as a marketing tool to cross advertise our platform.
Most tattoo regrets come from being referred to an artist through a friend or having communication issues such as color choices and not being able to try on the tattoo before their appointment.
The augmented reality feature - aka virtually "trying on" tattoos" would be beneficial to many users as it would save them time during appointments and also assist in any communication issues such as color choices.
Personas
From the beginning stages of my research, I was able to form two personas:
The Enthusiast - This user embodies a tattoo "collector" - someone more familiar with the process of finding an artist, sourcing artwork, and the motions of booking an appointment.
The Novice - This user is completely unfamiliar with the world of tattooing and seeks more direct connections to the industry/process.
Journey Maps
Following the creation of personas, I was able to dive deeper into the users' stories by analyzing their emotions and potential opportunities.
Key Insights - This step was crucial as a stepping stone into understanding the mindset of my user and how to construct the initial user flows around their wants and needs.
User Flows
Derived from the journey maps, these user flows illustrate two of Zapped's primary features:
Flow One: Book an Appointment
Flow Two: Virtual Session
Site Map
The site map has gone through several iterations to land on this final architecture.
Challenges - In the first draft, I originally had the deposit payment after the appointment booking form. I quickly realized this would be an issue if the artist chose not to accept the appointment likely causing more refunds.
Solutions: To fix this, I decided to move this action after the appointment was accepted. Moving this action here also created a better flow for users to enter the virtual session.
Key Insights: After performing a card sort in between updates and gaining user feedback, it was important to see my user's mindset. How they categorized certain tasks helped me reevaluate certain flows I could not see myself.
Concept + Design
Wireframes
After conducting research, developing user personas, and forming early iterations of the app's basic architecture through journey maps and user flows, I began to visually construct Zapped in various iterations.
Beginning with mockups in Balsamiq, my low-fidelity wireframes formed the basic layout and helped to identify any flaws within my original sitemap. From here, I was able to adjust the sitemap to create a better flow for users and go on to mid-fidelity wireframes where I formed the navigation and locked down general placement for elements. Lastly, the process began for constructing high-fidelity wireframes.
I constructed my first iterations based on my mid-fidelity architecture and an ideal UI style guide I mentally built as I conducted my competitor analysis. After adding in accessibility features, ensuring Zapped met the iOS guidelines, and conducting usability/preference testing between various prototypes, I landed on the current versions.
Key Insights:
Successes - Locking down a consistent user flow and understanding my key elements early on was my greatest success while designing wireframes. This allowed me to easily progress into each iteration and carry the intended style and message throughout.
Struggles - My biggest lesson designing was to keep things simple. I learned when I over-complicated designs (i.e. the icons on the early high fidelity wireframes) users were confused and overloaded with information.
Solutions - By making my icons more universal and simplifying the amount of content for the user to process per screen, users were able to accomplish their goals with less resistance - overall, providing better usability test results.
Prototype + Usability
Usability Testing
I conducted six in-person moderated usability tests with six participants total. I had users interact with the clickable prototype through InVision on a laptop and recorded their interaction with Quicktime screen/audio capture. This way, I was able to capture the session and have the time to watch their behavior since I was conducting the tests alone.
Challenges - During my first session, the audio stopped recording during the last task. I had my participant go through this task again so I was still able to get his reaction on audio to go back and analyze it.
Solutions - Consequently, I recorded all the remaining sessions on my iPhone audio as well so I wouldn't have to make the participants repeat any tasks and have authentic reactions in the audio recordings.
Successes - Each session lasted in between 15-20 minutes. Great conversation was held with all participants and led to gaining great insights on how to improve the app moving forward.
Participants + Method
Test Method: In-Person Moderated
Device: Laptop
Recording: Quicktime Screen/Audio Recording
Prep:
Preference Testing
Tool: UsabilityHub.com
Participants: 13
Average Time: 30 Seconds
Objective: Test different design options for the confirmed appointments screen - would the user prefer having all of their appointment information with CTAs crammed into one area or be able to click into individual screens that stretch out the information?
Key Insights - Preference Testing was definitely the quickest and most effective way to gain feedback for certain designs and elements I was not sure about. Going forward developing new features in Zapped, this will be the route I take if I am unsure about any particular elements.
Next Steps
Moving forward, there are still a few more flows I'd like to implement in the prototype so users can get a more well-rounded feel for the app. I'd like to expand on features within the mobile design like the "Explore" page and the messaging system between artist and client. Also, I would like to start building out the second half of the app which is from the Artist's perspective.
Each new update will be tested through usability testing. Throughout the design process with Zapped, I gained valuable feedback and was able to make variations according to user feedback. Final design decisions will be tested through A/B testing as this seemed to be most effective for UI decisions.
Credits:
Graphics: Davids47, Iconology, NotionPic, Pixabay, Sketchify, Smalllike via Canva
Tattoos:
Butterfly: Dani Queipo
Cowgirl: Unknown
Photograph:
Maria Qualtieri