The “NaiLaB” Nail App Project

Good design should solve a problem. No more are the days of going to the nail salon and choosing a color that you later regret. NaiLaB gives you the chance to try colors on, before you head to the salon. Below I outline my process, provide a video detailing of the lo-fi and hi-fi wire-frames, a link so you can check out the prototypes, and a step by step visual walk-through of each lo-fi and hi-fi frame. For this particular project, I decided to go through 2 versions of hi-fi wireframes as I perfected the UI. I’m excited for you to see my journey and how I received the final draft below.

Methodology:

The problem: Every time I go to the nail salon I am always very indecisive about what color to choose. I came up with an app idea in which you can upload a picture of your nails and try out different colors.

I encountered several different problems during the conception of the wireframes:

I was missing a splash screen/loading page. Any good app has a splash screen to welcome the user.
Those who don’t have an account should be able to sign up - and I wanted to show the distinction between each screen, along with your typical “log in with facebook” or “log in with google” prompts.
The interface needed cleaning up. I wanted to beautify the final interface by making sure the final interface was sleek and navigable while keeping the household features that I loved from the previous prototypes.
The user should at any point be able to view their “gallery”. My original lo-fi wireframes didn’t conceive of a back button. But I wanted to add that in because I always want my users to feel like they can go back at any time and not be trapped on any one particular screen.
The user should never feel “trapped” in a decision. They should always be able to “go back” and choose a different color.
If the user chooses to “skip” to their gallery, they should have the option to go back to the main color selection screen
I needed to include a “join” and “forgot your password” option in hi-fi prototype which was not present in the lo-fi prototype. I went in and added in because I quickly realized how needed, and regular it is.

Who I worked with: I completed this project solo.

What tools I used: I used Adobe XD to create the wireframes and prototypes for the app. I used Illustrator and Photoshop to stage the images for each screen. I used QuickTime to screen capture my progress.

Discovery phases: When thinking of a step so simple such as the “join” and the “forgot your password” feature, I realized how important it is to add in those features because they are standard. I thought about the Kano design model, specifically how users get used to features on an app/website. When the feature is not available, it diminishes the users comfortability of the app. When the feature is available, it doesn’t add to the users’ comfortability, but it doesn’t take anything away. Most importantly, we want to create apps that maintain trust and ease of use.

A video walk-through:

I used Adobe XD to prototype my wireframes and then captured a screen-recording of how I would walk-through the app if a friend of mine wanted to try on pink nail polishes. As mentioned, I went through 3 wireframe drafts for this particular project, and documented my journey for all wireframes. If you would like to play around with the wireframes yourself, please access the final draft hi-fi prototype here. And please access the lo-fi prototype here.

NaiLaB Hi-fi Wireframe Walk-through

NaiLaB Lo-fi Wireframe Walk-through

NaiLaB Final Hi-fi Wireframe Walk-through

Wireframes walk-through:

Lo-fi wireframes

Frame 00

I created a preliminary swatch and a log-in page with the option to sign up.

Frame 01

Once you log-in/sign-up, you will be prompted to upload a current picture of your nails.

Frame 02

After you click the “upload” button you will be prompted to look at and choose a color. I wanted to illustrate how I envisioned the app’s transition by sliding up.

Frame 03

Here is the full screen where you would look at and choose a color family. You will also see all colors available, unfiltered.

Frame 04

Once you make a selection on the color family, you will be brought to the entire color family to view all colors related. For example: if you choose “pink” you will see many different selections of “pink” to choose from. I wanted to illustrate how I envisioned the app’s transition by sliding left.

Frame 05

Here is the full screen where you would look at and choose a shade of “pink”. You also have the option to go back to the main color page, or to view your “gallery” of all your favorite color selections.

Frame 06

Once you choose a shade, you will see the shade on your nails. You can go back and choose a different shade, view your gallery of favorite color selections, or add your current selection to your gallery.