Case Study

Kitch — The App

The Brief

Kitch is a hospital food delivery service that stands out from its competitors by offering a high quality food focused on what is important for patient recovery and the health of hospital staff. The long list of food restrictions available for input is what makes Kitch so unique.

Some challenges were noticed since the start of this project. By being a new service that just started running, we had no real user feedback on their services. Also, our target audience was pretty wide, consisting in three subgroups, patients, patient families, and hospital staff. Regarding to patients and their families, we target well educated, medium to high tech savvy, and high income people.

We understood the core values of Kitch as health, thoughtfulness, comfort, and premium service. It was imperative that the user felt positive, comfortable, and happy while using the app. Kitch would be a relief during a hard period of patients lives. A moment of happiness during a difficult time adding convenience and relief to the user experience.

The most important features of this app were ordering (all steps, including the menu) and recommendation, considered in scope for the project. Secondary features were sign in and track location, considered out of scope.

The success of this project was relying on our ability to deliver a simple and new smart menu for the app, and presenting a compelling visual identity for the users.

The Team

Our team was composed by 4 people, 2 UI design students and 2 UX design students. For the UX designers the task was to conduct research and interviews to be used for developing the app's wireframes. The UI designers had as a mission to adapt the current visual identity of the website and printed materials into the app, but also add a brush of color. That is the process that will be disclosed in this case study.

Design Process

Defining the Why?

The motivating reason for people to download and use this app is very clear: to have a premium service, to give an upgrade on food services being offered by hospitals. So premium became the main keyword to guide the design decisions of this project, but before that it was important to define what is premium for this particular targeted audience.

After research and team brainstorming we came to the conclusion that premium here meant extra care, going further to deliver a completely new experience to costumers, giving them not only what they wanted, but also what they needed.

Inception Sheet and Mood Board

The first Mood Boards presented were completely new and different from the existing visual identity of the website, as requested by the client. They focused on colourful, positive, and warm ideas, and had colours such as orange and green as its main representatives.

At this point, however, the client chose to keep their existing visual identity instead of creating a new one for the app. With that in mind a new set of design directions were put together to guide the design process. The main colours were now purple and gold, the mood should be classic, but friendly, premium, but approachable. To convey that the shapes should be rounded and thin, and the space white and clean. A new mood board was put together.

Iconography

One aspect still needed to be taken in consideration, the colourful touch requested by the client. The best way to give a brush of colour without disturbing the existing visual identity, or making the app too heavy and overwhelming, was using icons. The app would already need icons to represent the list of food restrictions available, so the colour would make it more recognizable and consistent throughout the pages.

The first idea came as tags. Each food restriction would have a specific color tag that would be used every time a dish was recommended for a user with that restriction. But we quickly realized with 14 food restrictions it would be impossible for the user to memorize all colours, so the tag would have to always come with text. However, that was not going to work either, since we would need to use tags in really small sizes where it would be impossible to read. Then, a set of icons was created taking in consideration the main reason for the food restrictions to be so important — extra care. With that in mind, friendly and cheerful icons were designed to represent each restriction, and a colour was also designated for them. The first set of icons looked a little heavy, so some adjustments were made so they could fit the clean and light overall feel of the app.

Typefaces

The typefaces for this project had the job of conveying the premium part of the design. For the headings a clean, elegant typeface was chosen, Songti SC. This is a serif typeface with a small x-height, and different stroke's thickness, two things that make it look elegant. At the same time this typeface is very rounded specially in the "a", what makes it also friendly and kind. For the body a much simpler typeface was chosen, Avenir. Avenir is a san-serif typeface really simple and rounded, it has thin lines and clean strokes what makes it easy to read and forms a nice harmonic pair with Songti SC.

Final Product

For the final product to remain light and clean even using such a strong colour as purple, we decided to use white for all the app background. Purple was used on the fixed header, and buttons, and a darker shade on the body texts. Gold colour was used on the headings, symbols, and lines, giving a shinning touch on the pages.

The high-fidelity prototype can be viewed on this link.