Product / Visual Designer Position – Take Home Test

This task was given to me in an interview process, to create an online pizza shopping experience
that includes Homepage and Pricing page for both mobile and desktop view.

Contents

The Brief
Task Breakdown

UX Process:
Understanding The User
User Stories & Storyboard
Tradeoffs & Assumptions
Flowchart
Wireframes

UI Process:
Logo
Style Cheat Sheet
Mobile & Desktop Designs
Next Steps

The task was to create an online pizza shopping experience that includes Homepage and Pricing page.

The Brief

Time
1 week! (As I was working 5 days a week on 2 jobs, I had the weekend and weekdays after working hours to work on this task.)

Target Customer
John & Jane Terra are small business owners with multiple pizza restaurants across the city.

Goal
Create an online pizza ordering website for Terra Pizzas, where a customer can order pizza from any of their multiple locations.

Mission
Create a shopping experience that includes a Homepage, and a pricing page for desktop and mobile. It should include the ordering process and upsells (salad, beverage, etc) without sounding salesy.

Deliverables
As you are applying for a Product Visual Designer position you will be primarily evaluated on the visual design skills. We’d like to see minimally, a static, high fidelity visual design execution of Homepage and Pricing page. However, as a product designer, we will also be looking at your problem-solving process and
usability thinking which can be supported with wireframes or sketches of the whole shopping experience.

We would like you to present your process, your final work and answer questions in person. Please be prepared to walk us through your journey and how you made design decisions that lead to the final outcome.

You decide on how much time you want to put into this exercise and we thank you for taking your time.

Task Breakdown

Task Breakdown

In the interest of time, I went straight into UX process without interviewing the stakeholders. The UX process is divided into three parts; understanding the user, flowchart and wireframes.

In the interest of time, I went straight into UX process without interviewing the stakeholders. The UX process is divided into three parts; understanding the user, flowchart and wireframes.

As logo and visual identity is NOT part of the task, I decided to only allow myself half a day maximum to create a simple style guide.

Workstreams

UX Process

UX Process Contants
Part 1
Value Proposition
Value Proposition-1
Emphatise
User Stories

In order to narrow down the task and stay focused, I've written down some tradeoffs and assumptions.

Tradeoffs_2
Assumptions

Due to the time limit, I decided to just study one persona.
I'm aware that there are other personas yet to be explored, who I presume, would order for parties and family meals.

Storyboard_all
Userflow

Wireframes

Wireframes_mobile
Wireframes_desktop

UI Design

UI Design

I had to create a simple style cheat sheet to keep all the visuals in line with the friendly and approchable Terra Pizzas brand I had in mind. 

First, I establish the logotype, photography style (courtesy of Unsplash and Crust Pizza), typography, bespoke icons (to give a little fun and approchable personality to the brand) based on the circular shape in the letter 'a' of the logo and on the selection of colours. 

As the company I was interviewing for had the colour green as the primary colour, I was hoping to show that I was comfortable working with one primary colour. To give a warmer feel to the restaurant brand, I've paired the green with deep brown and light cream.

In keeping with the approachable look and feel of the brand and inspired by the shape of the pizza itself, I decided to apply varying degrees of rounded corners on the design elements. And a curve on the base of the homepage feature image.

For the fonts, I've paired a friendly and approachable geometric Google font and an expressive handwritten font to give a sense of freshness and hand-made feel, inspired by the kneading dough and sprinking of flour in the pizza making process.

I also thought of different ways of visually upselling the desserts/drinks. 

One way is to put a yellow star indicator next to the dessert section to entice customers to click on that section. I also added a note that would anchor link to the dessert section when the customer has scrolled down to the end of the menu. 

Last but not least, I've added a carousel section for upselling just before the customer checks out.

 

Logo & Style Cheat Sheet

Quickbookslogo
StyleGuide

Clean file, clear mind. 

Figma_1

Mobile design

Here's the video of the mobile prototype again!
Click here if you wish to click through the prototype in your own time.

Quickbooksdisplay-mobile
Quickbooksmobile-check-out-phone
Quickbooksmobile-homepage-phone
Quickbooksmobile-homepage
Quickbooksmobile-pricing
QuickbooksDesktop—homepage

Next steps

In the interview, I was asked what I would do If I had months instead of days to work on this project.

My answer was; talking to the stakeholders and have a better understanding of the brand and business KPIs. Understand business and customer pain points so we can prove or disprove initial hypothesis and get a proper problem statement to strive to solve. So that I can measure my success in a more tangible way. For example success might be measured by 20% increase in online sales. 

Exploring other ways (interactions) of personalising the pizza such as pop-up instead of expandable card, etc.

Possibly developing the logo and visual identity a little further.

Usability testings and deriving information from analytics about where in the user journey is best to place a voucher for next purchase or discount for refering a friend and if it works at all to entice customers to come back.

Finding out through analytics which and whether the efforts we placed in 'upselling' the dessert and drinks are successful or do we have to explore different avenues.

Create a section for quick re-order on the homepage when the customer comes back to the website. Success might be measured by the engagement of returning online customers.

More qual, quant and usability testings of course and while I'm at it, actually try some of the pizzas!

Thank you for making it till the end. :)

In case you are wondering, I managed not to order a pizza throughout the whole process. Crazy, I know!
And as a result of this task, I got the offer as a Product / Visual Designer at Intuit - Quickbooks!

Selected Works

Benchmark GymUX Research + Usability Testing + Prototype

Hay (aspiring neobank) - work in progressMobile App, Product Design, UI & UX

ASGLogo + Website

CalixLogo + Visual Identity + Website

PayrightLogo + Visual Identity + Campaign

HakoahVisual Identity

DeputyVisual Identity + Illustration

ImaginenationVisual Identity + Website

LogosLogotype & Logomark

EquifaxWebsite, eDM, Visual Identity, Print

TargusWebsite improvement

CatholicCare WollongongVisual Identity

Vero – Risk Profiler ToolIconography, Digital Online Tool

All content © of the design agency and respective brands 2017-2020.