GlamScan

Multiple Owners
ā€¢
An augmented reality application that uses image superposition over hand nails to change shape, color, art, and length. Developed in team collaboration with Jonajo Consulting.

Phase I āŽÆ Understanding

Competitors
To kick-start this project we did a benchmarking exercise or competitive analysis. The objective is to understand the strengths and weaknesses of possible competition in the industry. This was also a good start point to see the technological capabilities of augmented reality on applications that focus on nails.
Who are the users?

Before jumping on the design board we needed to understand who we are designing and building this application for. We created an open survey to filter down people with the following criteria:Ā 

- People that get their nails done either weekly or bi-weekly.

- People that use social media to find inspiration for nail designs.

After we created a small database of potential users we interviewed four to create our personas. First, we made a table summary of their responses in six different categories: frequency of nail upkeep, pain points, design preference, do they do it themselves or at a salon, inspiration source, and desired feature. With this table we made a dimension plotting to analyze clusters of possible personas.
We found that all users have the same pain point: searching for specific nail designs is not easy. Users have different tastes in nail designs, if we want to attract users from this industry we must include both simple and complex options. The applications our users go-to for inspiration is Instagram and Pinterest, the latter being the primary source.Ā 

Users are very interested in changing the nail shape using augmented reality. As well as importing their designs or being able to edit an existing design.

Possible opportunities are to develop technology for uploading nail art that can be used inside the application with augmented reality. Linking their preferred social media channels to make sharing faster. Letting users upload photos of their own to save as a reference. Have an internal team analyzing the top photos uploaded by users to create nail designs inspired by those.Ā 
Phase 2 - Design

Information Architecture
After a brainstorming session on what features we wanted to include on our app that would spark our user's interest, we decided to focus on our augmented reality feature and an effective search engine.Ā 

For our AR we wanted to do more than change nail color, we want our users to be able to change their nail shape, nail length, and apply different complex nail designs. The goal is that the user will like what they see on the screen and later go to the salon to make it a reality.Ā 

The search engine would replace Pinterest as the go-to place to look for nail inspiration. Using the categories for our AR feature we can create a database with different categories that our users will enjoy navigating. Furthermore, we wanted to develop a feature that will allow them to make folders and save designs for future use.Ā 
Tree Test Analysis
Ā After making the tree testing, we realized this method was not the most adequate for our application. Tree testing goal is to help the user find content, but our original goal was to find how the user interacts with the main hand scan feature. Even Though 50% of the test was completed. We need to make another test using low fidelity wireframing to see how the user will interact with our main feature.Ā 

Wireframes
Using our Information Architecture as a guide, we created a set of low-fidelity wireframes for our tests. The goal was to set the skeleton of the app by showing the screens that users will be navigating.Ā 
Tests
We wanted to test if they could use filters on the search. If they can understand the concept of collections as folders by moving images or creating a new one. We also wanted to introduce the first stages of the AR filters and see if they could identify what they do.Ā 
Test #1Ā 

Ā  Ā 1. Task Name: Searching by color
The button ā€œSee more filtersā€ wasnā€™t found by one of the testers. Letā€™s see if by adding contrast to the wireframe the success rate rises from 80% to 100%.Ā 

Ā  Ā 2. Task Name:Ā Ā Using Augmented Reality
The success rate of 100% due to similarities with popular apps, feedback from users was to add labels to the nail feature buttons.Ā 

Ā  Ā 3. Task Name: Using the Gallery
Out of 3, only one user found this with the straight forward path. The other users navigated to more than 13 screens, one got lost while the other succeeded after a second attempt.
We need to make the menu for "select" easy to find and the ability to switch between galleries (Snap/Liked/Collection) more straightforward.Ā 
We should change the landing page for the gallery.

Ā  Ā 4. Task Name: New Collection
One user got lost trying to create a new collection, our younger users managed to find the flow in 5 seconds.Ā 
We need to make the ā€œaddā€ new collection more noticeable for our mature persona.

Ā  Ā 5. Task Name:Ā Ā Hand Scanned Photos
100% success rate. They knew how to find the gallery they wanted at this point, being the last question they got a chance to get familiar with the app. I wonder what would happen if this question was at the beginning of the test.Ā 
We made an update to our wireframes based on the results of the test and created a second test. On this test, we wanted to learn about the intention of the user. We made tasks with multiple possible options as the correct answer followed by a question such as: Why did you select that filter? We wanted to test if the update to the gallery was efficient, we also changed our menu and wanted to see if this time it was easier to create a new collection and move images.Ā 

Test #2
Ā  Ā 1. Task Name: Apply filters to your hand
Nail AR feature success rate or 100%. Doesnā€™t need further updates, the user knows how to navigate, their favorite option to apply is ā€œColorā€.Ā 

Ā  Ā 2. Task Name: Your Photos
Success of 100% again, each user followed a different path but finished correctly. 4 out of 5 participants said the word ā€œSnapsā€ resonates with their understanding that itā€™s a picture saved from the AR feature. I think we should keep the word. Maybe adding a ā“˜ to the label to reinforce the meaning in case it's necessary.

Ā  Ā 3. Task Name: Filters on Search
One participant mentioned that they like all the filters, finding them useful to narrow down their choices faster. However, one participant got lost and couldnā€™t find the filters.Ā 

On the previous test, we had the same problem with a different person, and we decided to leave the option always visible, however, that still didnā€™t get a 100% success rate. On the new wireframe, we should make filters stand out more. Maybe suppress the visible category labels, I noticed that some users clicked on them first.Ā 

Ā  Ā 4. Task Name: New Collection
4 users found how to make a new collection without a problem, one of them mentioned that they were looking for a ā€œ+ā€ icon, like on our previous test. One user got lost, this is similar to the previous test, where one user couldn't finish this task.Ā 

The location of the feature didnā€™t change on our second test. We removed the ā€œ+ā€ and added a menu ā€œ...ā€, I think we should leave it as it is for now because the user that gave up the task finished task #5 and mentioned that ā€œNow I think I have itĀ šŸ˜€. It is already easier to use.ā€ which means that after a couple of minutes using the app she got familiar with the navigation.Ā 

Feedback from the participant no. 5 who had a hard time finding ā€œadd newā€:Ā It was not easy for me to find. It would be a great idea to have a kind of ā€go-toā€ button in the menu at the bottom of the screen. Here I could start and find everything. Then I always know where to start, and everything is placed in the same place.

While a ā€œgo-toā€ button sounds like a good idea, I think it would be the ā€œ...ā€ dot menu on the top right corner. Letā€™s review the wireframes to make this button is constantly easy to find.Ā 

Ā  Ā 5. Task Name: Moving images
All users completed the task but we got feedback for an extra feature:
Long tap on one image triggers ā€œselectionā€ mode.
ConclusionsĀ 
Ā Keeping the word snap for photos taken with the AR feature. Consider adding a tooltip.
Remove quick filters or shortcut labels, since they create confusion.Ā 
Keeping navigation consistent. (Icons and menus on the same side).Ā 
Adding the ability to move a photo when you see the photo details.
Define for developers which screen allows hand gestures (swiping, scrolling).

Phase 3 -Ā Most Viable Product
There is always a time when stakeholders and developers will ask for an MVP. After we did our wireframe testing it was decided that we will only focus on the augmented reality feature for our application. We reached a compromise to also allow the user to save their creations.Ā 

User flows
Next Step: User Interface, High Fidelity Prototype and Usability Testing
this is an ongoing project...
GlamScan
Published:

GlamScan

An augmented reality application that uses image superposition over hand nails to change shape, color, art, and length.

Published:

Tools

Creative Fields