Designs by Akhil Dakinedi03.19.15

CONTENTS

APP FLOW

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

USER STORIES

APP GOAL

Designs by Akhil Dakinedi

BRANDING

03.19.15

APP FLOW

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

USER STORIES

APP GOAL

BRANDING

01

APP GOAL

• Take-A-Number Systems are widely used for organizing queueing systems.

• Can be old school paper-and-card style or computerized versions.

• User may or may not have a “counter” to go to.

Goal: Create an intuitive interface with the most important information that the user needs to know, displayed at a glance.

APP FLOW

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

USER STORIES

APP GOAL

BRANDING

02

USER STORIES

• I want to search for places where I can get in line. • I want to see a list of places near me. • I want a list of recently visited places. • I want to manually be able to search for a places.

• I want to select a place to get in line. • I want to see how busy the place is and what hours they are open. • In busier or complex lines, I want to be able to select my transaction type

so that I can be served faster.

• I want to be able to get in line through the app. • I want to see a confirmation that I am in line. • I want to see how long I have to wait before I am served. • I want to see how many people are ahead of me in line. • I want to know when it is turn to be served. • I want to be able to “reset” my place in line to the end in case I physically

leave the establishment and am not able to make it there in time. • I want to be able to change or add to my transaction type. • I want to be able to leave the line.

• I want to be able to pay through my phone. • I want to be able to link to Apple Pay, Square, and other payment services.

• I want to save my basic contact information. • I want to be able to save my name, phone, email, etc. for next time.

As a user…

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING

03

APP FLOW

1. PLACES • Near Me • Recents • Favorites • Details of Place

2. IN LINE • Waiting in line • Options

3. ACCOUNT • Account Info

APP FLOW

This screen has the most potential for visual representations and intuitive information layouts.

1. PLACES • Near Me • Recents • Favorites • Details of Place

2. IN LINE • Waiting in line • Options

3. ACCOUNT • Account Info

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING

04

IDEATION

Progress indication is crucial.

Must conform to user’s mental model of what a “line” is and what moving forward in a line feels like.

Must not be an overwhelming or confusing visual representation.

Must be universally understood with or without context.

Must supplement other content on screen and not distract from it.

CONCEPT

IDEATION

Transit/subway maps were a big source of inspiration on how they convey start point and end point.

Simply displaying the number is quite an effective solution. We don’t always need a visual representation.

Scrapped the circular “time remaining” idea, as it does not conform to the user’s mental model of waiting in a line.

CONCEPT

IDEATION

Wanted to make sure that this solution can apply to all scenarios: single-service counters and all sorts of complex queueing systems.

Two major axes, wait times and people in line, were analyzed to ensure that there is at least one place in each quadrant where the app will be used.

SCENARIOSLONG WAIT TIME

SHORT WAIT TIME

MORE PEOPLE IN LINE

LESS PEOPLE IN LINE

RMVs

BanksBarbershops

Car Service

Food pickup kiosks

Nightclub entry lines

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING

05

WIREFRAMES

Simplified and minimal visual representation of waiting in line. The dot represents the user. The ring around the dot signifies that the dot is “pulsing” at a rate that relates to how fast the line is actually moving.

Both the numbers together tell a story about how fast the line is actually moving.

Dot moving up the line may not be an obvious mapping of the user moving up in line.

Look & feel options are limited on this layout: either “too boring” or “too much going on” depending on how images are used.

3:25 PM 100%iPursuits

Inline

12mins estimated wait time

5people ahead

of you

Line AccountPlaces

WIREFRAMES

Replaced dot with an actual icon of a person to represent user. Having the entire circular icon move upwards makes it look too much like a slider.

This version shows the icon stay put in place while the line fills up with color as it moves upwards vertically, similar to how a progress bar completes.

Central axis is too prominent; could distract from actual content on page.

Fancy gesture interactions scrapped due to user base; do not want to be teaching them new interactions.

3:25 PM 100%iPursuits

Inline

12mins estimated wait time

5people ahead

of you

Line AccountPlaces

WIREFRAMES

Left-aligned visual line indicator with a visually prominent endpoint is better because it does not distract from the focus of the screen.

User’s eyes are still drawn to the most important things on the screen - the numbers.

Having a relevant image take up the top one-third of the screen is a good compromise between having a full-bleed translucent background image or having no image at all.

Number of people ahead of user is now less salient than time to be served.

3:25 PM 100%iPursuits

Inline

12mins estimated wait time

5people ahead of you

Places AccountLine

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING

06

LOOK & FEEL

Need a soothing color that is pleasing to look at for a long time without being too overwhelming.

Blue is a calming and pleasant color that naturally recedes into the background.

Green is a color commonly used to evoke feelings of movement and motion. A lot of transit apps incorporate green quite well. Green is also the universal color for “Go”.

COLOR

LOOK & FEEL

A simplistic color palette consisting of only two colors was chosen.

Persian Green is a mixture of calming blue and forward moving green. It’s a very pleasant and harmonious color to look at for long periods of time.

Athens Gray complements Persian Green very well. It also provides a nice alternative to pure white for high contrast with a dark grey colored font.

COLOR

Persian Green #00B89C

Athens Gray #EFEFF4

LOOK & FEEL

Made specifically for legibility on screens.

Condensed variant can fit a lot of information in a relatively small space.

Numbers are highly readable from a large distance.

Feels very upright and vertical, similar to a line.

TYPOGRAPHY

Roboto CondensedRoboto Condensed Bold

Roboto RegularRoboto Medium

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING

07

MOCKUPS

Once the user selects “The Royale Ballroom” from the list of locations in the PLACES screen, they are brought to this screen.

Relevant information is displayed, with the option to get in line.

THE ROYALE BALLROOM

MOCKUPS

Once user taps “Get In Line”, dot at the bottom of the line fills up and changes state to signify that the user is in line. Confirmation message displays as well.

If the user has not set notification preferences, they would be prompted for it right after tapping on “Get In Line”.

THE ROYALE BALLROOM

MOCKUPS

Time to be served (estimate) is the most prominent item on the screen. Text size is just large size enough that it adheres to Gestalt psychology principles of dominance and hierarchy.

Image size, text size and text placement is based on the Golden Ratio.

Image has a slight white overlay on top. This layout works with very busy images as well.

THE ROYALE BALLROOM

MOCKUPS

Both “estimated wait time” and “people ahead of you” serve as a countdown.

Time is the most important factor, while number of people is secondary information.

A condensed font allows for good legibility, even when there are three or four digit numbers on the same line.

An off-black color on the Athens Gray background provides for very strong contrast, even from a great distance.

THE ROYALE BALLROOM

MOCKUPS

Tapping the plus icon on the top right of the screen brings up the iOS Action Sheet.

Plus button was chosen because it saves more space than “More” and the actions listed here are edge-cases which users will not frequently perform.

“Reset to end of line” provides an estimate of how long the new estimated wait time would actually be; can still visually compare it to the current wait time.

These two actions should not be buttons on the main screen in order to prevent accidental activation.

THE ROYALE BALLROOM

MOCKUPS

As number of people and time drops to one, the relevant text also updates to say the singular forms of “minutes” and “people”.

Progress bar inches closer and closer towards completion as both numbers approach zero.

THE ROYALE BALLROOM

MOCKUPS

As soon as both numbers hit zero, the termination dot fills up with the Persian Green color to signify completion.

Image also takes on a green gradient from the bottom. This is in line with more Gestalt principles of continuity and similarity. It stands out more and provides even more of an affordance that they are done waiting.

THE ROYALE BALLROOM

MOCKUPS

As soon as numbers hit zero, they animate outwards and custom text appears on the screen.

This text can be set by the establishment to personalize the experience for their customers.

In this case, the ballroom simply says that it is the user’s turn and that they can enter now.

THE ROYALE BALLROOM

MOCKUPS

In a more complex queuing system, the user has the option to select a transaction type before seeing wait times and before getting in line.

A full-screen table view idea was initially proposed, but then scrapped because there is no need to overwhelm the user with a large list of selections when we can simply display the most common transaction types in order.

User can select multiple transaction types if necessary, or pick one and hit ‘Done’ on the top right.

MASS DOT-RMV BOSTON

MOCKUPS

Transaction type displays on top followed by estimated wait time and number of people ahead of the user based on the transaction type that the user picked.

User has the option to not pick a transaction type and simply hit ‘Done’ on the previous screen, in which case the best estimate for a wait time and number of people for a generic transaction displays.

MASS DOT-RMV BOSTON

MOCKUPS

Similar wait screen displayed for this transaction. Consistency of information display for any sort of “waiting” in line is good.

In this case, the image would not translate very well to a full-screen translucent background as it is not very visually appealing.

This sort of display with the image taking up only a portion of the screen works well in that the feel of the “waiting” screen is not dictated entirely by the image.

MASS DOT-RMV BOSTON

MOCKUPS

Action Sheet in this case has one additional item. If it is a complex queue, user has the option to change their transaction type or add to their currently selected transaction.

The new estimated wait tim on “Reset to end of line” is still visually comparable to the current wait time in the background.

MASS DOT-RMV BOSTON

MOCKUPS

In transactions where the user has to pay a fee, they can link with Apple Pay, Square, or Stripe in the ACCOUNT section while they wait for their turn.

It is always easy to get back to the LINE section to check your turn by simply tapping the option in the tab bar at the bottom.

MASS DOT-RMV BOSTON

MOCKUPS

If the numbers hit zero and the user is not in the app, they either get a push notification or a text message alerting them that it is their turn.

In the ACCOUNT section, the user has the option to select how soon they want to be alerted (ex: 2 mins before, 30 secs before, etc).

MASS DOT-RMV BOSTON

MOCKUPS

In this case, the custom text tells the user which counter to go to.

The counter number updates dynamically as the user moves up in line, so it is not feasible to display the counter number until it is actually confirmed at the end.

MASS DOT-RMV BOSTON

MOCKUPS

In this case, the user has selected multiple transaction types.

This is one of the few sections of the app where they can actually scroll down the page. Since the most common transactions are displayed at the top, the need for scrolling is very little.

STAG BARBERSHOP

MOCKUPS

In this case, the section header simple says “Multiple Transactions”.

This is a good example of a long wait time with very few people in line. If two of the people decide to leave the line, the wait time will drop significantly. This is why it is a good idea to display both wait time and number of people in line.

STAG BARBERSHOP

MOCKUPS

The custom image selected by this barbershop reinforces their own brand identity and also serves as a visual confirmation to the user that they are in line for the right thing.

This is a good example of why an overlaid title on the image is not the best idea. The establishment could choose to display something like this, which would clash heavily with the title overlaid on top.

STAG BARBERSHOP

MOCKUPS

In this barbershop, the “counters” move dynamically based on whichever one is free. Therefore, the most important information here is who your barber is, not where to go.

The barbershop has also chosen to display a friendly thank-you message to the user.

STAG BARBERSHOP

MOCKUPS

This is what the user would see if they tap on “Line” without actually selecting a place. It is the empty state for this screen.

The user has the options to browse places, which takes them to the PLACES section of the app.

The user can access all previous lines they have waited in from the ACCOUNT section of the app.

EMPTY STATE

USER STORIES

IDEATION

WIREFRAMES

LOOK & FEEL

ScenariosConcept

ColorTypography

MOCKUPSRoyale BallroomMassDOT RMV

Stag Barbershop

APP FLOW

APP GOAL

BRANDING08

BRANDING

The verticality of Roboto Condensed promotes the “line” aspect of the brand.

The uppercase “I” and the lowercase “L” look like straight vertical lines, even further enhancing the brand identity. The verticals of the dual “N”s also help this case.

Wanted a simplistic typographic identity for a logo, where a small part of the “line” is incorporated into the logo in the form of the dot on the lowercase “I”.

The process of “taking a number” has simple turned into “waiting in line”.

It takes a huge amount of cognitive load off of the user, as they don’t have to memorize what their number is and constantly double-check the “Now Serving” screen.

Moreover, there is no “Now Serving…” voice constantly begging for the user’s attention. Instead, they are simply alerted when it is their turn to go. A friendly estimate of how long they can expect to wait is displayed as well. I

f the user does happen to leave the app, there is always the notification or the text message to remind them that their turn is either coming up soon or that it is their turn.

Designs by Akhil Dakinedi03.19.15