Mobile applications

spiner when content is loading

Neobank — award-winning fintech app design

<h1 class='header-style-h1 text-color-dark-grey'><span style='color: #B70D1B'>McDonald’s UK </span>App</h1>

‍

Mobile App Design

SaaS Product Design

McDonald's

About the Client

Food

Delivery

Mobile applications

UK

With the McDonald’s app, you’ll get access to exclusive deals. Use the app to order ahead and pass the line with Mobile Order & Pay plus join MyMcDonald’s Rewards to earn points on every order to redeem for free McDonald's.

Challenges and Solutions

Improving user navigation to access exclusive deals within the McDonald’s UK App is essential for a more engaging experience.

Optimizing the Mobile Order & Pay feature to make the ordering process more seamless and efficient is crucial for user satisfaction.

Increasing user engagement with the My McDonald’s Rewards program is a challenge, as it requires a visually compelling and rewarding experience.

Redesign the app interface to prominently feature exclusive deals on the main screen.

Redesign the order placement process to be intuitive and user-friendly. Implement a step-by-step visual guide for Mobile Order & Pay.

Redesign the Rewards section to showcase the point-earning mechanism prominently.

Scope of Work

Minimal, bold and understandable design with vibrant brand colors makes McDonald’s app easily recognizable

01

<h3 class="header-style-h4 text-color-white">Idea</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Crafting an innovative concept to elevate the design of the McDonald’s UK App while concurrently gathering valuable insights.</p>

02

<h3 class="header-style-h4 text-color-white">Research</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Performing a comprehensive analysis for the McDonald’s UK App, exploring its various aspects in detail.</p>

Agnes sitting on sofa

03

<h3 class="header-style-h4 text-color-white">Wireframes</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Utilizing wireframes, we illustrated the fundamental functionality on the app screens for the McDonald’s UK App.</p>

04

<h3 class="header-style-h4 text-color-white">UI Design</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Creating a distinctive visual identity designed specifically for the app.</p>

05

<h3 class="header-style-h4 text-color-white">Testing</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Performing comprehensive app testing and collecting extensive user feedback during the testing phase of the McDonald’s UK App design.</p>

01

<h3 class="header-style-h4 text-color-white">Idea</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Crafting an innovative concept to elevate the design of the McDonald’s UK App while concurrently gathering valuable insights.</p>

02

<h3 class="header-style-h4 text-color-white">Research</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Performing a comprehensive analysis for the McDonald’s UK App, exploring its various aspects in detail.</p>

03

<h3 class="header-style-h4 text-color-white">Wireframes</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Utilizing wireframes, we illustrated the fundamental functionality on the app screens for the McDonald’s UK App.</p>

04

<h3 class="header-style-h4 text-color-white">UI Design</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Creating a distinctive visual identity designed specifically for the app.</p>

05

<h3 class="header-style-h4 text-color-white">Testing</h3>

<p class="text-size-medium text-color-white" style="max-width: 480px">Performing comprehensive app testing and collecting extensive user feedback during the testing phase of the McDonald’s UK App design.</p>

Pre-Sale Process

01

NDA

Sign a non-disclosure agreement (NDA) to protect the confidentiality of the project and the client’s information.

02

Intro call

Schedule an introductory call with the client to understand their goals, expectations, and timeline.

03

Brief & Requirements

Gather the brief and requirements from the client, such as the scope, budget, target audience, and desired outcomes of the project.

04

Information architecture

Create an information architecture (IA) for the project, which is a blueprint of how the content and features will be organized and presented.

05

Questions

Ask any questions that arise from the IA, such as clarifications, feedback, or suggestions.

06
‍

Quote

Provide a quote for the project, which is an estimate of the cost and time required to complete it.

07

Proposal call

Follow up with a proposal call to discuss the quote with the client and negotiate the terms and conditions of the project.

08

Filling legal form

Fill out a legal form to formalize the agreement and the responsibilities of both parties.

09

Contract

Sign a contract to finalize the formalities and start the work.

10
‍

Payment for 1st milestone

Payment for the first milestone is a predefined starting point of our working process.

Information architecture

Wireframes

Branding

Moodboards

Design System

UI Prototype

Delivery

01

Clickable prototype

02

Screenmap

03

Export to Zeplin

Hello, my name is Oksana

Oksana text frame

Oksana

Just drop me a line and I’ll email you in 10 minutes

or your next coffee is on me!

Oksana Kovalchuk

Oops! Something went wrong while submitting the form.