THE IDEA:

A mobile tattoo shop that comes to your location for your appointment. All planning, designing, payments, and research happens through an app. No need to leave your house for numerous appointments or settle for an artist that you are unhappy with just becasue they are close.

TO DO LIST:

  • Develop a brand that encompasses the feel of a classic tattoo shop mixed with the modern idea of a mobile shop with all interfacing being done remotely through an app.
  • Create an organized and simple site map that focuses on the user experience with the least amount of steps possible, making the process, quick and easy.
  • Build wireframes to mimick the simplicity of the site map by only showing the user what they need to see based on what step of the process they are on.
  • Design a style that follows the branding but allows the user to quickly determine what they need to do on each page through consistency and hierarchy.

    • THE BRANDING:

    The main font choice and the hand done illustration encapsulates the classic tattoo shop feel while the bright contrasting colors and the sans serif secondary font covers the modern feel of the app. The octopus was to symbolize the ink of the tattoo while the steering wheel represents the bus.

    THE PLANNING:

    When originally going through the sitemap I focused on simplicity. It wasn't until the wireframe stage that I realized the complexity of the app. While this gave me a starting point, it definitely is not the structure of the final project. There was a lot that I didn't know I would need until I got there in the wireframe or the design.

    THE SKETCHES:

    After lots of wireframe revisions, this was the final set I came up with prior to the design stage. Though this was a lot more complex than originally planned for, the focus was still on keeping it simple for the user. One example was to only show the user the options that apply to them, i.e. if their project is still in progress, they don't need any of the appointment options until the design is approved. Something that a user can easily and quickly become familiar with and access their needed information within just a few clicks. View the wireframe prototype.

    THE DESIGNS:

    The first step of the design process was to develop a consistency first with the branding then with the elements. All the buttons, input forms, icons and tab systems have the same style making it easy for the user to recognize each element. Along with the sitemap and wireframes, the designs are not exact replicas of the wireframes. One major change was the menu setup. I was able to group more pages into the settings section which cut down on the amount of menu items. This allowed for a fixed menu at the bottom of every page which gives the user quick access to the things that were most important.

    THE PROTOTYPE:

    Click through the prototype below to check out the final results. You can either be an existing user with projects already in the making or you can go through the process of setting up a new project. Enjoy!