App Redesign for the First German Online Canteen

Monthly exclusive details. Sign up for design tips, hot process details, and results overview. 

About the project

Smunch is B2B business – a food/tech German startup with its headquarters in Berlin. The brand has an important mission: to provide tasty lunches to hungry employees - directly in their workplaces.

Main objective

The app was redesigned because Smunch wanted to create a user-centered digital product that could match their users’ needs and provide a great overall experience – from ordering the food to receiving it. Different issues, such as non-cohesive user flows and UI, lead to shortcomings and dissatisfaction with user expectations. Therefore, there were low conversion rates no matter how many new users came onboard monthly.

Solution

With the understanding of the real user pain points and why the product was not functioning, we could recognize what we needed to fix and which features to focus on. We did a redesign of the current app with a focus on the mobile experience and with the main objective of improving the conversion rates and user experience.

Tools

User research

Design sprints

UI/UX

Design system

Interaction design

Industry

Food/tech startup

Please find a detailed Case Study of the process behind the redesign in this article.

redesign-and-better-ux

User test, surveys, workshops

Workshops: We ran stakeholder interviews and gathered all company departments in order to identify what problems they were facing as well as what should be improved.

 

Testing the old platform: There were also tests with the old platform and actual users. We equipped ourselves with extra food vouchers and a good mood as we went out to meet the real customers. We aimed to have user testing sessions with all types of user personas. We ran both live interview sessions with users and also sent out questionnaires. In order to identify the real user needs—what they liked and what they didn’t like—we carefully prepared the scenarios, questions, and hypothesizes that we needed to test and validate.

workshops

User research and User personas

user persona_1
persona_2
persona_3
persona_4
persona_5
persona_6

Design Sprints

We followed a weekly sprint schedule for five weeks until we were satisfied with the results and saw an overall refinement. As a result, there was an improvement in the way users were interacting with the product and the prototypes. During the user testing sessions, we were constantly reviewing our user goals. We also allowed the natural way the users were using the product to guide us. This phase helped considerably in building a new, logical, easy-to-use navigation system and sitemap.

design-sprints
monday

Defining weekly goals and tasks

tuesday

Invention of different solution ideas and sketches

wednesday

Choose solutions to test and validate. Prototypes.

thursday

Finalizing prototypes, questions, scenarios + running tests among colleagues

Friday

Validate and test

Wireframes and Prototypes

During the first weeks and testing sessions, we already created some wireframes and lo-fi prototypes. However, these really needed to be polished and finalized. In order to set the stable base for the next phase, we completed all of the wireframes, new components, and elements for all devices with an explanation of how they worked. 

Quick view
elements
wireframes

Polishing the designs and sitemaps

As we wanted to have a really clear picture of how the new app should function, we designed new sitemaps for all devices and revisited the user flows. We then went through most of the user cases in order to improve them.

App Sitemap mobile

Design System

Keep it simple.

Simple was the main thing we wanted our design system to be. We started by sketching and laying down the first elements, components, modules, and styles. Now we had a simple design system with all the basic elements we needed to start designing the app screens. It later turned out that this method worked particularly well, as it helped us to maintain simplicity and consistency within the app.

design-system
grid_system

Shape

Input fields and notification

form-fields
notifications

Visual Assets

Improved visual factors.

An example of this was adding more appealing, food-inspired color tones and creating a shades palette, which consisted of all of the main colors. Not only was the color improved, completely new graphic and motion elements were also designed. These consisted of  system icons, illustrations, micro animations, and animations. All of these new assets were made in order to serve the app functions. For example, giving feedback to the user, improving accessibility, and creating enough contrast.

visual-assets

Colours

colours-1
colours-2

Illustrations

icons_illustrations
pop-ups

Animations and Micro animations

New appealing login screen designs.

We completely updated the login screen design. We also updated the user flow for a user who forgets their password or who needs further help. From a UI perspective, we decided to create a welcoming animation, as the login screen is the first thing the user sees. We wanted to welcome them and also show the friendly character of the brand.

ratings-preview
loading
Reduced_open-quick-view
reduced-day-selector
Reducedmobile-navigation_hamburger

What’s new?

New top and bottom navigations.

The app navigation system was improved, not only in its look but also in organizing the most useful information and making it more visible when needed. For example “ratings” or “filter” are very important tools. They appear on the bottom navigation of the dashboard, where the user can easily apply them.

mobile_preview_12
mobile_preview_11
mobile_preview_10
mobile_preview_9

Adding character to the app

Adding more visual character to the app through creating graphic elements, illustrations, patterns, micro animations, and using the new color palette.

 

We gave the Smunch app a unique character and brought it to life. The improved content and tone of voice also made a difference.

mobile_preview_5
mobile_preview_6
mobile_preview_7
mobile_preview_8

New dashboard design and a new helpful navigation feature

All dashboard screens were also completely redesigned with a focus on mobile devices. The order process is particularly easy: The preferred dish is ordered with only one click; then the status of the dish card is changed to “ordered.”

 

Day filter feature:  We added a calendar below the top navigation, which enables users to easily navigate through the available days for ordering. This new feature also makes it easier for users to make decisions by neatly organizing the interface. This allows it to be more readily understood by new users. There is also a new and improved quick view with detailed meal information for the users who need more information to make a choice.

desktop_2
desktop_3

Conclusion

We found that, with a project like this, it’s especially important to spend time on setting the right goals and to do regular planning and revisions. Spending a bit more time on user testing sessions, interviews, and workshops pays off later.

Measurements and Outcome

results_1

Other Work Projects: