top of page
This site was designed with the
.com
website builder. Create your website today.Start Now
Untitled (9).png

James Landen

Title (4).png

For my second design program project, I was tasked with sourcing a real-world client and delivering a low-fidelity prototype to meet their specific needs. First Course is a platform for users to browse and book professional chefs in their area. 

 

Roles

  • Researcher

  • Designer

  • Writer

  • User Tester

Tools

  • Figma

  • Google Suites

  • Vectr

  • Usertesting.com

  • Miro

  • Trello

Timeframe

  • Two Weeks

The Challenge 

This was a quickly designed project! After recently learning the double diamond design process, we were introduced to the 5-Day Sprint. 

 

5-day-design-sprint-process 1.png

Project Overview

Starting off, we were told to interview our client and establish an open line of communication through email, slack, and weekly zoom meetings. Working with Richard for feedback at key points, I designed the client application for users to browse chefs, select menus, and pay for services. Based on our original conversation I created a simple UX Requirements doc.

 

PROBLEM

  • Richard loves to host dinner parties but doesn't have the time or skillsets to produce the most important part: the food! He has attempted to source chefs in Austin, TX through networking but found his options to be few and far between.

​

  • After hosting several dinner parties with private chefs, he noted that they all seemed to prefer a different payment method. With that not always being communicated up-front, payment has led to some awkward situations for Richard.

 

SOLUTION

I needed to design an app that would:

​

  • Allow filter chefs by their service area.

​

  • Allow users to book personal chefs in their area.

​

  • Allow users to pay for services in-app.

​

 

1) Monday - Define Target Audience

Not being tasked with running user surveys for this project, I used Richard and his original interview as a template for my users. From that point, I jumped into personas, journey, and empathy mapping.

 

USER PERSONAS

Group 5.png
Group 33777.png

While I was only working on the client side of the application, it was important that I included a chef's persona. Through Sandra, I would work on fulfilling my client's needs. Logistically, I would need Carlo's perspective to gauge the content that Sandra would need to see.

JOURNEY MAPPING

Through Journey Mapping, I would begin to establish the tasks Sandra would need to complete to book a personal chef:

 

Map.png

Key user tasks:​

​

  • Create an account and/or sign in

​

  • Book for specific dates

​

  • Choose from a selection of menus

​

  • Alter specific booking details

​

  • Pay for services in-app

​

 

EMPATHY MAPPING 

To fill out the gaps in understanding what kind of users I was designing for, I created an empathy map for Sandra. 

 

Client Sandra Empathy Map.png

Key user insights:​

​

  • Wants to hire a specific kind of chef based on their look and how they would interact with her guests.

​

  • Will want a large amount of control/ability to edit booking aspects in advance.​

​

  • Will want a very detailed breakdown of booking details at checkout.

​

​​

 

2) Tuesday - Sketching Competing Solutions

This is the point where I got excited about the design process. Initially, we were tasked with doing several fast-paced sketches of competing applications. From there, we went into planning sketches, storyboarding and paper prototypes.

COMPETITIVE SKETCHES

1st Sketch_ Other apps + My idea 1.png
2nd Sketch_ Random layout ideas 1.png

PLANNING SKETCHES

3rd_4th Sketch_ Planning 2 2.png
3rd_4th Sketch_ Planning 3.png
5th Sketch_ 4 Step layout ideas 1.png

STORYBOARD SKETCH

6th Sketch_ Storyboard 2.png

Sketching insights:​

​

  • Onboarding should include address input. Don't call for payment information until after "checkout".

​

  • The app should be photo-forward to inspire purchase and express the concept of "opulence" to the user.

​

  • I will need to be strategic with displaying so much information at once to the user so as not to visually overwhelm.

​

  • Maximize white space to declutter and let the photography shine

​​

​

 

3) Wednesday - Decide

Wednesday was primarily about choosing our tools and deciding on which sketch features would work best for our low-fidelity prototype. Very happy with the paper prototype I had sketched on Tuesday and having all of the basic tools I needed to get started, I went for it!

Paper Prototype 1 1.png
Paper Prototype 2 1.png

For the record, coming out of a long career not specifically in the tech industry, I may have initially named the app "Tableau". Let's keep that between us. 

4) Thursday - Build a realistic prototype

I opted to invert standard wireframe colors as I originally planned to use a black background with white/cream text. I was very inspired by images from pre-2000s Food & Wine Magazine and thought that the stark background would let the brightly colored images shine and inspire purchase. While I still loved the idea, I eventually went feedback that all black backgrounds can feel "challenging". 

Splash

Group 33785.png

Search

Group 33786.png

Welcome

Group 33787.png

Landing Feed

Group 33789.png

Sign Up

Group 33784.png

Checkout

Group 33788.png

5) Friday - Testing with target customers

With First Course being my second-ever design project, I of course had a lot of issues. Between the sprint week and my own updates to take it to a high-fidelity prototype, errors were in the 100s. With the aid of in-person wireframe testing and revisiting design fundamentals, my design came a long way.

CHALLENGE # 1 - TEXT ALIGNMENT/STRUCTURE

  • Challenge: A user found the menu feed text to be confusing.

  • Solution: I worked with my mentor to go over the best way to structure the feed.

Group 33789.png

Iteration #1

Group 33794.png

Iteration #2

CHALLENGE # 2 - NAVIGATION

  • Challenge: I user hesitated when asked to go "back" to the previous screen.

  • Solution: While I had included a back button, perhaps it wasn't where my users expected. It was also a good opportunity to include an affirmation that they were searching in right city.

Group 33786.png

Iteration #1

Group 33772.png

Iteration #2

CHALLENGE # 3 - BUTTONS AND BOTTOM NAV

  • Challenge: A user was having trouble hitting buttons on the first try.

  • Solution: A great opportunity to revisit accessibility, I learned more about Google and Apple best practices for buttons and navigation. I increased all button sizes and widened the bottom nav spacing.

Group 33792.png

Iteration #1

Group 33793.png

Iteration #2

Final Deliverables

To date, I have designed a total of 10 screens. I look forward to fleshing the rest out!

Group 33795.png
Group 33794.png
Group 33773.png
Group 33772.png
Group 33775.png
Group 33790.png

Takeaways

This was a fun project. I wasn't immediately comfortable with the 5-Day sprint format but I came to love the sketch forward process. The sketching and the fast-paced decision-making took me in design directions I don't think I would've normally gone in.

​

Also, when taking on this project from Richard, I didn't realize that I would in effect, need separate apps for each of my personas. While Sandra ended up having all of her needs fulfilled, I will be circling back and creating a similar platform for Carlo. I assume issues like this come up every day in modern app design and I'm glad to have experience with the concept!

Title (4).png
bottom of page