Tracie Mayes Porfolio

HyprLoco

A Scrappy Start-Up Story

HyprLoco is revolutionizing how business is done, one industry at a time with its hyper-accurate location platform. I'll tell you how I'm helping make that happen starting with a Quick Service Restaurant app I designed for the Sales team while keeping an eye out for the end users.

HyprLocoHeroImage.jpg
My Contribution

My Contribution

Let's get specific about what I did then I will step you through how I did it.

I was responsible for the interaction and visual design of the Local Eatery App. For the 8-day sprint I worked closely with the iOS Developer, Sales team, Product Owner and Customer Experience team.

The Quick Who, What and Why

The Quick Who, What and Why

HyprLoco is a small startup in Denver, Colorado that created a digital platform designed to help Quick Service Restaurants (QSR) manage their drive-thru and curbside pickup operations better. A step-by-step demonstration with QSR owners and managers will be key to selling the platforms amazing abilities. To create an impactful demonstration, HyprLoco is creating a generic app and restaurant dashboard webpage to mimic their platform to potential QSR clients. I drew a workflow below to explain how it will all fall into place.

HyprLocoDemoWorkFlowFullPage.jpg
My First Priority: Define the Problem and Task

My First Priority: Define the Problem and Task

This is not always an easy task with a start-up because it is constantly evolving. These were the parts that didn’t move too much:

1- Create a generic looking iOS mobile take-out app.

2- They needed it quickly (complete high-fidelity wireframes in 1 ½ weeks.)

3- It needed to be easily used, understood and demonstrated for the Sales team.

My Second Priority: Understand the Layered User

My Second Priority: Understand the Layered User

My primary user is the HyprLoco Sales team. They will be stepping potential Quick Service Restaurant (QSR) clients through this app describing the ability of HyprLoco and highlighting how this can improve their pick-up operations.

But wait! Shouldn't I be thinking about the real user ordering food?

Well... yes... kinda. This app is based on a current HyprLoco app used by many restaurants and customers. So the basic task flow has been proven by real users. I found myself constantly reminding myself that the goal of this app is to inspire a QSR owner/manager. Then once they agree to use HyprLoco's service, developers can incorporate the platform into their existing ordering app for the everyday hungry customer.

Quadrant Diagram It

Quadrant Diagram It

I graphed many of my UX/UI ideas on a Quadrant Diagram to keep on task. I compared the amount of clarity gained (for Sales use or QSR understanding) and quickness (coding and designing) as the two independent attributes. This helped guide many of my decisions.

FourQuadDiagram.jpg
I Still Wanted To Think Outside The Quadrant Box

I Still Wanted To Think Outside The Quadrant Box

Not all of my ideas fell in the ideal quadrant (yellow). Below are my wireframe progressions for the location status indicator experience. They are written in the dark blue marker on the quadrant above. I really felt having an animation visualized the complex Hyprloco process and produced a quicker, deeper understanding of how the app worked for the new user. Also after conversations with the iOS developer I understood the coding would only take a bit more time if the animation was simple.

I eventually lost this battle and used text only to explain the location status. In the possible event of adding an extra location indicator (in the last minute), "text-only" changes would take a few hours to fix vs. a few days to fix an animation.

LocationStatusIterations.jpg
Don’t Just Tell, SHOW

Don’t Just Tell, SHOW

Communication was key here. The diagram below was a constantly evolving artifact as it served as the navigational diagram, task flow and a place to keep top-level wireframe annotations. Iterations were made by the Sales team to encompass a full range of client complexities. The iOS Developer and I made iterations after discussing how to simplify some elements and even decided to make one element more complex.

Diagram Flow Final.jpg
My Visual and UI Considerations

My Visual and UI Considerations

The Evolution of the Logo

Color Choice: I scrolled through the many food ordering apps in the Apple Store and noted the primary and secondary colors used for logos. They broke down as follows:

Red-9,     Orange-4,     Green-4,     Black-4,     Blue-1

Red was clearly the dominant color and became my primary color. HyprLoco green became my secondary color to pull in the company’s visual branding.

Copy Choices: “Local Eatery” I made a list of the many types of restaurants. Eatery was short, generic and a great descriptor. I added Local to make it sound approachable.

“Pick-Up”, “Take-Out” or Ordering”: I was told that “mobile pick-up” should be somewhere on the logo to explain what the app does. But I wanted to be sure “Pick-Up” was the right word. To guide my decision I used the Google Trends, Work Comparison Tool. Turns out, Take-Out was googled far more often than Pick-Up. Take-Out was set for several iterations until the Sales team felt Mobile Ordering spoke more to the QSR clients.

HyprLocoAppLogos.jpg
My 5 Considerations for Photography

My 5 Considerations for Photography

1- Free

2- High resolution for the Apple 7 requirements.

3- Professional quality with very little touch-up.

4- Standard, diverse food items that can quickly be identified.

5- A composition that is easily adjusted for multiple cropping.

I considered using multiple images but I risked looking inconsistent in photo styles and subject matter.

SAF_05-Wireframe-annotation.jpg
  Star rating vs. quick single button reply.   The star-rating pattern was chosen for the post survey because it’s a standard pattern in the restaurant industry and would be quickly identified.   Fonts, Sizes and Placement:  I reviewed all the iOS HIG recommendations to keep everything standard and automatically updated.

Star rating vs. quick single button reply.  The star-rating pattern was chosen for the post survey because it’s a standard pattern in the restaurant industry and would be quickly identified.

Fonts, Sizes and Placement: I reviewed all the iOS HIG recommendations to keep everything standard and automatically updated.

My Detailed Role for this Project

My Detailed Role for this Project

I participated in daily stand-up meetings and became an involved member of the HyprLoco Demo Sales App team. I created hi-fidelity wireframes, created annotations for all of the main screens, illustrated logos, touched up the app photo, created exact size photos for the iOS Dev team and presented the clickable prototype I created to everyone in the company. All within 8 days. I am currently on standby for the iOS Development team to supply any needs that arise during development.

Fellow Collaborators

Fellow Collaborators

I really want to thank Dave Batton, iOS Developer, for his patience with my multitude of questions and his guidance in HIG iOS standards. Also Paul Morris, VP of product development for his guidance with the Sales team.

Design Tools

Design Tools

Photoshop_InVision_Sketch_logo.png