Main-Header_HD_horizontal_smaller

Web App Redesign - UX/UI Case Study of the First German Online Canteen - Smunch

About the project

Smunch is b2b business, a food/tech German Startup with its headquarters in Berlin. They have an important mission to provide tasty lunches to hungry employees - directly to their workplaces. Moreover, the product is particularly user-accessible and loved by many. Who doesn’t love amazing food that arrives hassle-free?

Why redesign? - Challenges

The software was working, people were able to order food. So why then? There were things to be improved. We identified holes in the general user flow. We also identified issues with the sitemap and UI, which lead to shortcomings and dissatisfaction with user expectations. Therefore, there were lower conversion rates, no matter the number of monthly on-boarded new users. As a result, we were able to clearly identify one of the overarching business goals - increase the conversion rate.

The first version of the app was completely missing a focus on mobile devices. As a result, mobile usage was particularly low and generally wasn’t a hit among users. That’s why the new version needed a mobile focus and to be totally improved. Smunch was already providing a great physical product - the food. They also wanted to create a user-centered digital product that could match the users’ needs and provide a great overall experience - from ordering the food to receiving it.

Goals

• Increase the conversion rate

• Improve the overall user experience

• Design mobile first app

• Fix the user flow and the navigation

• Increase rating participation rate

Credits and my participation

My participation – I was taking part in the project strategy, planning and execution. Managing and leading the design process from basic sketches to delivering hi-res prototypes and supporting assets as – micro animations, animations, illustrations, graphic elements. I was also responsible for building and organizing the product design system.

Team members – Kim Nguyen - Product Owner, Ludovic Manjot - CRO, Igor Araújo - Head of Engineering, Randy Tarampi - Senior Software Developer, Melih Yumak - Senior Full-stack Developer, Cássio Hübner - Full-stack Developer, Mayya Georgieva-UI/UX Designer.

header-section-mobile_1
header-section-mobile_2

Fast links

wave_up

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

wave down
redesign-and-better-ux

Click the icons to easily reach the information

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 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 hypothesises which we needed to test and validate.

workshops
darker-shade_wave_up

User research and User personas

user persona_1
persona_2
persona_3
persona_4
persona_5
persona_6
darker-shade_wave_down

Type of users

user-type-1

Power Users

user-type-2

Irregular

High and low conversion

user-type-3

Registered but not active

Design Sprints

We followed a weekly sprint schedule for five weeks until we were satisfied with the results and we saw the overall refinement. As a result, there was a huge 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 work. 

Quick view
wireframes
elements

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.

dashboard_prototype
App Sitemap mobile
mixed_prototypes
user profile
wave_up

Click the icons to easily reach the information

wave down

Design System

Keep it simple - that was the main thing we wanted our design system to be. First of all, building a design system is no mean feat - not to mention how time-consuming it is. Everything started by sketching and laying down the first elements, components, modules, and styles. There was a simple design system with all basic elements we needed to start designing the app screens. It later turned out that this method worked particularly well as we maintained simplicity and consistency within the app. We also did not spend a huge amount of time building something that users would not use. Also during the app development, the design system was constantly updated in order to keep the visual and technical language consistent.

See some examples of the design system elements bellow.

design-system

Grid System

grid_system

Shape

Typeface

typography

Buttons

buttons-1
buttons-2

Input fields and notification

form-fields
notifications

System icons

icons-system
alergy-icons

Visual Assets

Improved visual factors. An example of this was, adding more appealing food-inspired colour tones and creating a shades palette, which consisted of all of the main colours. Not only was the colour 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. Not all of them are functional in nature, but they simply add a more playful and friendly outlook to the app.

visual-assets

Colours

colours-1
colours-2

Illustrations

icons_illustrations
pop-ups

Animations and Micro animations

Animation – New appealing login screen designs. We completely updated the log in screen design and user flow in case the user forgets their password or if they need further help. From a UI perspective, we decided to create a welcoming animation as the log in screen is this first thing the user sees. We wanted to welcome them and also show the friendly character of the brand. 

Micro animations – we added small animated interactions so (write something here)

ratings-preview
loading

Mobile interactions

Improved visual factors. An example of this was, adding more appealing food-inspired colour tones and creating a shades palette, which consisted of all of the main colours. Not only was the colour improved-, 

mobile-interactions
Reduced_open-quick-view
reduced-day-selector
Reducedmobile-navigation_hamburger
order button on hoover

Results and solutions

​Please see below examples of what we achieved and what we improved.

mobile-interactions
mobile_preview_1
mobile_preview_3
mobile_preview_4

What’s new?

New top and bottom navigations. The app navigation system was improved and not only in the way it looks, but also in organizing the most useful information by making it more visible when needed. For example “ratings” or “filter” are considerably important. 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 more character to the app

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

We gave the Smunch app a unique character and brought in 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 one only click as 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 easily 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
desktop_4
desktop_4
desktop_11
desktop_10
desktop_6
desktop_7
desktop_9
desktop_8

The Launch

After 6 months of user tests, workshops, plenty of sticky notes (not so eco-friendly as it turns out), designing prototypes, building solutions and designing the completely new Smunch app look and feel, WE WERE READY.

Finally, we were more than happy and excited to launch our product! At 9 am on the 3rd of September 2019, Smunch users were able to access the new online canteen.

release

Conclusion

Even with the time constraints we had, we managed to go through all of the planned steps.

We found that when there is such a big project as the one we did, it’s especially important to spend enough time on setting the right goals and do regular planning and revisions. Spending a bit more time on user testing sessions, interviews and workshops pay off later. And one more important thing to mention — it is not the end. It is a stable base for future improvements and changes.

Measurements and Outcome

results_1
results_1
thanks_icon

Thank you for your attention!

Close Menu
error: