Kelly Crabtree
UX designer
Made with

Inklover

Find your tattoo masterpiece and an artist to match your style

Inklover Prototype

It All Started With a Need 

Tattoo clients need a way to connect and discover tattoo artists who fit their needs because they desire a stronger connection with the artists. This in turn creates a better outcome with a tattoo masterpiece they love. 

Inklover was designed based on the following research, analysis, and design.

  • Competitor analysis
  • User interviews and surveys
  • User stories and personas
  • Sitemaps and card sorting
  • Wireframes
  • Low, mid, and high level prototypes
  • usability testing
  • UI design 

Research & Anylasis
Meet Kyle and Aylssa

Meet Kyle and Aylssa

User Personas

Based on the user interviews and surveys conducted during the research phase, two user personas were created to define Inklover's core audience. 

  • We believe that by creating a mobile app that connects tattoo enthusiests with skilled tattoo artists for Kyle, we will achieve helping Kyle find his tattoo masterpiece. 
  • We believe that by creating a way for tattoo clients to varify and gain insite into professional tattoo shops for Aylssa, we will achieve guiding Aylssa's journey to a worry free tattoo experience.

The personas helped to guide the user journeys and establish key features that would fuel the momentum for Inklover.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.

Mapping out important user goals

  • The Inklover user journeys were based off surveys by tattoo enthusiests
  • The journeys represent key goals and needs as defined by users
  • Wireframes and prototypes were designed with the user journeys at the forefront

Inklover User Journey 

Inklover User Journey 

Card Sorting

I decided on the main categories of Inklover with a Card Sorting session. Based on the card sorting results, the importance seemed focused on searching/filtering tattoo designs and artists.

Guiding Questions:

  •  An open sorting method was used

  • 6 participants took a median time of 1m 27s to complete

  • I decided to eliminate the extra homepage screen and integrate it into a news feed. This allowed users to navigate the screen based on what they already know from other popular social media apps. 

Low Fidelity Wireframes

Low Fidelity Wireframes

Sketches

I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.

  • My sketches start out with a mission in mind
  • The mission is the journey the user will take to complete a goal
  • The goal is selected to satisify a need or desire presented by the user
  • These low fidelity wireframes help give a presence to the process and allow everyone on my team to see my vision

Mid Fidelity Wireframes

Mid Fidelity Wireframes

Mid Fidelity Wireframes

At the beginning of my design process I created wireframes for testing purposes.

  • From the low fidelity wireframes I created cleaner, simple digital examples of each page
  • Balsamiq was used in the creation process
  • Many iterations were conducted based on additional user testing and feedback

User Testing

Example

Before launching the product, I did a testing round in order to reveal possible usability problems.

Guiding Questions

  • What were you aiming to find out with the user tests?
  • At which phase of the project did you test?
  • Who were the test subjects? Did they meet the target group?
  • What method did you use for testing? (Remote, moderated, etc?)
  • What user insights did you get from the tests?
  • How these user insights impacted the design or the next version?

High Fidelity Wireframes

High Fidelity Wireframes

High Fidelity Wireframes

The evolution of my wireframes undergo many different iterations in order to reach a more well rounded design.

  • The high fidelity wireframes I created in Balsamiq were developed into a clickable prototype using Indesign
  • This step allows for more in depth feedback from user testing and trouble shooting 
  • This is where errors in navigation were able to be recongnized and revamped 

Inklover (Appointment Screen)

Inklover (Appointment Screen)

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.

Design Techniques

  • As a visual artist, color theory is essential when designing for inspiration and catching the attention of the user
  • Simplicity is key in my designs
  • Functionality is always at the forefront
  • Adobe XD , Sketch, Balsamiq, Adobe Illustrator, and InDesign were used to create Inklover
  • Creativity seals the deal! I love the chance to incorporate my original designs and illustrations in my work while maintaining a clean, balanced look

"The creative process is just as important as the final outcome."

Every new challenge is an opportunity for growth

  • One of the greatest struggles with Inklover was designing the appointment page with functional usablity
  • A few key issues to address included alerting artists of requested appointments, allowing artists the ease of customizing their schedules, and giving shops the flexiblity to approve or deny appointment requests immediatley 

Being aware means awknologing faults and striving to discover a better, easier way to make it happen.

50+
Iterations
72
Screens
100%
User Focused
100
cups of coffee
"I like this page at the helpful text you have...it's a really simple and clean page that is straightforward. "
Inklover User Comment