Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Inline - Mobile App Concept

1,111 views

Published on

I was challenged to come up with a concept for an app that simplifies the the Take-A-Number systems that are so prevalent in banks and DMVs everywhere. This presentation documents my design process and provides insight into the factors that led to the final mockup.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Inline - Mobile App Concept

  1. 1. Designs by Akhil Dakinedi 03.19.15
  2. 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. 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. 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. 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. 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. 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. 8. APP FLOW 1. PLACES • Near Me • Recents • Favorites • Details of Place 2. IN LINE • Waiting in line • Options 3. ACCOUNT • Account Info
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. USER STORIES IDEATION WIREFRAMES LOOK & FEEL Scenarios Concept Color Typography MOCKUPS Royale Ballroom MassDOT RMV Stag Barbershop APP FLOW APP GOAL BRANDING08
  44. 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. 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. 46. Designs by Akhil Dakinedi 03.19.15

×