NUTRITION APP AND WEBSITE

Overview

Nosh and Nibble is a fictional company I created for the UI/UX course.

In addition to the website design, logo, and branding. I was responsible for administering all interviews, developing personas, user research, wireframing, journey mapping, low-fidelity, and high-fidelity prototypes. The course presentation can be viewed here.

If you would like to see my full process please read on, otherwise, feel free to skip to the high-fidelity prototype version below.

The Logo

The UI portion is the process I enjoy most and saw this as an opportunity to expand. Nosh refers to eating a snack and nibble refers to taking small bites. Good nutrition is a marathon not a race. In some cases with children the process is slow. Little bites will do big things.

UX PROCESS

USER PAIN POINTS

1

ANTIQUATED INFORMATION

There were issues with dated information. The website felt forgotten about, and many blogs were not updated for years. Some of the articles were not relevant to the issues within the section of the website.

2

CONSULTATIONS

Users also mentioned that initial consultations were expensive and could have been done over the phone or virtually.

3

TRANSPARENCY

Users mentioned taking time to sign up for services only to realize that services are not covered by insurance and the services would be an out-of-pocket cost. They felt misled and did not proceed with signing up.

MOCKUPS

Imporant Notice

Notice

The disclaimer was transformed into an important notice and paired with a terms and conditions screen. There the user would agree or disagree before signing up for the service.

Log In

HOME SCREEN

I provided a search bar to search the website. I applied design changes to the header including moving the logo to the left.

RELEVANT ARTICLE PAGES

BOOKS

I changed the page to READING. I also added an ADD TO CART button. In addition, I converted the book title to a link, which would open up a new screen to show more information in addition to a to BUY NOW option.

ACCESSIBILITY

1

High Contrast Mode

This feature makes the screen easier to read by using more distinct colors. It also provides options if the colors are too vibrant for certain users.

2

AUDIOTORY

This feature will make it easier for the deaf, users who have limited hearing, or also users with unique hearing needs to use the app to its fullest potential.

3

Button Icons

All call-to-action buttons have icons representing the action that will be taken for users with low computer literacy.

DEVICE MOCKUPS

4 Across app design

Prototypes

TAKEAWAYS

The design was crowd-pleasing by all users. Users enjoyed the vibrant colors and mentioned the palette exuded happiness and fun. The app prototype was easy to navigate and users enjoyed the prototype. Many users said they would buy from this service if it existed. The tablet and website were also successful. Many users could see potential in expanding this brand. I would love to look into making an interactive search bar for the prototype. Lastly, I do see the potential to expand Nosh and Nibble into a book series. I would love to create characters to interact with users, as I feel the addition would benefit in getting the message across to children.