top of page
toppart-mockup.png

KETOBITE Mobile App and Website

Project Overview

The Product

KetoBite is a mobile app and website that offers affordable and testy option for the people who follow ketogenic lifestyle.

The Problem

Not having available option for the people who follow ketogenic lifestyle.

The Goal

The product helps to find the affordable, tastier version of their preferred food and also offer customization and online service to the customers.

My Role & Resposibilities

UX designer for designing the website from ideation to conception.

  • Conducting interviews

  • Paper and digital wireframing

  • Low and high fidelity prototyping

  • Conducting usability studies

  • Iterating on designs

  • Responsive design.

Design Process
process_edited.png
Target Audiance
 

Role (groups of people with similar goal)

  • People who can not find the right place to eat.

  • People who are lookin for different option for food.

  • People who are looking for some affordable option.

Demographics (gender, age, occupation, marital status, income)

  • All age group people.

  • People from different occupation.

  • Urban area.

  • All Income group.

Psychographics (personality, value, attitude, interest, lifestyle)

  • Personality & attitude

  • Energetic

  • Youthful

  • Hard working.

Values

  • Health conscious.

  • Fit and active.

Lifestyle

  • Healthy lifestyle.

  • Engaging and active lifestyle.

Persona

Problem statement:

Silvia is a student who needs a place where she can find her preferred option to eat so that she does not need to carry her own food all the time.

Capture.JPG
User Journey Map

 I created a user journey map of Silvia’s experience using the site to help identify possible pain points and improvement opportunities.

journey-map.png
SiteMap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. 

 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

sitemap.png
Wireframes
Untitled-1.png
webwireframe.png
High-fidelity Mockup
home redesign.png
redesign2.png
redesign3.png
redesign4.png
redesign12.png
webhome – 1.png
REDESIGN – 1 1.png
REDESIGN – 2.png
redesign – -2.png
redesign 5.png
redesign6.png
redesign 10.png
redesign7.png
redesign13.png
REDESIGN – 3.png
REDESIGN.png
redesign – 4.png
redesign-1.png
redesign – -3.png
Accessibility Considerations
  • I designed the site with alt text available on each page for screen reader access.

  • I used accessible color contrast.

  • I used headings with different-sized text for a clear visual hierarchy.

webmockup.png
bottom of page