nom.bravoUX Portfolio                    John E. Thompson               Nerdery Interactive Labs, June-August 2011
John Thompson - nom.bravo               Contents                4   nom.bravo Process Plan              31 Designing the I...
John Thompson - nom.bravo                nom.bravo                Overview                157.5 hours  (meetings included)...
John Thompson - nom.bravo - Overview                nom.bravo Process Plan                This project brought a unique se...
John Thompson - nom.bravo                nom.bravo                Defining the Project                 What Is nom.bravo? ...
John Thompson - nom.bravo - Defining the Project                 What Is nom.bravo?                 nom.bravo is a propose...
John Thompson - nom.bravo - Defining the Project                 Project Scope                                            ...
John Thompson - nom.bravo - Defining the Project                 Outlining the Problem                 I knew what nom.bra...
John Thompson - nom.bravo                nom.bravo                Defining the Project                Researching the Proc...
John Thompson - nom.bravo - Researching the Process                Process Research                 I detailed the current...
John Thompson - nom.bravo - Researching the Process                Contextual Observation                 To familiarize m...
John Thompson - nom.bravo - Researching the Process                Content Audit                 Along with holistically a...
John Thompson - nom.bravo - Researching the Process                Previous Process Flow                 Now that I had bo...
John Thompson - nom.bravo                nom.bravo                Defining the Project                Researching the Proc...
John Thompson - nom.bravo - Understanding the Audience                Research Methodology                I currently take...
John Thompson - nom.bravo - Understanding the Audience                The 4 Cs                I outlined, on four large sh...
John Thompson - nom.bravo - Understanding the Audience                Empathy Map                I created an empathy map ...
John Thompson - nom.bravo - Understanding the Audience                User Types                Having the process flow an...
John Thompson - nom.bravo                nom.bravo                Defining the Project                Researching the Proc...
John Thompson - nom.bravo - Improving on Existing Applications                 Heuristic Analysis                 I then a...
John Thompson - nom.bravo - Improving on Existing Applications                 Grub Hub                                   ...
John Thompson - nom.bravo - Improving on Existing Applications                 Chipotle Online Ordering                 Ch...
John Thompson - nom.bravo - Improving on Existing Applications                 Nerdery Mainframe                 The Nerde...
John Thompson - nom.bravo - Improving on Existing Applications                 Key Characteristics                 In comp...
John Thompson - nom.bravo                nom.bravo                Defining the Project                Researching the Proc...
John Thompson - nom.bravo - Architecting the Content                 Mental Map                 A mental map is a chart of...
John Thompson - nom.bravo - Architecting the Content                 Ideal Process Flow                 A new way to handl...
John Thompson - nom.bravo - Architecting the Content                 Detailed Flows                 Schedule restaurants a...
John Thompson - nom.bravo - Architecting the Content                 Staff Site Map                 I created a site map t...
John Thompson - nom.bravo - Architecting the Content                 Admin Site Map                 Then I outlined the wi...
John Thompson - nom.bravo                nom.bravo                Defining the Project                Researching the Proc...
John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes                 Wireframes                 With ...
John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes                 Frontend Wireframes             ...
John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes                 Select Restaurant               ...
John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes                 Generic Menu                    ...
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
UX Portfolio - nom.bravo
Upcoming SlideShare
Loading in …5
×

UX Portfolio - nom.bravo

3,223 views

Published on

Full portfolio of work for nom.bravo internal food ordering process at Nerdery Interactive Labs.

Included: process plan; project definition; process research; user research; heuristic analysis; information architecture (mental map, process flow, site map); interface design/wireframes.

Portfolio created by John E. Thompson.

Published in: Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,223
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
0
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

UX Portfolio - nom.bravo

  1. 1. nom.bravoUX Portfolio John E. Thompson Nerdery Interactive Labs, June-August 2011
  2. 2. John Thompson - nom.bravo Contents 4 nom.bravo Process Plan 31 Designing the Interface Frontend Wireframes (pp. 34-38) 5 Defining the Project Admin Wireframes (pp. 40-48) What Is nom.bravo? Visual Design Project Scope Outlining the Problem 50 About 9 Researching the Process Contextual Observation Content Audit Previous Process Flow 14 Understanding the Audience Research Methodology The 4 Cs Empathy Map User Types 19 Improving on Existing Applications Heuristic Analysis Grub Hub Chipotle Online Ordering Nerdery Mainframe Key Characteristics 25 Architecting the Content Mental Map Ideal Process Flow Site Map 2
  3. 3. John Thompson - nom.bravo nom.bravo Overview 157.5 hours (meetings included) UX Framework Project Definition User Research 24 work days Information Architecture June 14 - July 18 Interface Design 3
  4. 4. John Thompson - nom.bravo - Overview nom.bravo Process Plan This project brought a unique set of challenges and required a whole new toolset to help analyze and solve a problem. First, I My Process: had to figure out the general UX plan, then I executed it. Define the Project 1 I needed to figure out what nom.bravo actually is and what the stakeholders desire it to be. This is the ideal. Due to the project timeline and my own Research the Process familiarity with the UX process at the time, the "Researching the Process" and 2 I then had to figure out what is already being "Understanding the Users" steps were done to avoid making the same mistakes and truncated and replaced by a multiple- iteration wireframe-and-review process. "reinventing the wheel." Understand the Users 3 People are going to have to use and react to this new process; I needed to understand how to meet their needs, and exceed them! Architect the Content 4 Before I wireframe the new system, I needed to know the tasks and elements required and how they relate to the new process flow. Design the Interface 5 Finally, Ill take everything I have researched, learned, and organized, then present a wireframe set to the stakeholders. A revised set will be handed off to development. 4
  5. 5. John Thompson - nom.bravo nom.bravo Defining the Project What Is nom.bravo? Project Scope Researching the Process Outlining the Problem Understanding the Audience Improving on Existing Applications Architecting the Content Designing the Interface 5
  6. 6. John Thompson - nom.bravo - Defining the Project What Is nom.bravo? nom.bravo is a proposed improvement to an internal lunch process. The goal was to reduce administrative hours spent My Process: managing lunch orders and streamline food ordering. Interviewed Stakeholders The projects development leads, project manager, UX team (myself and my mentor), and stakeholder met to discuss the project scope seen on the following page. High-level requirements and objectives were established. Defined Requirements A "scope of work" Google document outlining key requirements had already been created. Throughout the project, I would reference this document. Outline the Problem After I knew what the people backing the project wanted, I took a step back and hammered down the main goals and objectives of nom.bravo. 6
  7. 7. John Thompson - nom.bravo - Defining the Project Project Scope nom.bravo Scope of Work The purpose of the nom.bravo application was to automate the daily internal lunch ordering process of the Nerdery Bloomington location. Employees would be able to create orders as Before research was conducted, I met with the stakeholders, part of a larger group order, which was sent to specific restaurants. The application would also backend development leads, and the project manager to allow for lunch scheduling, order placement, and financial reporting (primarily for payroll accounting). discuss and specify high-level requirements and objectives. A summary of the scope of work is shown. Restaurants - Jimmy Johns (Bloomington) The product itself was undefined, but we did know it would be integrated into the - Possibly Chipotle (Bloomington) company mainframe. - Generic menu order form for other restaurants, along with a link to their online menu Ordering Features - Orders may be placed/edited/deleted during an open ordering time. - Users can order one or more times. - Users may select orders to be comped, with a reason. The Ordering Process 1. User logs into nom.bravo. 2. User selects restaurant. 3. Users creates order or edit existing order, based on restaurant selection. 4. User submits order. Accounting Features - Export a selected days orders to a CSV for reconciliation and reporting. - Group orders by payer for ease of reconciliation. Administration Features - Add and remove menu items - Update menu item pricing - Select restaurants for the day - Select start/stop times, if different from default - View and maintain order records - Create group order for submitting to a restaurant *Not shown: Milestones and timeline 7
  8. 8. John Thompson - nom.bravo - Defining the Project Outlining the Problem I knew what nom.bravo was supposed to be and what the clients and stakeholders wanted, but I had a few questions to answer about food ordering at the Nerdery on the whole: What is the overriding problem? What are the goals of this project? What are the objectives? The internal food ordering process is complex, - Reduce those work hours spent by admin by - Admin has more time for work that absolutely riddled with emails, and is time-intensive. about half (of ~6 hours a day) or more. require human touch points. - Automate food ordering. - Reduce the ratio of administrative work hours - Integrate with payroll accounting. to the increasing amount of lunch orders. - Reduce human error in data handling. - More timely and accurate accounting reports. - Lessen order errors and mishandling. 8
  9. 9. John Thompson - nom.bravo nom.bravo Defining the Project Researching the Process Contextual Observation Content Audit Understanding the Audience Previous Process Flow Improving on Existing Applications Architecting the Content Designing the Interface 9
  10. 10. John Thompson - nom.bravo - Researching the Process Process Research I detailed the current process by researching who was involved, what they were using, and their methodology. My Process: Contextual Observation I shadowed one administrative staff member through two rounds of food ordering (6 hours total). I noted pain points, inefficiencies, shortcuts, challenges, and people contacted. Content Audit Along with holistically analyzing the process, I also collected all general documents and noted key computer and web applications used by staff and admin. Outlined Previous Process Flow I brought all of this research together to show the process as it was to effectively identify and incorporate improvements. 10
  11. 11. John Thompson - nom.bravo - Researching the Process Contextual Observation To familiarize myself with the pain points, challenges, and eccentricities of the process, I shadowed the administrative staff tasked with handling food ordering. Begin... 1 2 3 4 CMD-C CMD-V CMD-C CMD-V I scheduled two four-hour time I prepared a note-taking When the time came, I sat next When all the staff had received slots with the primary template, complete with to the administrator as she orders and sent their orders administrator. symbols for (1) pain points, (2) began the process, starting with back in, I observed as the challenges, (3) shortcuts, and (4) sending email announcements. orders were copied and pasted contacted people. from email into Excel and Word. 5 6 7 8 TY! The rest of the sessions I remembered to thank the I asked the administrator to Then I translated everything I consisted of two faxing sessions admin for taking the time to let supply me with examples of all wrote into a visible diagram. and two to three hours of me observe and take notes. the documents used. See Previous Process Flow (page after next) entering orders into accounting See Content Audit (next page) ...done! spreadsheets. 11
  12. 12. John Thompson - nom.bravo - Researching the Process Content Audit Along with holistically analyzing the process, I also collected all general documents and noted key computer and web applications used by staff and admin: Gmail Online Menus / Internet Microsoft Word Google Docs Email was the primary mode of Aside from Chipotle (which had a specific Used by admin to keep track of temporary Used by both staff and admin, mostly for communication for the process (ordering order form), staff derived their orders from data, such as fax-able orders and lists of staff ordering food through the Chipotle order food, announcing close times, reporting online menus from each restaurant. members who have earned free lunches. form (below). order errors, etc.). Google Calendar Restaurant Information Sent Lunch Order Form Existing Order Form An existing lunch calendar displays the Used by admin to store restaurant Used by staff to fax to certain restaurants (in Used by staff to order food through restaurants available for the day as well as information and primary contacts. this case, Golden Wok). Chipotle. The data is sent to the admin. their close times. Example Lunch Worksheet Multi-field Excel sheet used by admin to manually enter orders, names, and costs per group order (for each restaurant) 12
  13. 13. John Thompson - nom.bravo - Researching the Process Previous Process Flow Now that I had both seen the admin handle food ordering in KEY action and had familiarized myself with the admin toolset, I Shortcut Pain point outlined the process flow, as seen from the administrators (unnecessary) Call made perspective. I noted pain points, challenges, and shortcuts. Challenge (inherent) Email(s) sent *Not shown: Chicago food ordering; Chipotle Bloomington food ordering; notifying Shout Out free lunch winners. Check which Copy-paste-send Copy-paste Copy-paste-send Reformat all orders continued... restaurants are template email received orders template email from spreadsheet Begin... scheduled for the requesting lunch (name, order, announcing into a fax-able day orders instructions) ordering is closed document. Memorize Tracking Email Manual entry nicknames spamming restaurants Adding a Tracking Multiple data Staff misses restaurant visiting values order due to Chicago meeting employees Copy-paste-send Finalize order data Fax document to template email Handle order on restaurant Receive food each restaurant. announcing food errors lunch order has arrived spreadsheets Call to ensure Resolving Copy-paste Late food receipt of fax disputes alters text arrival format Restaurant Notify fax goes restaurant of unnoticed order errors Copy-paste Name, Adjust employee Reconcile receipt Combine each Update Order, and Price of costs for comped with estimated lunch order spreadsheet data all orders into (company-paid) food cost (from spreadsheet into as required spreadsheet orders spreadsheet) "big spreadsheet" Memorize Comped info Acceptable Human error Prioritizing menu prices in separate range: +/- $3 within data orders for Word doc. manipulation executives Locating the Shout Outs spreadsheet (free lunches) Ensure there are Send "big (Lunch costs Notify free lunch restaurants spreadsheet" to accounting deducted from paychecks) winners (for future ordering) planned for the ...done! following day 13
  14. 14. John Thompson - nom.bravo nom.bravo Defining the Project Researching the Process Understanding the Audience Research Methodology Empathy Map Improving on Existing Applications The 4 Cs Architecting the Content User Types Designing the Interface 14
  15. 15. John Thompson - nom.bravo - Understanding the Audience Research Methodology I currently take an agnostic approach to figuring out how users think and how to best suit their needs. For this project, I wanted My Process: to know who the general users are, how they behave, what they might be thinking and feeling, and what they might require with C C C C Outlined the 4 Cs the proposed food ordering system. Thats a lot of information, I created a table outlining the Components required, production and usage Challenges, so I took three related and integrated approaches. functional and aesthetic Characteristics, and the Characters involved. Created an Empathy Map I identified the thoughts, actions, sights, and feelings for two main "characters," as well as their goals and needs with respect to ordering food. Constructed User Types I identified the two basic, primary user types and one secondary user type from the list of "characters." 15
  16. 16. John Thompson - nom.bravo - Understanding the Audience The 4 Cs I outlined, on four large sheets, the Components required for the system to work at a minimal level, the Challenges the users and the design and development team would face, the suggested Characteristics of the system, and the Characters who will be utilizing it. I bolded the high-priority items. Components Challenges Characteristics Characters * Database * Price accuracy - Step-by-step * Recurring/stable admin * Admin console * Comparing physical receipt to est. cost - Minimal instructions - New/substitute admin - Restaurant manager - Negotiating with restaurants * Practical and quick to implement - Support (developers?) - Scheduler - Resolving order errors * Scalable * The food orderer * Order manager * Ensuring order changes reflect cost - Uses company stylesheet - The expert user * Exporting reports - Uploading custom menus - Robust at data handling - "High maintenance" food orderer * Export group orders - Scalability of application/process - Admin overrides (into staff-submitted data) * Recurring/stable accountant - Menu manager - Comprehensive error messaging * Easy forms - New/substitute accountant - Reconciliation page - Data tracking, sorting, exporting by - Professional (relative to the company) - Error reporter - Confirmation dialogs multiple date ranges (daily, weekly, 15-day) - Readable text - Delivery person - The food itself - Syncing with company mainframe - Simple interface * Store owner/manager (primary contact) * Food ordering system (menu forms, - Ordering food on time - Less (or no) email communication - Cook (food service professional) order confirmation, comping orders) * Exporting reports in correct format - User-agnostic / usable by anyone 16
  17. 17. John Thompson - nom.bravo - Understanding the Audience Empathy Map I created an empathy map (summarized here) from subjectively analyzing what a user may think, do, see, and feel when performing the project-related action (in this case, ordering food). The goal was to put myself in the users shoes. Think Do See Feel - "Why does this take so long?" - Type names and orders - Excel spreadsheets - Responsibility - "Did I remember everything?" - Fax group orders - Menu orders - Disoriented - "Who has a free lunch today?" - Email staff - Emails - Concerned / worried - "What restaurants are - Notify accounting - Word documents - Overwhelmed scheduled for today, again?" - Call restaurant - $X.XX - Relieved (when its over) - ... - ... - ... - ... Admin Needs Goals - Get orders from staff - All orders are correct - A way to record and export orders - Not so many emails sent - Specify order close times - Reduce time spent handling process - Phone, fax, email, Internet - All files and data in one location Think Do See Feel - "What do I want to eat?" - Pick a menu item - Online menus - Hunger - "When does my food arrive?" - Email order to admin - Multiple emails - Jealousy ("Wheres MY food?") - "Why so many emails?" - Locate food. Eat food. - Names on food wrapping - Angry/disappointed - "Shoot. I forgot to order!" - Notify admin of order errors - Pay stub (minus food costs) - Apathetic - ... - ... - ... - ... Staff Needs Goals - Food - Get food by noon - Notification that ordering is open - Save orders / order in advance - Ability to order food - Reduce lunch costs - A restaurant/menu to order food from - More restaurant and food options 17
  18. 18. John Thompson - nom.bravo - Understanding the Audience User Types Having the process flow and basic characters figured out, I knew how food ordering worked. Now I needed to identify the main users. What happened to What does this It would be neat if we had my side of guac? order say? our own internal Grub Hub! Admin Staff Vendor PRIMARY PRIMARY SECONDARY - The person handling the internal food - Those employees who do not bring in food - Store owner or manager working a hectic ordering process every day lunch hour - A company employee - Usually a young professional - Familiar with using a fax machine - Familiar with the internal politics and - Very adept at using complex applications - Receive orders in a specific format personalities - Hungry, but patient and respectful of the - Possibly not fluent in English - Looking to reduce the amount of time and admins efforts energy spent dealing with handling this process 18
  19. 19. John Thompson - nom.bravo nom.bravo Defining the Project Researching the Process Understanding the Audience Improving on Existing Applications Heuristic Analysis Grub Hub Architecting the Content Nerdery Mainframe Designing the Interface Chipotle Online Ordering Key Characteristics 19
  20. 20. John Thompson - nom.bravo - Improving on Existing Applications Heuristic Analysis I then analyzed the positive and negative aspects of existing sites, methods, and applications. Grub Hub and Chipotle both Why I Analyzed... served as inspirations for the interface, while the Nerdery Mainframe served as a constraint for the interface components. ...Grub Hub: This application was explicitly mentioned by a The CSS styles and functional components (form fields, date selectors, etc.) for nom.bravo were predetermined, so I concentrated more on the process and practical key user. Its a tried system, is incorporated into features of each application, rather than aesthetics. 13 cities, and is actually used by the companys Chicago location. ...Chipotle Online Ordering: Chipotle is the second most commonly ordered-from restaurant at the company, and the key admin user fills out the Chipotle online ordering form for placing orders. ...the Nerdery Mainframe: Part of the stakeholder requests was that it integrate within the mainframe. And with a tight development timeline, we would duplicate certain selectors and input methods. 20
  21. 21. John Thompson - nom.bravo - Improving on Existing Applications Grub Hub Easy Undo Some people often Grub Hub (grubhub.com) is an online food ordering system switch orders last- open to the general public. Many aspects of this application minute. Grub Hub gives them this would take up too much time to implement, so I identified capability, in a digital elements integral to the process of ordering online. context. Simple Top Nav Obvious Steps Call-to-Action Prices Next to Adding Extra Global navigation is Large, bold type with within Button Items Items Is Easy easy to track and actionable fields A simple and Listing prices next to Simple checkbox keeps to a near- immediately below it commanding button individual items forms are easy to minimum three tabs. make it clear where leading to the next (versus only in the code, recognizable by the user is supposed clears up the path order summary) all potential Informative to start. even more. ensures the user can nom.bravo users. Order Summary afford the order. All the pertinent information is clearly and concisely laid out, including full pricing Grub Hub Food Ordering Process (Simplified) information (subtotal, total, tax, and tip). Choose restaurant Specify delivery Type address Add menu items Finish ordering Place order from list or map instructions 21
  22. 22. John Thompson - nom.bravo - Improving on Existing Applications Chipotle Online Ordering Chipotle is Mexican restaurant specializing in burritos. Their online ordering process is aesthetically pleasing and is actually utilized by the companys administrator when ordering food. Disabled Allow Order Helpful Error "Continue" Editing/Deleting Messages Buttons Categorized, Simple Form Users may easily edit Forms induce Chipotle ensures all or delete individual mistakes. Before an Ordered Options Radio buttons imply a required data is items within their order is completed, Chipotle mimics its single choice. collected by halting order. Chipotle verifies all onsite ordering Checkboxes imply the process until a submitted data is in a process by sorting its multiple choice. user completes a correct format. add item process Indenting "Guac required action. Included" implies that into chunks (i.e. "What Goes Inside"). option lies under "Veggie". Chipotle Online Food Ordering Process (Simplified) Choose Chipotle Add menu items Specify payment Specify pickup Register/Sign In Enter ZIP code Send order location "to Bag" method time (no deliveries) 22
  23. 23. John Thompson - nom.bravo - Improving on Existing Applications Nerdery Mainframe The Nerdery Mainframe is an internal console, containing a Date Selector Users will likely need timesheet, a work order manager, and many other work-related to pick dates (and features. I spotted existing interaction patterns that would be times) via this standard JQuery date needed for the nom.bravo interface to function. selector. Header Dropdown Select Form Fields with Footer Tab Navigation Tables Buttons The Mainframe uses We will likely use this Auto-Suggest The entire Mainframe Global tab navigation Since there will need Button styling is very the same logo, login, space-saving selector. These will help save uses the same footer would be a good to be an admin consistent throughout profile, and search time on form field with a link for choice for the console with recorded the Mainframe. We elements in the entire data entry. feedback and interface, since the order data, there will will continue this backend. copyright information. staff is already familiar most likely be a need consistency through with it. for a table. nom.bravo. 23
  24. 24. John Thompson - nom.bravo - Improving on Existing Applications Key Characteristics In comparing Grub Hub with Chipotle and the Mainframe, I noticed some key commonalities and must-haves for the new food ordering process and accompanying interface. Structured Consistent 1. "Where are you ordering from?" - The process is the same every time (though 2. "What will you be ordering?" restaurants and items may change). 3. "Where (or to whom) is the order going?" - The interfaces have a familiar style. 4. "Are you ready to send the order?" 5. [Order sent] Reversible Easy to (Un)do - User may go back one step in the process. - The steps to ordering food are unambiguous. - User can delete items. - One main action per step (i.e. "add items"). - User can start the order over. - If the user makes an mistake, theres always a quick way to reverse the last action. Repeatable Informative - User may add more than one item per order. - Descriptions for non-obvious menu items - User may submit multiple orders. - Prices for non-free items - Clear labels for actionable buttons - Section headers for each step (and each page) 24
  25. 25. John Thompson - nom.bravo nom.bravo Defining the Project Researching the Process Understanding the Audience Improving on Existing Applications Architecting the Content Mental Map Ideal Process Flow Designing the Interface Site Map 25
  26. 26. John Thompson - nom.bravo - Architecting the Content Mental Map A mental map is a chart of all tasks that users and admin will be able to perform on the site, with the underlying features that support those tasks. I combined this with the scope of work and user research to prioritize and identify all necessary features. 1. Compile list of tasks. 2. Write them on sticky notes. First, I organized all the tasks I could think of on I then hand-wrote those tasks on several dozen a sheet of paper. sticky notes of different colors (blue for sections, yellow for granular tasks). 3. Sort, supplement, and strike. 4. Review and prioritize. I sorted those notes via general affinity on a Once I had all my sticky notes ordered, I would large sheet of paper. Then I reorganized them consult with development first, then by section and category. stakeholders (and repeat step 3). 26
  27. 27. John Thompson - nom.bravo - Architecting the Content Ideal Process Flow A new way to handle food ordering was created. I combined the prioritized features and elements from the mental map with key characteristics and example processes from heuristic analysis, then ensured they lined up with stakeholder, client, and user needs. [Detailed flows] are on the following page. Ordering Ordering Food arrives Data handled open closed (w/receipt) and exported To: Schedule Send email To: Allocate Save actual Deduct Export group To: Send/fax Admin restaurants & order group orders that food has arrived actual costs (from receipt) cost values (in database) allotted costs from pay close times Save Fax-able Adjust actual Group orders CSV System restaurants & by restaurant report food prices exported close times exported and totals To: Order To: Receive Staff food food 27
  28. 28. John Thompson - nom.bravo - Architecting the Content Detailed Flows Schedule restaurants and Log in to Go to Select week Select Set close time for each Save Return to Schedule to schedule restaurant(s) Schedule close times nom.bravo page restaurants for the day(s) restaurant schedule main page Call vendor Export group Print group Walk to fax Fax group Return to Send/fax group orders order order machine order to ensure work station receipt of fax if actual costs differ >$3.00 from estimated costs Allocate costs (from Record/note Record/note Locate cost Solve cost Adjust new Save actual estimated cost values receipt) actual costs costs discrepancies discrepancies cost data (in database) else: bypass steps if comped order: Choose Choose (one) To: Add Choose View order View/edit Order food Nerdery restaurant items to summary reason for Place order order workspace from list order comping else: bypass step if orders wrong: (Admin sends Report order Walk to Locate and Return to Receive food email about kitchen pick up food Eat food error(s) to work station food arrival) admin else: bypass step if more items needed: Choose (one) Select menu Select menu Add toppings Add Repeat: Add Type special Add items to order restaurant category item and extras instructions completed items to from list (i.e. 8" Subs) (i.e. BLT) (subitems) item to order order else: View order summary 28
  29. 29. John Thompson - nom.bravo - Architecting the Content Staff Site Map I created a site map to see what needed to be wireframed for development. I started with the frontend. Location Staff Select Order Food View Order Order Review Order Summary (not editable) Error Select Place Order Reporting Restaurant Instructions Add Items Comp Order Subitems Comping Menu Categories Items (toppings, Options etc.) Element Page element Multiple element (text, form, icon, pages etc.) Order Summary (editable) 29
  30. 30. John Thompson - nom.bravo - Architecting the Content Admin Site Map Then I outlined the wireframing "needs" for the admin end. Admin Schedule Restaurants Orders Reconciliation Accounting List of Group Orders List of Names Month View Group Orders Restaurants (by restaurant) and Totals Export Export Group Week View Online Menu Accounting Order Report Report Export Group Order Report Element Page element Multiple element (text, form, icon, pages etc.) 30
  31. 31. John Thompson - nom.bravo nom.bravo Defining the Project Researching the Process Understanding the Audience Improving on Existing Applications Architecting the Content Designing the Interface Wireframes Introduction Frontend Wireframes Admin Wireframes Visual Design 31
  32. 32. John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes Wireframes With the site mapped and process laid out, I could begin designing the interface via annotated wireframes. My Process: Created Wireframe Drafts I first created a set of wireframes for the staff- side "frontend." Those underwent several iterations. Then I wireframed the admin console. Reviewed and Iterated Once each draft of wireframes were completed, they were presented to the development team, stakeholders, client, and project manager. Changes and improvements made during those meetings were implemented. Consulted with Development When I was unsure of what approach to take with the interface, I gathered advice from UX, HTML/CSS, and PHP/database experts. Hand Off to Development Wireframes were finalized and handed off to the front-end development team. Due to a tight timeline, the database was developed simultaneously with wireframing and front-end development. 32
  33. 33. John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes Frontend Wireframes First, we tackled the frontend, or staff side of the food ordering interface. 33
  34. 34. John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes Select Restaurant Staff Featured Order Food View Order 4 Your current location is Bloomington, MN 3 ORDER FOOD Select a restaurant from those available today. 1 1 List of available restaurants for the day. Jimmy Johns [on click] To either a generic menu form (p. 35) or 1 2 Chipotle custom menu form (p. 37) for that restaurant. Davannis Select Nerdery workspace location from dropdown: Proceed to Menu 2 3 Your current location is Bloomington, MN Bloomington, MN Chicago, IL <NERDERY WORKSPACE> <NERDERY WORKSPACE> 4 [on click "View Order"] To View Order screen (p. 39), which displays all menu items ordered for the current date. 5 When it is past the order close time, the following replaces the page header and restaurant select: ORDERING CLOSED Please wait until after <ORDER OPEN TIME>, then return and place your order. Send all order errors to <ADMIN CONTACT EMAIL>. Do not alert the admin in person or via phone. 34
  35. 35. John Thompson - nom.bravo - Designing the Interface - Frontend Wireframes Generic Menu Staff Featured Order Food View Order Your current location is Bloomington, MN 1 [on click "Link to full menu"] Goes to an external page or PDF of that restaurants online menu. <RESTAURANT NAME> Change Restaurant Please complete your order. Order Summary 2 User may not continue until the required Item and Sides field is completed. <RESTAURANT NAME> Order Form Linguine with clam delete 5 <RESTAURANT NAME> Order Form Link to full menu Link to full menu 1 sauce and garlic bread Sauce on the side Item and Sides Linguine with clam delete sauce and garlic bread Linguine with clam sauce and garlic bread Sauce on the side 2 3 Special instructions are optional and include a character Linguine with clam sauce and garlic bread delete Special Instructions Sauce on the side counter (140 total). Sauce on the side 3 6 Continue 126 characters left 4 [on click "Add to Order"] Adds the item to complete Start Over 7 Add to Order 4 order. User may add multiple items per order. 5 [on click "delete"] Removes the menu item from the Order Summary and deletes the menu item data. 6 [on click "Continue"] To Review & Place Order screen. 7 [on click "Start Over"] Prompts Start Over modal: Start Over Are you sure? Your order will be completely erased. This cannot be undone. Cancel OK [on click "OK"] Deletes entire order and sends user to Select Restaurant screen (previous page). 35

×