Madi Portfolio

Overview

Nani is an app that connects beauty service providers to their customers with a seamless experience. Nani users can browse popular and personally recommended providers and services through beautiful profiles and reviews.

To book a service, just have a look at your own calendar and book with a specialist on Nani. You can even message a specialist to ask a question through Nani, then make the appointment when you are convinced.

Gig economy apps are popular right now and Nani is perfect to fill the missing gap for beauty services. Stop scrolling through thousands of Yelp and Google reviews and let Nani suggest the perfect services based off your own profile.

Project Brief

I was scouted to join this team as the lead/only designer for their beauty startup idea. Originally, I was given some project scoping and brief explanation of what the team had envisioned for the style and direction of the app as well as the required features.

Now that I had a list of features and requirements, I had to complete the vision and functionally map of the app, including the branding. As the sole designer, I was prepared to wear many hats to complete this app before passing it on to our software developer.

After much feedback and critiquing from the rest of the team, we were able to agree on the complete branding of the app, then I was able to start turning out features and functionality in stages. See below the roadmap plan of deliverables.

Personas

As the UX designer, it was important to tell a story about our users and differentiate between our two main user groups. Just listing characteristics such as millennial and gen z, mostly female, young adults, love Apple products, does not make a good user persona.

It is difficult to design when you do not truly understand the audience, so I created Kimberly, our beauty seeker persona, taking those characteristics and giving them more life. This also helped to pinpoint our user flows.

For the second persona, I created Jennifer to fill the role as our beauty specialists. These users are not only identified during the initial onboarding process of the app, but they have access to different features and have more complicated needs.

Jennifer is going to need to see analytics and have a higher level of customization to advertise her business as this will be a source of income for her.

Benchmarking

I started with project scoping and building a complete "sitemap" of the entire app and placing the features into categories. Although, I chose not to make a digital version of this sitemap because this image was very clear, this exercise determined how I laid out the main app navigation and determined the deliverables.

Next, I looked at apps that were either beauty related or noted in the project brief. Airbnb, Yelp, and Uber were suggested for aesthetics and functionality purposes. I personally was a fan out the Airbnb style and navigation.

I noticed that many apps that focused on beauty used pink color schemes and shades that matched "feminine" aesthetics.

Process

For this app, we wanted to create minimal and simple layouts that also had a feeling of elegance. For colors, we did not want something that was too feminine, however, the app needed to be trendy at the same time. I was given specific instruction not to focus on the color pink because it was too common and too popular amongst other beauty services.

This process started with some rough sketches of basic ideas for the main explore screen, the first page that the user will lay eyes on. Next, I started to try different ideas with basic digital prototypes. At the same time, I was also exploring branding ideas that had been undecided and would not be finalized into much later in the process.

I added text underneath all the navigation icons for accessibility purposes.

Inspiration for this project came from exploring other brands and beauty products with bright color palettes.

The original direction was to steer more towards shades of green and more “natural” colors, but that did not necessarily align with our use case.

Nani needed to be more sophisticated and elegant to look like an upscale service that could be trusted and respected by users to book services. I learned over time that I needed to go much bolder.

First Iteration

This was the first deliverable proposal that I presented to the team. It included the explore screen and the search detail function, which was a combination of elements from my first digital prototypes. My first idea for branding was this peach gradient and a soft/light purple color, which I believed looked young and trendy. The color was inspired by a brand of very popular Korean cosmetics.

Playfair Display is a very popular font for 2019 and by this time, although I was going for elegance with a serif font, I was tired of it. This needed a branding revamp.

Layout Change/Upgrade

After the first branding proposal, the team determined that the layout could be improved. On the left, is the sketch from the meeting where the new ideas were described and later I made other major changes as well.

First, we made the search bar smaller, but more prominent, and I made the search icon into a proper button. The idea was to make it easier to search as that would be the most popular feature. Also, I added quick filter options later.

Next, we changed the layout to have different scrolling options, so the app can recommend more personal services for the user at the top. This also included adding the user’s name to the title for that personal touch.

We also decided to keep exploring branding colors, although purple was determined the most sophisticated by the team as a whole.

AB Testing

A little non-traditional, but honestly a great way to reach a wide audience base especially for a freelance project. I used an instagram poll on my story to do some AB testing for color variations. However, I gave no context at all in this survey, just wanted to see gut reactions to the style. The audience did not know what the AB test was for. I wanted the most unbiased opinion possible, but in the future I would suggest providing more context with at least an overview of the app functions. We had 32 participants in each round, 2 rounds total. I did not want to overwhelm the audience by giving too many choices and then hurting the chance of getting responses.

Option 2 reads a little too much like eggplant to be elegant and modern, but that is my subjective opinion that I did not share. Also since it has a an undertone of red, the hue looks more pink and therefore slightly more feminine, which was explicitly not what the client wanted. Interesting enough, followers that were designers (4 participants) picked option 1 every time regardless. Without context, I can see why option 2 won the AB test by the majority. However, the client still wanted to go with option 1, so we did regardless.

New

By changing the primary branding color, not only did we align with our vision and branding, but we drastically improved accessibility and overall aesthetic.

Old

The past purple shade is nice, but must be used in a different context, maybe a secondary or tertiary color and never for informational text.

Logo

My original inspiration for the logo came from other services that had beautiful lettermark styles. The team was on board, so I focused entirely on lettermarks and used that typeface to guide the rest of the branding. At this point, we were also working on finalizing the official brand colors.

Branding

For the next branding proposal, I delivered this high quality image of the explore screen and quick filter detail screen. I utilized the dark purple shade and my favorite typeface from the logo iterations.

Notably, I also added a voice recognition option for searching after participating in the Adobe XD daily design challenge and for accessibility purposes. Major layout changes were also showcased for the first time and the vision completed.

The rest of the project is built with these basic brand guidelines and style as the above proposal. Here is also where I showcased the first lettermark logo after the official name release.

I thought it was also important to add a Hawaiian phrase under the logo, which means “focused on beauty”, the new business tagline. This reinforces the authenticity and emotional meaning of the brand, but also makes a differentiation from the other meaning of nani which means “what” in Japanese. It also really reminded me of anime and that was not the image that the app is supposed to convey.

With these adjustments, the Nani concept and features were ready to be built out.

Onboarding

After we have a beautiful basic "get started" screen, the app needed to have an extensive onboarding process that not only differentiated the beauty seekers from the beauty specialists, but we also needed to connect social media and create custom user profiles.

The idea is that the app can keep track of categories that the user either likes or specializes in and can then recommend services based off the preferences.

The initial sketches of the onboarding process include an option to select your user base right off the bat and then allow a user to create a profile or sign in from social media. If you signed in to the app via your social media, then the app will automatically connect it.

Next, I wanted a visual element or status bar to show the user where they were in the onboarding process and to keep them engaged. I decided to use dot icons to show four major steps, which I kept simple with only 4 steps.

I also wanted the category selection to be super simple and highlighted when options were chosen. Finally, we have all the navigation on the bottom left corner for easy thumb/mobile access.

Wireframes

I had originally started to explore the onboarding process ahead of the official branding decisions. I got ahead of myself, but I wanted to focus more on functionality before visual elements.

The first iteration of the onboarding process was too colorful and confusing, so I toned it down. However, the next version was too dull and simple that it looked incomplete.

I struggled to incorporate social media into the login process as it was difficult to find examples for inspiration. There was a bit of an assumption that the phone could recognize the social media assumed to be already signed in from another app, but this will be a problem for the software developer to solve later when she looks into how the API actually works.

In these completed wireframes, you can see both the option to create an account manually and or to connect Instagram to login with a dropdown.

This high fidelity prototype also includes special mirco interactions such as the keyboard sliding up when you start typing in any from or search bar.

It is also important to note that the user can turn on or off social media connections, but it will pre-populate their profile photo data with their social media photo. This can be changed directly in the profile creation option or updated later in profile settings.

I also included some functionality for the search bar detail and feature selection for the explore screen in the main app “home”.

Deliverable 2

For the presentation back to the team for deliverable, I made a video of the finished onboarding/login process.

Complete with typing, transitions, and the Adobe XD auto animate feature, this prototype can be displayed on an iPhone and look as if the user is actually using Nani.

Although I am not entirely satisfied with the opening "Get Started" screen, that is a simple fix later in the process.

Another significant change in the screens include adding 'next" to the onboarding navigation instead of just a highlighted arrow button. Not only is it better accessibility wise, but it is more centered and helps the flow of the onboarding steps by encouraging the users.

0:00

Search Features

In the original sticky note sitemap, I had mapped out all of the features for Nani, including the many search functionalities. The next step was to create the user flow for the app, including how the search bar will work.

Do we need to have specific navigation custom to the search bar? How do the quick filters work compared to the category, rating filters? How can a user customize and set filters?

All of the questions would need solutions, but first we know that they need to lead to profile..

Sketching

To create the features for the search bar, I did decide to add another level of navigation that would be specifically for searching and appear exclusively in the search action. I chose to overlay our secondary peach gradient over the screen during the search to fully focus user attention to the task of searching. This also helps to differentiate the search navigation.

I started by sketching out a single screen for each search feature such as the map, voice recognition, category filter, ratings filter, and the basic search. Now that I knew how each screen would work, I had to design screens for the search results.

My team and our future clients will need the context of multiple screens to understand the search functionality and flow.

Basic Search

Here are the digital prototype/wireframes of the search features. Most functions take place after the user has touched the search bar and activated the new search navigation.

Nani’s user base will be using the search functionality the most often compared to all other Nani features, so it was most important that Nani allows for several different searching options, including accessibility.

The voice recognition search was inspired by the Adobe XD Daily UI Challenge! This can be built out in Adobe XD to show off the functionality and I will add it to the clickable finished prototype. Be sure to have your microphone activated.

Map Search Functionality

Voice Search Functionality

Search by Category Functionality

Search by Rating Functionality

In-Progress

Due to covid 19, the nani team project has been disbanded and unfortunately did not get to finish development. However, we are still proud of the concept and all the energy put into this project! Happy to report that we did enter into an incubation startup competition with Northeastern University and won fourth! Not bad!

Lessons Learned

Based off new knowledge and experience, this section explores elements of the project that I would now do differently or improve upon. My most important lesson would be visual design changes, particularly the readability of the app itself. I used a light gray for text, which passes WCAG AAA compliance ONLY when used for disabled states or unimportant information. However, I used it for on the navigation, the search bar, and other random places. I know now that it was wrong and will not make that mistake again. I also believe that the visually hierarchy on some screens can be drastically improved by creating a text hierarchy with a much greater ration between H1 and other titles. This would have benefited by a style guide greatly!