Touchscreen Prototype
Building a system for touchscreen narratives
Duration
March – May 2023
Team
Alina Wahab, Eva Zhou, Clara Huppke, Kayla Palmer, Kyla Galela
My role
Design research, prototype design, interaction design, illustration, translation, design system
Toolkit
Figma, Photoshop, Miro, Webflow
Project background
Our client Story Inc. is a New Zealand-based company that specialises in exhibition and visitor experience design in NZ and overseas. They drafted a touchscreen system (nickname “Whimbrel”) for one of their recent public display projects. The system is a creative form of displaying digital narratives on a large-scale touchscreen in public areas such as museums, conferences, and information centres.
Story Inc. wanted to replicate and streamline the process of creating more touchscreen projects in an efficient way in the future. The Whimbrel system needs to be user-friendly for staff and clients. Since Story Inc. has a wide range of clients from different industries, the system has to be flexible and consider multimedia content types for various audiences.
Challenges and goals
The original Whimbrel was made in the Prismic system. However, Story Inc. found the original Whimbrel not entirely satisfying in terms of functionality and flexibility of the backend control. There was also a need to improve the accessibility of the visual design.
Our focus was on what the Whimbrel prototype could become in the future.
- Create a touchscreen system that provides great visitor experiences
- Test, improve and standardise the Whimbrel system
- Search for findings and insights through the analysis
- Create a collection of templates that are designed with users in mind, that can be quickly arranged and filled with content
The solutions
We improved the original design of the Whimbrel system, developed and tested new prototypes, and created a set of standardised templates that can be reused. We labelled each of them with a name to make it easy to manage and use.
Our project included three major deliverables:
A Figma file that provides a prototype and style guide for Story Inc. to use going forward with Whimbrels
A recreation of the Figma prototype on a third-party platform to show the pros and cons of the potential new backend system
A handbook that outlines style guidelines and a breakdown of each slice of the new Whimbrel prototype
A glimse of how the new system can be applied to new narratives
The backend templates that create the new system
Sample slides of the User Handbook
A sample Hi-fi prototype design – the history of Story Inc: “Golden Day”
How did we get there?
Research goals
We started by conducted a series of researches to discover what we might need to consider when making a new Whimbrel system:
What are the most important parts of a good touchscreen experience?
How do touchscreens fit into different spaces, and what is their intended purpose in each?
Story Inc’s expectations or needs for a design system.
What are some important behaviours of potential end users?
Best practice from existing scrolling narratives.
Museum observations
To see how people interact with touchscreens in a museum environment, and to observe the role of the touchscreens as a part of the exhibition.
Stakeholder interviews
To understand how Whimbrels are intended to be used in the future of Story Inc.
Benchmark usability tests
To see how people interact with and navigate through the current Whimbrel design as a standalone narrative story piece.
Secondary researches
To understand existing best practice examples and research conducted on touchscreen experiences.
Initial researches
Detailed research reports can be seen in the galleries below:
Considerations
Based on the four streams of researches, we clustered the important findings into six overarching topic areas that we need to consider in our project. These considerations will guide our ideas going forward with the touchscreen design and keep us on the same page as Story Inc.
Lo-fi prototype
Our benchmark usability tests indicated that people didn’t use the navigation menu of the original Whimbrel system and had trouble understanding their current position in the story. Since these issues were quite complex, we decided to make them the focus of our lo-fi prototype. This would allow us to include our navigation system ideas in multiple rounds of testing.
We did further research into best practice examples of navigation systems in larger touchscreens. This proved to be more challenging than we had anticipated since the material on precedent cases is limited. We therefore drew on literature that focused on navigation systems on screen-based devices in general and attempted to adapt general principles to a larger screen.
Some topics we explored during our conception phase included:
- Anchor navigations/in-page links
- Progress indicators
- Hierarchy of content and titles
- Mini information architecture within menus
Mid-fi prototype
Based on our findings from our lo-fi tests, we began concepting and creating our mid-fi prototype. This included several major changes to the navigation system, as well as some completely new features.
We added the Chinese-translated version of the story and added a drop-down language switcher in the menu. One of our insights was that people were struggling to tell what language was active. By using a drop-down menu, it becomes clear that the displayed language is the active one.
We also improved the galleries and the Curio pop-up sections, as well as eliminated some of the items on the screen that might cause information overload.
The detailed Mid-fi usability test report can be found below:
Reflection
Reflecting on the project, I learned a few things about UX design and about myself.
At any time, it’s vital to communicate with clients. Listening to customer’s hearts and understanding their needs is the key.
Keep an open mind. Have a curious heart. Keep trying new things. New technology is constantly updating.
I also found myself enjoying doing various roles throughout a UX design process, instead of only focusing on one or two tasks. Multitasking not only makes the project feel exciting to me but also helps to balance my critical thinking and the aesthetic creativity in me.