Skip to main content
Ontario, Canada       paul@uncubeddesigns.com

McDonalds

Written by paul@uncubeddesigns.com on . Posted in Case Study, Digital, UX UI. No Comments on McDonalds

McDonald’s

UX/UI redesign

Challenge:

After reviewing the McDonald’s website, there isn’t an easy way to order food. It seems the company relies on the user to already be aware of the “McDelivery” website or familiar with using 3rd party food delivery services.

In the case of McDelivery, the website does not mimic the well executed McDonald’s mobile app.  This mobile app has a dominant focus on food ordering and provides a positive user experience.

Interactive Prototype

Main Page

McDonalds Main Page

Product Pages

McDonalds Product
EVM Product

Transaction Pages

McDonalds bag
checkout
thank you

Process:

Analyze features and benefits of the McDonald’s mobile app and create a similar user experience when placing food orders.

Develop a column based layout approach that can be adopted globally which will accommodate all languages and characters to fit within the layout. Create a mock journey of placing an order to make the user have an enjoyable experience.

User Account Info

account

Solution:

While keeping company specific information regarding franchising and charitable work in the peripherals, a focus of ordering food has taken centre stage in this redesign.

Minor font changes to the brand have also been applied for better readability and enhanced aesthetic.

A hero image or slider of current promotions could be displayed dynamically according to geo location and calendar, further increasing the likelihood of selling.

Impact:

Objective was to create a user friendly way of ordering food directly from the McDonald’s website which would contain user portal access as well as customized promotions, dynamic cross-selling / up-selling tactics to further increase online global sales.

Continue reading

Cinema

Written by paul@uncubeddesigns.com on . Posted in Branding, Case Study, Digital, UX UI, Web. No Comments on Cinema

cinema logo

  • PROJECT

    PROJECT: Cinema responsive website

  • ROLE

    ROLE: Branding, UX Design, UX Researcher

  • DURATION

    DURATION: November 2022 (50 hours)

  • PROJECT VISION

    Conducting user research, scripts, accumulate data, perform competitive audits, create wireframes, branding style sheets, testing, prototyping and iterations.

  • CHALLENGES

    1. Bulk ticket ordering
    2. Design a site that is easy to navigate for all platforms
    3. Provide a seamless & linear user flow between devices

Kickoff

Increase efficiency for customers to order remotely and avoid line-ups.

Our goal was to design a website which provides users an error-free, easy ordering flow with quick and accurate conversion times.

  • What is the product and who is it for?
  • How do we simplify the user experience?
  • Is there a way to keep the user flow consistent between device sizes?
  • What challenges could we face moving forward?
  • Who do we see as our biggest competitors?
  • What ways can we bring confidence to users after conversion?
Usability research was conducted to determine how much time this saves patrons.

Unmoderated research was conducted where participants were given tasks to perform remotely and detail their feelings, thoughts, and processes. We assumed some aspects would be difficult and some would be easy. We were pleased with our results amongst participants.

first aid affinity map

Affinity Map

Meet the Users

  • Persona 1: Matthew

    “Movies are a great way to spend time with friends who like to be out of the house.”

    Name: Matthew Cristie
    Age: 16
    Education: High-School Student
    Hometown: Toronto
    Family: 1 sister, 2 parents
    Occupation: P/T baker

    Goals
    – Pre-order availability
    – Provide offer/discounts
    – Group orders

    Frustrations
    – Long lines
    – Sold-out shows

    Matthew is a 16 year old high school student who wants a quick way of pre-ordering movie tickets for him and his friends before the shows sell out on fridays as well as to skip the lines.

  • Persona 2: Millani

    “Taking my grandkids to the movies is ideal for baby sitting”

    Name: Millani Truss
    Age: 54
    Education: U of T, MBA
    Hometown: Toronto
    Family: husband, 3 grown kids
    Occupation: Retired Banker

    Goals
    – Easy to use online ordering
    – Finding family friendly options for my grandkids

    Frustrations
    – Strollers are hard to navigate through with crowds of people

    A grandmother of a young children who wants a way to choose seating, order movie tickets and easy to read options available to her via online navigation.

Competitive Audit

We looked at several direct and indirect competitors and this provided direction on gaps and opportunities to address with the Cinema website.

The majority of competitors had similar options when checking out tickets online. However navigation through all competitors’ websites proved to be difficult. These are the opportunities we’ve noticed.

  • Simpler navigation
  • Offer seating choices

Preparing the Journey

Overwhelming list of options was a pain point for users, using that knowledge a site map was created.

The goal was to limit the amount of options per page and make them more digestible with the use of layout and flow.


Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs for the Cinema website. These designs focused on delivering personalized guidance to make easier choices amoungst all the movies available.
To prepare for usability testing, I created a lo-fi prototype that connected user flow to purchasing tickets.

first aid affinity map

Iterations

These were the main findings uncovered by the usability study:

  • Deciding what option to order in a simpler format
  • Those with vision impairments found some elements too small
  • Creating a user was a little extensive

Mockups 1

Based on the insights from the usability study, I made a change to improve the visibility of the cart when items populate the basket. This allowed users to better see and goto their cart easily.

Mockups 2

To make the user experience less overwhelming, the number of options were reduced on the home page and later added as options in the checkout portion.

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the lo-fi prototype, including design changes made after the usability study.

first aid affinity map

Responsive Design

The designs for screen variation include mobile and desktop. I optimized designs to fit specific user needs of each device and screen size.


first aid affinity map

Style Guide

Dark colours to create a mood movie patrons are familiar with and a complimentary palette came from wanting to express to users the tone of the theatre going experience. AODA compliance with high contrast, labels for interactive elements and an initial focus on the home screen with recommendations to help defind primary tasks for user actions.

First Aid style guide

Takeaways

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

  • Next Step 01

    Conduct follow-up usability testing of the new website

  • Next Step 02

    Identify any additional areas of need and ideate on new features
Thank you for reviewing the Cinema case study.

Continue reading

Free to Be

Written by paul@uncubeddesigns.com on . Posted in Branding, Case Study, Digital, UX UI, Web. No Comments on Free to Be

Husky Technologies™

Free To Be

Challenge:
Husky were in the midst of a war on plastics. Being in the plastic injection molding industry, they were trying to find ways of convincing the public that plastic is the safest and most sustainable material compared to aluminum, cartons and glass. Whilst doing that, they also were trying to gain marketshare in the beer space with the objective of converting brewers and bottlers from glass bottles to PET.

heineken
sagres
sycmon
aleraiser
beer pour

Process:

Husky, being a premium brand in the plastic industry, prides itself and focuses a lot of its efforts on emphasizing their technologies, engineering and innovation in their marketing communication.

When trying to reach craft brewers and large players in the beer space, we set out to switch the marketing focus to simply emphasize the the features and benefits of puting beer in PET bottles.

In doing this, the goal was to educate the public that the war on plastic was misunderstood as well as to offer insight and intrigue to brewers and to initiate conversation in switching from glass and cans to PET.

Solution:
Creating beer bottle mock-ups with labels that emphasize the different features and benefits of putting beer in PET.

Introducing the idea in various bottle shapes as well as in different environments to give a better understanding of our message while remaining visually appealing and capturing interest.

beer bottle round
freedom
stag
can

Impact:
My role in this project was strictly design. It was my duty to keep the visuals of this project interesting and was given a significant amount of creative freedom.

I was applauded for the idea of creating mock-ups, producing a landing page, PPT slides, print collateral and emails that ventured away from the usual Husky brand while still keeping within the guidelines.

The copy and tone for this project was Natasha Saladino and she managed to champion these ideas and my vision to the Husky stakeholders and sales staff to further communicate this campaign in the field.

Continue reading

Borgo

Written by paul@uncubeddesigns.com on . Posted in Branding, Case Study, Digital, UX UI. No Comments on Borgo

Borgo Contract Seating

Brand Persona Renaissance

Challenge:
I worked with Borgo during their biggest brand transformation in the company’s history. More than a face-lift, Borgo wanted to redefine their brand image and make a fundamental shift in its brand visuals and voice.

Despite 30 years of heritage, Borgo wasn’t creating enough buzz for their younger customers, dealers and designers. For long-term change, Borgo’s new vision needed to be properly implemented across the whole brand and communicated in the right way.

tag
sora
BUL
singer
vespa
jendra

Process:

As a manufacturer of office furniture and fixed seating, Borgo was a seating and upholstery-first company. After working with the brand from Italy to Canada, I supported them with the shift from product-focused to a youthful, design-first approach.

Below is an example of where I combined the satire of IKEA’s illustration and applied it to an existing Borgo product in an unorthodox way while celebrating the Super Bowl. Playing up the humour with simple visuals and altering Borgo’s usual tone, I still managed to prompt visits to the Mya Lounge Chair web page and grow awareness across all social platforms as a direct result.

  • ikea

  • mya

  • chips

  • super bowl xlix

  • drawing

  • mya

Solution:
Creating an identity flexible enough to work for both external and internal assets including print and digital;, invoices, product brochures, social media, trade shows and showroom environments.

Introducing a vibrant colour palette to get Borgo noticed and loved. And changing the visual codes of everything. We also visited the showroom floors and implemented bolder fabrics on the chairs to display and exhibit in at trade shows. I also supported the change to the brand voice on social media, website and advertising copy which allowed for anchoring everything in an uncomplicated aesthetic that appeals to their youth demographic yet understood amongst legacy clients.

sign
cheer
icons
xten

Impact:
While I can say I played a major role in this project, which consisted of a team of two, I have to give credit to the owner’s son Lucas Spassiani, as he was the lead ambassador of this rebrand which made directing this project a joy.

A significant increase in web traffic and trade show presence, Borgo transformed their showroom and overall look to reflect the design thinking implemented in their rebrand.

Continue reading

Sammy Sandwiches

Written by paul@uncubeddesigns.com on . Posted in Branding, Case Study, Digital, UX UI. No Comments on Sammy Sandwiches

  • PROJECT

    PROJECT: Sammy’s Sandwiches app

  • ROLE

    ROLE: Branding, UX Design, UX Researcher

  • DURATION

    DURATION: November 2022 (6 weeks)

  • PROJECT VISION

    Creating a sandwich delivery app to help customers pre-order, pickup or have delivered any sandwich order to skip lines and streamline payment. Overall, to expedite the order and payment process for customers on the go.

  • CHALLENGES

    1. Increase customer loyalty
    2. Create an easy user flow for pre-ordering food
    3. Provide secure and seamless payment process

Kickoff

Creating a faster way for patrons to order food and skip the lines for convenience.

Increase customer loyalty and provide fast, secure method for users to pre-order food for pickup or delivery.

  • What is the product and who is it for?
  • What do our primary users need most?
  • What is the primary device according to users?
  • What challenges could we face moving forward?
  • Who do we see as our biggest competitors?
  • What familiar pain points can we overcome and foresee?
Usability research was conducted to determine how easy and informative this app is for users.

Unmoderated research was conducted where participants were given tasks to perform remotely and details their findings, thoughts, and processes. We assumed some aspects would be difficult and some would be easy. We were pleased with our results amongst participants.

sammy's sandwich affinity map

Affinity Map

Meet the Users

  • Persona 1: Joseph

    “Sandwiches are the perfect meal for my busy time schedules.”

    Name: Joseph Scoliari
    Age: 22
    Education: University Student
    Hometown: Toronto
    Family: 1 brother, 2 parents
    Occupation: Grocery Store

    Goals
    – Pre-order availability
    – Offers/discounts available
    – Loyalty program

    Frustrations
    – Long wait times for orders
    – No major incentives for loyal customers

    Busy, on-the-go student whose time is divided between school work and part-time occupation. Prefers to eat while studying so that he can multi-task and saves time on cooking and washing dishes.

  • Persona 2: Anne-Marie

    “Always looking at the up-side of life.”

    Name: Anne-Marie Lessard
    Age: 36
    Education: Marketing Degree
    Hometown: Montreal
    Family: husband, 2 kids
    Occupation: Marketing

    Goals
    – Delivery options
    – Icons or language translations

    Frustrations
    – Everything is always english

    Usually likes to order food on Friday evenings for the family to save her from cooking and cleaning and can spend more time heading into the weekend.

Competitive Audit

In order to construct a concise and solid foundation for Sammy’s Sandwiches, I had to venture out and see what the prominent restaurant applications were already doing and what user goals they were not reaching. I evaluated several features deemed vital from user surveys and identified which ones Sammy’s Sandwiches could capitalize on to have a leg up over other applications.

I found that only two of the four main competitors offered user profiles. Even then, the user profile feature is incredibly limited and offers very little in terms of order convenience.

Others refuse to offer any sort of loyalty programs or incentives to customers.

Preparing the Journey

Before moving onto high fidelity wireframes and mocks, I wanted to get a feel for what the core of the app would look like when put in front of me. I also wanted to address how a user could expedite their order.

Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs Sammy’s Sandwiches app. These designs focused heavily on the user’s journey to convert previous or favourite orders quickly and have less touch points.
To prepare for usability testing, I created a lo-fi prototype that connected user flow creating a profile and re-ordering from an existing account.

first aid affinity map

Iterations

These were the main findings uncovered by the usability study:

  • Creating a new profile was frustrating. Wasn’t obvious how to create one
  • People with vision impairments found the icons too small to see and had to zoom in too often
  • App design was uneventful and tone was too robotic
  • Some tasks took too long to complete compared to other apps because the buttons to press were not in obvious places

Mockups 1

Based on the usability study I created a layout consisting of hiearchy by grouping previous orders together and then adding favourite items with CTAs to quickly repeat the order, all within their account screen.

Login and account creation became easier by adding an account button on the upper right corner of every screen. Icons and buttons were made larger and more prominent.

5 out of 5 total participants said they found this process easy and enjoyable.

“It really helps that I can easily find my previous or favourite orders and 1-click to start the order.”

— Participant 5

account re-order page

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the lo-fi prototype, including design changes made after the usability study.

first aid affinity map

Style Guide

Rustic colours were created to portray authentic italian sandwiches. Sans-serif fonts were included to give a balance of modern design to an otherwise traditional palette.

Takeaways

The tone and design of the app are easy to follow and make the whole experience enjoyable.

Some tasks need to be more obvious for those users who aren’t as computer literate as others.

  • Next Step 01

    I would further enhance the map section to show best route options after checkout when user is picking up an order

  • Next Step 02

    I would need to add a cart button on the header bar for quick access to order

  • Next Step 03

    I would like to add more menu items and choices for even more customer satisfaction
Thank you for reviewing the Sammy Sandwiches case study.

Continue reading

My First Aid

Written by paul@uncubeddesigns.com on . Posted in Branding, Case Study, UX UI. No Comments on My First Aid

  • PROJECT

    PROJECT: My First Aid app & responsive website

  • ROLE

    ROLE: Branding, UX Design, UX Researcher

  • DURATION

    DURATION: Decemeber 2022 (2 weeks)

  • PROJECT VISION

    My First Aid is a Toronto based organization focused on teaching people the basics of common life saving techniques as well as offering certificate programs for users who wish to become certified.

  • CHALLENGES

    1. Eliminate complex EMS tutorial
    2. Design a cohesive interface for familar and unfamiliar users
    3. Create a minimalistic UI while keeping tutorials as the focus
    4. Provide a seamless & linear user flow between platforms

Kickoff

Only 35% of civilians say they know how to react in an emergency situation before EMS arrive on the scene. The strategy for My First Aid is to offer tutorials on what to do before an ambulance arrives which could possibly save a life.

Our goal was to design an app for users who want to learn basic life saving techniques but don’t have time to take a formal class. As well as offer certification courses to those wanting a hands-on lesson by trained professionals.

  • What is the product and who is it for?
  • What do our primary users need most?
  • What is the primary device according to users?
  • What challenges could we face moving forward?
  • Who do we see as our biggest competitors?
  • What resources should we review to familiarize ourselves?
Usability research was conducted to determine how easy and informative this app is for users.

Unmoderated research was conducted where participants were given tasks to perform remotely and details their findings, thoughts, and processes. We assumed some aspects would be difficult and some would be easy. We were pleased with our results amongst participants.

first aid affinity map

Affinity Map

Meet the Users

  • Persona 1: Lattice

    “I think it’s important for everyone to know basic life saving techniques”

    Name: Lattice Bouche
    Age: 24
    Education: University Student
    Hometown: Toronto
    Family: 3 sisters, 2 parents
    Occupation: P/T server

    Goals
    – Be prepared for emergency situations
    – Having the knowledge last for my whole life
    – Have an app on my phone to reference

    Frustrations
    – Not easy to find anywhere to learn CPR
    – All CPR courses conflict with schedule

    University student looking to find a course which can teach her the basics of CPR to be well prepared incase of future emergencies but can’t find a course that accommodates her schedule.

  • Persona 2: Leslie

    “Having kids makes me worry I won’t know what to do if tragedy strikes”

    Name: Leslie Ching
    Age: 32
    Education: U of T, MBA
    Hometown: Toronto
    Family: husband, 2 kids
    Occupation: Program Manager

    Goals
    – Finding a website where I can learn CPR
    – Being able to transfer my knowledge and teach my family the basics of CPR

    Frustrations
    – Can’t easily find online courses

    A mother of 2, looking to find an online course where she can learn CPR and possibly get certified online. Cannot do classes due to being the only parent home during in-class sessions. Wants to be able to share her findings via link and lessons.

Competitive Audit

We looked at several direct and indirect competitors and this provided direction on gaps and opportunities to address with the My First Aid App.

The majority of the competitors had similar weaknesses in layout, design and accessibility. However some proved to have strong content but limited options available. These are the opportunities we’ve noticed.

  • Online tutorials
  • Offer certificate courses online
  • Provide shareable and printable assets

Preparing the Journey

We constructed a user flow of what a basic start to finish journey looks like while seeking a tutorial and registering for a course. This helps us in understanding ways users can interact with the app, as well as allowing us to see navigation through user goals.


Digital Wireframe

After ideating and drafting some paper wireframes, I created the initial designs for the My First Aid app. These designs focused on delivering personalized guidance to users to choose online tutorials.
To prepare for usability testing, I created a lo-fi prototype that connected user flow of viewing a tutorial as well as registering for a certification course.

first aid affinity map

Iterations

These were the main findings uncovered by the usability study:

  • People wanted a search function to easily find what tutorial they wanted
  • Participants wanted icons instead of images to represent categories
  • People wanted to have the use of the call function on mobile devices while in the app to call 9-1-1

Mockups 1

Based on the insights from the usability study, I applied design changes like a prominent search bar and large icons for each tutorial.

Mockups 2

Additional design changes were made. The certification courses went from a grid view to a map view to enhance user flow.

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the lo-fi prototype, including design changes made after the usability study.

first aid affinity map

Responsive Design

The designs for screen variation include mobile, tablet, and desktop. I optimized designs to fit specific user needs of each device and screen size.

first aid affinity map

Style Guide

Combining vivid colors to create My First Aid’s signature palette came from wanting to express to users just how friendly learning emergency services can be. The negative space allows a calm and spacious feel to the app which welcomes the user to click freely. AODA compliance with high contrast, labels for interactive elements and an initial focu on the home screen with personalized recommendations to help defind primary tasks for user actions.

First Aid style guide

Takeaways

Users shared that the app made learning seem like something they can actually do and help save a life while waiting for ambulance to arrive. One quote said “I finally feel like I am prepared to handle a situation to administer CPR if someone is in trouble.”

Even though the problem I was trying to solve was a big one with a lot of responsibility, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.

  • Next Step 01

    Conduct research on how successful the app is in reaching the goal to easily learn CPR

  • Next Step 02

    Add more educational resources for users to learn about life saving techniques

  • Next Step 03

    Provide incentives and rewards to users for successfully learning certificate courses
Thank you for reviewing the My First Aid case study.

Continue reading