KFT App Redesign

Reinventing the old with the new

Sophia Ng

ROLES

UX Designer, UX Researcher, Co-lead

MEMBERS

Pranav Saboo (Co-Lead), Miranda Ma (Designer), Allison Oh (Designer), & Sara Lin (Designer)

DURATION

8 weeks

TOOLS

Figma, Figjam

PROBLEM

The KFT app holds a lot of existing issues relating to the overall user experience (such as confusing organization and navigation)

CHALLENGE

The main challenge for this project was determining what parts of the application to redesign so that the app would be more efficient and functional

SOLUTION

Redesigning the information architecture and cleaning up the original design while maintaining original design elements

What it looks like now…

A quick analysis of the current KFT interface and some problems to address

so, that brings us to this… ⤵️

 How can we make the app less challenging for users?

 

Competitive Analysis

As part of our initial research, our team focused on identifying 3 main competitors including food & beverage applications

Focusing largely on the user experience for Starbucks, we were able to curate action questions based on organization, navigation, originality, features, and usability to further our research process

 

Questions to consider

Coming up with these guiding questions helped our team establish our main goal for this project–work on improving the current KFT app’s interface to design an application that was more efficiently organized

 

Affinity Mapping

After conducting surveys and interviews, our team organized design assets through card-sorting activities focusing largely on grouping application functions into: must-haves, should-have, could-have, and should-not-have categories

This activity helped create user personas based common pain points

 

User Personas

Our team created user personas based on interviews to reflect actual users that have both used the app and also want to learn more about the app. These personas highlight goals such as being able to easily order drinks and frustrations regarding confusing navigation that inspired low fidelity wireframes

 

Design Language

We wanted to rebrand KFT using softer colors and sans serif fonts while still maintaining the persona that the company has created to reimagine the KFT app as more modern, minimalistic, & clean

**we also used different fonts because licensed fonts were costly**

 

Info Architecture

As part of our team’s initiative to organize the KFT app, we also sought out ways to re-navigate pages such as home, rewards, menu, locations, and ordering through a bottom bar navigation

This exercise set a foundation for how the app would be laid so initial design framework was easier

 

Wireframes

After initial research, our team designed sets of designs targeting each section of the application. This strategy helped us to identify areas that we could work on for our final prototypes to provide the best solutions to the central problem.

1. Profile & Home

We tried implementing both a floating navigation bar and a stationary navigation bar. Because we decided to go with a standard navigation bar, everything from the hamburger menu would be condensed into the profile page

From the homepage, we focused on rewards accessible as well as the normal recommended items that the KFT app already displays

 
 

2. Menu

The menu’s main function was for users to browse food and beverages, so we tried to make this process more efficient by having the food & beverages tabs on the same pages.

We also added search and filter capabilities which the KFT app previously did not have, but users expressed a desire for it

 

3. Ordering & Customizing

This concept made the overall process for ordering more interactive and informative for users that were looking to read into the ingredients that make up the drink and how to customize their food & beverages

 

we thought we were ready for hi-fis…

here’s where it gets interesting.

we actually made two different high fidelity prototypes

First interface development

The first set of high fidelity prototypes that our team designed were intended to match KFT’s natural brand and design language, so the following designs are more colorful and embody a stronger brand personality

 
 
 
 

Final interface development

In our final set of high fidelity prototypes, we decided to completely invert color from our original designs and opted for a white, minimalistic, and modern approach to build on KFT’s current brand personality while focusing on user pain points

1. Log in → Home page

In this design iteration, our team focused on giving users a better experience while navigating the application by using color as a way to guide the user towards decision making

This section of the redesign includes logging in, signing up, and the home page where users are prompted to change the location of KFT restaurants or pick up and delivery methods

2. Rewards

From user interviews and surveys, we were able to conclude that users wanted to view more rewards. Users are able to view and toggle different rewards that they’ve earned as well as learn more about what the status of their reward means.

Having a quick FAQ guide and a visual aid incentivizes users to use the rewards section of the application more and creates a seamless experience through rewards discovery

3. Profile Pages

The profile pages are sections taken from the original hamburger menu and placed under the user’s profile and name. Our team opted to use a navigation bar instead of continuing to use the hamburger menu because the information inside the hamburger menu could be condensed

The navigation bar itself only features the most important aspects of the app such as ordering, home, scan to pay, rewards, and profile.

4. Beverages → Food

One of the biggest changes from the original hi-fi design was through the menu for beverages and food. Our team realized that compiling each category into cards would be more visually receptive to users, especially those that are casually browsing to order.

Users can also search for specific drinks and filter through dietary restrictions and scroll through different types that KFT provides.

5. Ordering

Instead of a straight forward vertical scroll, this feature allows users to interact more with the drink customization process. Users are able to rotate the item of customization by clicking on the next item and selecting what element to change, and users are able to better understand the flow of ordering on the app

Here are 3 key goals I have for this project:

While this project was very insightful, it was a redesign that I completed, and thus I wanted to point out key goals if this project were to be implemented.

  1. Improve satisfaction from navigating by 25%

  2. Integrate full transparency from pick-up/delivery until orders are fulfilled

  3. Remedy shopping conversion rates by 10%

Personal Reflection 💭

This was the first project that I led, and it has been both challenging, yet rewarding. As a project co-lead I was in charge of organizing meetings while also completing my own design responsibilities. I got the idea to redesign the KFT app because I had it downloaded on my phone after I earned a reward, but the app’s interface and confusing navigation made it hard for me to continue using the application

By far, the most complicated part of the design process was changing the hi-fi interfaces. On one hand, we had designed an app that was very similar in personality to the original KFT app, however our purpose was creating an application that was different from the original app. We chose to branch out because it allowed our team to explore different creative paths that would lead to our final goal completion