Design is ultimately about creating experiences for people. When considering solutions to common, albeit complex socio-technical problems, designers must give special attention to the interplay of the social and physical context, information, and user behavior. The goal of this team-based assignment is to envision and build an interactive, intelligent, and innovative kiosk designed for one of three context briefs listed below. Teams should strive to introduce a concept that’s unique for the marketplace, feasible, and desirable for a target context articulated by each team as they work to address the design brief.
Teams will be assigned by the instructors and comprised of ~4-5 people within sections to best utilize weekly studio meeting times.
- Doing online research to understand a problem
- Conducting semi-structured interviews
- Cultivating empathy toward users and creating personas
- Creating storyboards
- Framing a problem based on user research
- Ideating and refining concepts
- Sketching and making physical prototypes
- Testing prototypes with users
- Understanding how sensors/hardware and displays can integrate into a user experience
- Creating a moodboard and color scheme
- Developing and implementing a design language for multiple screens/artifacts
- Creating digital screen designs and clickable prototypes to demonstrate key interactions
- Communicating design ideas to others
Automated or semi-automated kiosks have been increasingly integrated into the brick-and-mortar experiences. While they have become commonplace in supermarkets and big-box retailers, there are undoubtedly many ways that such systems can innovate and reshape user experience across a variety of sectors. An interactive kiosk has the potential to address current limitations and frustrations that many customers encounter, such as having to wait in line for customer service. Furthermore, through the use of new sensors and clever interaction design, kiosks can also enable novel and personalized user experiences.
The goal of this team-based assignment is to design an interactive kiosk that leverages physical interaction with users and objects to create an experience that is intuitive, consistent, and reliable, as well as thoughtful and delightful in its implementation. Teams should choose a context where people currently need to wait in line to see a human service provider, or where physical interaction with objects and/or users can enable whole new kinds of user experiences. Choose one of three contexts:
- Retail settings. Examples might include purchasing food, clothing, electronics, or any other product. The goal here is to improve the point-of-purchase (POP) process by making it smoother and faster, as well more engaging and personal.
- Educational contexts. Examples might include museums, zoos, or other informal learning situations where users and/or objects can be integrated to create a novel learning opportunity. The goal here is to create a rich, personalized, and tangible learning experience.
- Health-related environments. Examples might include doctor's offices, clinics, gyms, or any other health-related context. The goal here is to facilitate a health, diet, or fitness consultation or other health-related conversation, intervene with suggestions and information, or create some other novel physical interaction.
Your choice for this should be a public or semi-public setting, for two reasons: 1) your team needs to be able to gain access to observe the current setting, and 2) we want your team to choose a setting where it makes sense to install a public kiosk. Rather than a general purpose or one-size-fits-all approach, your team should focus on conducting research on the particular needs and constraints of a specific setting and translating this into a novel experience design.
Your team's final interactive kiosk should address the following:
- Context: While all teams share the goal of designing a kiosk, your team should choose a context from the options above and then—driven by user research—continue narrow in on a unique situation. Ideally each team will choose a different context. Each context will present a unique set of goals, users, and challenges and these contextual details will provide your team an opportunity to innovate solutions.
- Information design: Your kiosk should display information both in print and digitally in a way that effortlessly guides users through the experience. Users should be able to walk up and know what to do based on the information presented.
- Physical Interactions: It is expected that each kiosk will be specifically designed around interactions with either physical object(s) and/or the user(s) in a creative and intuitive way.
- Synthesis: Your interactive kiosk will ultimately represent a synthesis of everything you have learned thus far about visual communication, material prototyping, and physical+digital interaction. Your team's overall experience design should integrate the following elements:
- Develop an "identity system" that specifies how color, type, and visual elements represent the brand identity of your system across different media (e.g., print, digital, etc.)
- Create a physical chassis constructed out of available materials that addresses issues of form factor and human capability, and that achieves a polished look and feel. The physical chassis may include printed information that helps establish context, instructs the user about what to do, and which adopts the identity system.
- Integrate at least one digital device (tablet or laptop) into the physical chassis that displays pertinent information and feedback related to the system goals, and that adopts the brand identity.
- Design at least one physical interaction of a mechanical nature that goes beyond simply interacting with a touch screen. This might include interacting with a physical object through a sensor (e.g., using RFID etc.) or through user gestures (e.g., using computer vision). The team does not need to make these technologies work; instead we encourage teams to simulate the interactions using the "wizard" approach (i.e., humans-in-the-loop).
Teams must demonstrate their ability to design a preferred future based on technology of today and the near future. The design should consider the rich set of possible sensors and capabilities of today’s smartphones and wearables. However, teams may also envision and prototype new capabilities as long as they are reasonable and grounded in current cutting-edge technology. Existing capabilities include, but are not limited to:
- Location sensing via GPS
- Movement via accelerometers to sense repetitive activities such as walking, running, biking, etc.
- Sound via a microphone for ambient audio and voice
- Cameras (still and video) and computer vision (e.g., object recognition/tracking)
- Environmental sensors, such as light or motion
- Speakers, vibration, and LED lighting on screen for feedback and feedforward
- Biometrics such as fingerprint or eye readers
- Connectivity to internet or between devices using wifi and Bluetooth
- Device to device communication via NFC (near field communication) either with touch or very close proximity (http://www.nearfieldcommunication.org/)
What to do (with deadlines):
Your team's goal is to perform human-centered research and design for a specific context of human activity in order to prototype an interactive kiosk. This assignment has two phases:
In phase 1 (Research and Ideation), teams will conduct online research, competitive analysis, and fieldwork to more deeply understand one of the given design briefs. Teams will create personas to articulate stakeholder concerns, ideate concepts, and generate storyboards to articulate hypotheses about the problems and potential solutions. Teams will then conduct interviews with stakeholders to sharpen your point of focus.
Timeline with key deliverable deadlines:
- Tues, May 7: Initial online research, field observations, and personas
- Thurs, May 9: Five written scenarios, five storyboards, and interview guide
- Tues, May 14-15: User Research Presentations in class (length of presentations: 8 minutes). Include all other materials as extra slides and submit to canvas by 11:59pm on May 14.
In phase 2 (Iteration and Refinement), teams will prototype and iterate on their most promising solution. This includes sketching and iteratively prototyping the physical chassis, creating wireframes for the screen to support interaction goals, and developing an identity system (include moodboards, design specs, screen designs, and print designs) that can be implemented in the final kiosk and slide deck. Teams are expected to conduct user testing and to iteratively refine the user experience throughout phase 2.
Timeline with key deliverable deadlines:
- Thurs, May 16: Kiosk sketches/renderings
- Tues, May 21: Paper wireframes, physical prototype, and user testing tasks & questions
- Weds, May 22: List of adjectives and old magazines for moodboarding
- Thurs, May 23: Draft of moodboard and design spec
- Tues, May 28: Updated moodboard and design spec, draft of screen designs
- Tues, June 4: Outline for slide deck; results from A4 user testing (part 2)
- Thurs, June 6: Pitch slide due along with 60-second verbal pitch
- Tues, Jun 10: Final Showcase of interactive kiosks (all deliverables due on Canvas by 11:59pm).
Phase 1 Research and Ideation (Identifying the right concept)
- Online research. Get to know your particular context inside and out. Read all the information that you can find online and summarize the specific challenges. Write a list of all resources (books, URLs, journals, conference papers) so that you can cite them later. Create a collection of existing kiosks and summarize what they offer and what they lack for your team's chosen context (i.e., competitive analysis).
- Observations. Visit a place where you can observe users interacting or doing some activity related to the three contexts above and spend a significant amount of time (i.e., at least one hour per team member) taking in holistic observations (structural, sensorial and behavioral qualities). Try to capture all the details of the experience, interactions, and environment that you observe. Observations should be recorded through field notes (written descriptions and sketches), and field recordings (photographs, sound recordings, video). Materials: cameras, sketch paper, pens/pencils, audio recorder. Include all sketches and recordings in your team folder. Select the most compelling evidence to highlight in your user research presentation and overall slide deck.
- Personas. Based on the design brief, online research, observations, and any other research (e.g., informal interviews), create a persona that illustrates the archetype primary stakeholder (i.e., the main user interacting with the kiosk) in your problem context. Each team should have a minimum of one persona, but you may also develop additional personas (e.g., a secondary user, such as the parent of a child interacting with the kiosk).
- Concept storyboards. Write at least five concept scenarios that describe problematic situations for your stakeholders and illustrate these as storyboards. Each storyboard should include a title that summarizes the problem and solution, and four frames that clearly communicate 1) the context (setting, stakeholders, etc.), 2) the problem, 3) the proposed solution, and 4) a resolution. Teams will share storyboards in class and get feedback on how effectively they communicate the issues and concepts.
- "Speed dating" interviews. After a round of iteration on the storyboards, teams should conduct "speed dating" interviews with at least three stakeholders to better understand the real problems and to select a direction for your design concept. Notes:
- Reach out early to start scheduling potential interviews. You should interview people who roughly resemble your target audience, not your friends.
- Create an interview guide with open-ended questions for your intended stakeholders. This should include general questions about the interviewee’s activities related to the topic, as well as specific questions tied to the storyboards.
- You should have two group members attend each interview, and each team member should participate in at least one interview. Bring your storyboards to the interviews and get feedback, ideally from actual target users. Try to record audio of the interview where possible; it will make for a more compelling User Research presentation.
- Have a different team member listen and take notes on other teammates’ interviews so that everyone has a chance to both interview and analyze an interview. As a team, summarize the key insights you've learned about the problem and the stakeholders.
- User research presentation. Create a slide deck that articulates the team’s understanding of a specific design problem/opportunity. Include insights from your online research, observations, and interviews. Briefly describe your persona and final storyboard. Include video and audio clips from fieldwork and interviews. Frame a mission statement that your team will tackle in part 2. To summarize, your "User Research" slides should provide details on the following:
- Online research summary (including sources)
- Summary of observations of the selected context
- Details about your primary persona
- Team interview guide + summary of interview results
- All storyboards (but designate which one is the chosen/best concept and why)
- Mission statement for Phase 2.
- 8 minutes MAX
Phase 2: Iteration and Refinement (Refining the concept)
- Sketches. Start sketching ideas for the physical kiosk itself, as well as the more detailed interactions around the kiosk. These should be more detailed than the concept storyboards from Part 1. Sketches can be done individually and as a team, and will take the form of thumbnails, full-page, and digital forms.
- Wireframes. Start by writing out a list of the key functions/tasks that the kiosk needs to support based on your user research. Then create sketches (low-fidelity) and digital wireframe models (mid-fidelity) of the overall information flow. The wireframes should clearly communicate the content and interactive elements of your kiosk's digital screens for the entire activity.
- Physical/paper prototypes. Building on your sketches and wireframes, create a physical mockup out of cardboard, paper, and other materials to explore the form factor and functions of your team's interactive kiosk. Your final kiosk will utilize an actual digital screen for information and interactive screen elements, but your prototype can mockup this part with paper screens. This where your kiosk begins to take shape, and where your team can gain a better understanding of constraints related to size, materials, interaction with physical objects, screen size and position, etc. Your prototype should demonstrate a rough version of the whole user experience.
- User testing (part 1). Test your physical/paper prototype with other teams during class. Create a list of tasks for users to complete and a list of interview questions to capture their thoughts on and experience with the prototype. Take observational notes, sketches, pictures, and/or videos. Iterate on the prototype based on this feedback.
- Moodboards. Drawing inspiration from your user research and personas, create a list of adjectives that captures the essence of the emotional experience you want to create with your design ideas. Then, using this list of words, create a moodboard as a collage of images that have a consistent mood and feeling with a relatively small set of colors. The moodboard will be used to select colors, typefaces, and design elements for your design language specification.
- Style guide. Based on your moodboard, create a style guide specification that shows your team's choices for colors, typefaces, and design elements. Your style guide should specify how to indicate a visual hierarchy across digital and physical media (e.g., in screen designs, slides, and printed material). See examples here, here, and here to scaffold/model your team's style guide. Your style guide should be thoughtfully organized and should include (but is not limited to) the following:
- Color pallet (primary and secondary)
- Typefaces (names and examples)
- Typography: Sizes and typefaces for different text elements
- Common user interface elements (doesn't need to be exhaustive, just illustrative examples)
- Other visual elements
- Screen designs and clickable prototype. Using your team’s design language, create a click-through demo showing high fidelity screens that illustrate the key interactions. The screen designs should be imported into online screen prototype tool (e.g., InVision, Flinto, MarvelApp, etc.) so that people can try a click-through demo.
- Final interactive kiosk. This version of your kiosk is the "putting it all together" step in the process. This fully-realized prototype should have a polished look and feel that follows your design spec. You should embed a digital display (e.g., a tablet or touchscreen laptop) and integrate your clickable screens. This version should effectively demonstrate the entire user experience (from the moment a user approaches the kiosk and figures out what to do, until they complete the activity). There should be printed posters/signage on or around your kiosk to serve as "marketing material" for branding the experience and to give the user basic instructions. Your team should continue to test, iterate, refine and polish the interactive kiosk design up until the Final Showcase. This prototype should include:
- A physical chassis constructed out of appropriate materials and with an appropriate level of craft and polish such that it approximates what a fully realized version of your kiosk might look like (should be nearing final product). Include printed posters/signage on or around your kiosk to brand it and provide walk-up instructions.
- A digital screen that displays pertinent information and feedback to complete the major tasks, scenarios, and application flow that are a part of completing a purchase through your kiosk (based on all work completed up to this point).
- At least one physical interaction of a mechanical nature. This might include interacting with a physical object through a sensor (e.g., using RFID etc.) or through user gestures (e.g., using computer vision). This physical interaction can be simulated using the "wizard" approach.
- User testing (part 2). Test your final interactive kiosk with at least 3 users. Ideally your team should talk to the same or similar stakeholders as the "speed dating" interviews. Start by creating a list of tasks for users to complete and a list of interview questions to capture their thoughts on and experience with the prototype. As a deliverable, turn in:
- A document with your list of tasks (at least 2 tasks) and interview questions (at least 5 questions)
- Raw data from each user test (capture videos or audio from the session)
- Based on input from your testers, create a short list of insights (less than 1 page long) with a list of design considerations for the next iteration (bullet-point format is acceptable). Try to implement these changes in your final kiosk. Make sure to document the before and after version so we can see how the feedback affected your design.
- Pitch slide. Create a single slide using your team’s design language that describes your concept. Select one team member to give a 60-second pitch of your team’s concept for the final poster session. This pitch will happen on the Thursday before the final showcase.
- Final slide deck. Create a slide deck (designed using your team's design language) that describes key user research insights, your mission statement, and your novel interactive kiosk. Your slide deck should include the following:
- A title page with your team name, date, team members and emails.
- A slide to introduce the challenge.
- 3-5 slides on user research insights from your online research, fieldwork, and interviews about the situation, stakeholders, and problems. Also 1-2 slides on your personas and a slide on your team's mission statement (this is a condensed version of the "User Research" presentation, but now formatted according to your design spec)
- 2-3 slides showing your team’s moodboards and design specifications.
- 5-7 slides to describe your interactive kiosk. Visually illustrate the environment, physical setup, kiosk features, and key user interactions. Your team should have representative photos of the entire kiosk from different angles and close-ups of key elements you want to highlight. Include very brief descriptions and annotations/captions highlighting features and functions. Include screen designs for at least three pages of the digital prototype. Include a URL to your clickable online prototype that demonstrates the key interactions. Everything should have a high degree of polish.
- A conclusion slide with contact information and acknowledgements.
- Extra slides for any additional materials that demonstrate your process and were not included in the presentation slides (e.g., notes, photos, sketches, storyboards, etc.).
Helpful Materials/Tools for this Assignment
- User research and personas
- Wireframing and Paper Prototypes
- Wizard of Oz Methods
- Design Specifications
- Visual Style Guide
- Design & Prototyping Tools
- Adobe Illustrator or InDesign (UCSD has educational discounts)
- Quark Xpress
- Sketch (Free trial and 50% discount for full version)
- Giesel library's Digital Media Lab offers Adobe Creative Suite for free on lab computers
- Figma (free and collaborative)
- Flinto (free trial and 50% discount for full version)
- MarvelApp (free version with limited features, free trial and 50% discount for full version, prototyping on Paper: https://marvelapp.com/pop/)
- InVision (free education edition, use code: 56-73-13-19, Demo video)
- Axure (free educational license)
- A nice comparison of UI prototyping tools can be found here.
- User testing tools
- Frens on Cardboard Modeling
- Leah Buley on Usability testing
- Rikke Dam and Teo Siang on Personas
- Nick Babich on Storyboarding in UX Design
- Will Fanguy on Wireframing vs. Prototyping
- Nick Babich on Paper Prototyping
- Filippo Salustri on Design Specs
- Kaari Saarinen on Visual Language
- Optional readings
- Optional Videos
- User research slide deck
- Pitch slide
- Final slide deck
- Completion of a team/project evaluation questionnaire (Google Form) that will be taken into consideration when calculating individual final grades for the project.
A4 Rubrics Phase 1 (30 % of A4 grade)
- Online research (5%)
- How deeply and broadly does the team explore the Internet to understand the chosen context?
- Does the team keep a record of information and cite all their sources?
- Did the team identify pros and cons with existing solutions?
- How useful are the insights from the online research?
- Did the team adequately and clearly summarize their findings?
- Field observations (5%)
- How extensively does the team collect data from the field, including notes, images, videos etc?
- How useful are the insights from the field?
- Personas (5%)
- To what extent is the team’s primary persona believable?
- Are the personas informed by preliminary research?
- How much effort went into creating the persona document?
- Storyboards (5%)
- Do the storyboards as a whole represent a diverse set of problems and/or solution concepts?
- Do the storyboards clearly communicate the context, problem, solution, and resolution for each scenario?
- Is it easy to read the text and sketches? Did the team highlight the main problem and potential solution in the title?
- Interviews (5%)
- Does the team’s interview guide follow effective principles? E.g., do they lead with a grand tour question? Do they ask open-ended rather than Y-N questions?
- How diverse is the range of interviews? Top scores will go to teams that interviewed more than the minimum number of 3 people, and/or who interviewed different types of stakeholders.
- Does the team keep a record of their interviews, either through audio recordings or transcripts?
- Did teams effectively summarize the key insights learned about the problem and the stakeholders?
- Findings and mission statement (5%)
- To what extent does the team focus on real problems or opportunities?
- To what extent does the team’s mission statement capture the overall insights from the user research?
A4 Phase 2 Rubric (65% of A4 grade)
Pitch Day - Thursday June 6th
- Kiosk concept - (10%)
- How creative/novel is the idea behind the kiosk? Is it new to the world? Or just new to the chosen context?
- How much value does the kiosk provide for the chosen context? How likely is it that the kiosk would be adopted by stakeholders?
- How much does the kiosk address the specific design goal/problem as articulated by the team?
- Verbal pitch (5%)
- How effectively does the team communicate their kiosk concept?
- Is the presentation clear and engaging? Does the slide support the verbal pitch?
- Is the pitch delivered within 60-seconds?
Kiosk User Experience - Monday June 10th
- Implementation of kiosk shell and physical interactions (10%)
- Does the kiosk effectively integrate the team’s high-fidelity screen designs?
- Is the physical chassis sturdy and constructed out of appropriate materials?
- Does the kiosk have a polished appearance? (i.e., avoids handwritten text, loose tape, regular cardboard on the outside, etc.)
- Does the kiosk support physical interaction beyond the touchscreen? (e.g., interaction with a physical product or through body gestures detected by sensors, scanners, or cameras simulated using the Wizard of Oz approach)
- Does the kiosk adhere to the style guide (screens and physical chassis)?
- Flow of user experience (10%)
- Do the screen designs guide users to complete at least one activity relevant to the chosen context? Is there a clear logic to the flow of the activity?
- Do the screens effectively provide information before and after users take actions (e.g., effective feed-forward and feedback)?
- Do the final screens effectively adopt the team’s style guide?
- Approachability (5%)
- Do the printed and on-screen instructions help orient users to the context and functionality for the kiosk?
- Can users walk up and complete an activity with little to no verbal instructions?
Final Slidedeck - Monday June 10th by 11:59pm
- Visual design (10%)
- Does the moodboard align with the team’s list adjectives and create a consistent mood with a relatively small set of colors (ideally 3 or fewer, not counting shades of black and white)?
- Does the team’s style guide present a compelling design language with specifications for the following:
- Logo (suggested, but optional)
- Color pallet (primary and secondary)
- Typography: Names, sizes and examples of typefaces for the different artifacts (slides, screen, printed instructions, etc.)
- Screen examples showing how the style guide will be adopted for common user interface elements
- Are the moodboard, style guide, appearance of the interactive kiosk, and slide decks visually consistent? Does the team follow effective visual design principles taught in A1/A2?
- Process (15%)
- Sketches, wireframes, and paper prototypes
- Do the sketches show that the team explored many variations and evolved their design ideas over time?
- Do the wireframes help clearly communicate initial ideas for the workflow of scenarios and use cases?
- Does the paper prototype demonstrate how users will interact with screens/information displays to complete an activity?
- Are the paper prototypes constructed in such a way that they facilitate user testing (i.e., allow for swapping out specific elements or pages)?
- Is there a clear evolution of the narrative from Phase 1 of the assignment through Phase 2?
- User testing
- (Part 1) Did the team test their paper prototype with at least 3 users?
- (Part 2) Did the team test their 'clickable' prototype with at least 3 users?
- For parts 1 and 2, to what extent does the team test with more than the minimum of 3 people, and/or with a diverse set of actual stakeholders, and/or within the designated context?
- For parts 1 and 2, did teams clearly articulate a set of tasks (at least two) for the user to complete? Did the team create a set of interview questions that follow from effective interviewing principles?
- For each user test, did the team write clear and convincing insights/considerations/changes for subsequent iterations along with evidence from the user testing data?
- Does the team incorporate lessons learned from user testing into their evolving design?
- Did the team follow ethical research practices when user testing and presenting their insights? For example, asking people to be audio recorded and anonymizing users in their presentations.
- Sketches, wireframes, and paper prototypes
- Team Work (5%)