Sakura 691
Storyboarding and Wire-framing
Graduate Studies Group Project
The Task:
Develop a series of illustrations representing the user experience with a system that automates restaurant visits. In this system, servers will still physically bring the food, and cooks will prepare it. Still, the design will make all other aspects of the restaurant experience electronic, from seated at a table to ordering to payment. Lastly, document the process at every step.
The Team:
The team for this project consisted of an aspiring and passionate UX research graduate student, an information systems graduate student with a knack for UX design, and myself, an experienced visual designer/front-end developer working on a graduate certificate in UX design.
The Process & Storyboarding:
To help us visualize the user experience, we crafted a brief user scenario, a fictitious family going out to dinner at a Japanese restaurant we named Sakura 691. Next, we worked together to write a step-by-step, comprehensive task flow of the “happy path” through this user scenario using FigJam. Then, we put the steps into a visual task flow diagram for reference. After creating the task flow diagram, we broke it into three more minor task flows to create our storyboards.
User Scenario & Steps
Task Flow
Storyboard
Users entering the restaurant through to opening the menu.
Wireframes
Rationale for Wireframe Designs Utilizing NNG Usability Heuristics
User control and freedom is enabled through the following persistent buttons: Back button, Hamburger menu with About and Food menu, Help button, Edit, Cancel
Visibility of system status: labeled the pages for the Waitlist and the Table Map and also through alters and the wait time countdown clock
Match between system and the real world: shown through compass, ‘you are here’ label, and table layout in the map
Consistency and standards: kept buttons and navigation in the same place as users progress through the screens and the experience
Error prevention: kept buttons a visible size, with ample space between them and away from edges to be clear targets for users.
Recognition rather than recall: kept countdown timer on screen and repeated cues such as when to view the menu
Flexibility and efficiency of use: The help and food menu are always available. The whole experience can also be bypassed with the use of text message updates if the user prefers this shortcut
Aesthetic and minimalist design: The design is clean and does not contain unnecessary elements
Help and documentation: The help button persists and can enable additional service requests