This document outlines the design of a mobile app for managing queues and wait times. It includes sections on app flow, wireframes, look and feel designs, user stories, and mockups of the app in use for different queueing scenarios like a barbershop, DMV, and ballroom. The goal is to create an intuitive interface that displays important wait time and position information to users. Visual designs incorporate calming blues and greens. Mockups demonstrate how users could select a location, get in line, see estimated wait times and position updates, and be alerted when their turn is up.

1. Designs by Akhil Dakinedi
03.19.15

2. CONTENTS
APP FLOW
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
USER STORIES
APP GOAL
Designs by Akhil Dakinedi
BRANDING
03.19.15

3. APP FLOW
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
USER STORIES
APP GOAL
BRANDING
01

4. 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.

5. APP FLOW
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
USER STORIES
APP GOAL
BRANDING
02

6. 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…

7. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING
03

8. APP FLOW
1. PLACES
• Near Me
• Recents
• Favorites
• Details of Place
2. IN LINE
• Waiting in line
• Options
3. ACCOUNT
• Account Info

9. 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

10. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING
04

11. 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

12. 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

13. 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.
SCENARIOS
LONG WAIT
TIME
SHORT WAIT
TIME
MORE PEOPLE
IN LINE
LESS PEOPLE
IN LINE
RMVs
Banks
Barbershops
Car Service
Food pickup
kiosks
Nightclub
entry lines

14. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING
05

15. 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
12
mins estimated
wait time
5
people ahead
of you
Line AccountPlaces

16. 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
12
mins estimated
wait time
5
people ahead
of you
Line AccountPlaces

17. 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
12
mins estimated
wait time
5
people ahead
of you
Places AccountLine

18. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING
06

19. 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

20. 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

21. 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 Condensed
Roboto Condensed Bold
Roboto Regular
Roboto Medium

22. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING
07

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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

43. USER STORIES
IDEATION
WIREFRAMES
LOOK & FEEL
Scenarios
Concept
Color
Typography
MOCKUPS
Royale Ballroom
MassDOT RMV
Stag Barbershop
APP FLOW
APP GOAL
BRANDING08

44. 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”.

45. 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.

46. Designs by Akhil Dakinedi
03.19.15