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

Author: paul@uncubeddesigns.com

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

  • 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

Direct Image

soccer360

  • Direct Image Media

    Company

  • Publishing

    Industry

  • Print / Design / Web

    Area

  • 2005

    Date

A publishing company that specializes in creating Canada’s largest soccer magazine as well as other misc. marketing assets, such as direct-mail campaigns, trade show material and print related services.

The Mission

To compete and create a world soccer publication suitable for global consumption.

The main challenge, besides competing with other established magazines in the space, was to compete with online resources. It was impossible to report on stats and news so we developed more of a story based publication with a larger format and high quality images where readers can use as posters.

The Design

Kick off to a journey of art direction.

From a design standpoint, the focus was always layout, typography, photography and eyeflow. This was to compliment the stories, round-ups and interviews. The content kept people engaged, the design excited the user to turn the page.

View the Samples

  • soccer360

  • soccer360

  • soccer360

  • soccer360

  • soccer360

  • soccer360

  • soccer360

  • soccer360

  • soccer360

The End Result

Canada’s premiere world soccer magazine.

With attention to detail, meeting and exceeding deadlines, focus on layout principles and strategic execution, Soccer360 was able to grow in subscriptions month after month as well as see their ad revenue grow along with it. The the expansion into apps and digital publications where rich media was introduced further strengthened the reputation of this publication reaching over 40,000 readers in its first year aquiring subscribers as far away as India and Hungary.

Programs Used Daily

  • InDesign

  • Illustrator

  • PSD


Continue reading