As part of the capstone project for the MUXD course, our team was paired with Story Inc- a New Zealand-based design agency that creates visitor experiences for museums, galleries, and other exhibitions.
Story Inc had designed a system they called “Whimbrels”, to be used on touchscreens in educational settings to view information relating to exhibits. The whimbrels were inspired by how content is laid out in webpages, specifically interactive articles that use multimedia elements to keep viewers engaged. Each whimbrel was made up of a system of “slices”; a variety of repeatable templates that content (text, images, and videos) could be dropped into and styled.
Our challenge was to redesign the whimbrel slices so they were more consistent. We were going to use UX research and design processes to rebuild the whimbrels so they created a more user friendly experience.
The original whimbrels were also created using Prismic, which required some coding knowledge and needed to be outsourced. Our secondary goal was thus to research other web-building platforms and find a simpler way to create future whimbrels.
Since our team was fairly large, we split off into smaller groups to tackle 4 main areas of research.
We spent a day at the Te Papa museum observing how visitors interacted with the touch screens there. Several of the screens there had been designed by Story Inc as well, so it was really interesting to see which aspects of their work we could translate over to our whimbrels.
We user tested the original whimbrels Story Inc had created, to see how users would navigate the content and gauge their understanding of and engagement with the content. We focused on testing how they interacted with the content, and not their understanding of the text itself.
We spoke with three Story Inc team members to find out more about how the whimbrels were created, how they use whimbrels to craft an engaging narrative, their technical limitations, and how whimbrels would potentially be used in the future.
We looked at best practice examples from across the web to see how “scrollytelling” websites made full use of their format. We also read academic articles that explored the challenges of designing the UI of very large touchscreens, specifically in museum contexts.
Based on our different streams of research, we came up with a lofi prototype for testing. We mainly focused on overhauling the navigation system and language switcher, as our benchmark tests on the original whimbrels showed that this is what users were most confused by. Outlined below are our main changes and the reasoning behind each of them.
The whimbrels were meant to be viewed and interacted with on extra large touchscreens, which we unfortunately did not have access to. Testing on a laptop in our early user tests had shown that people found it difficult to view and think about the whimbrel as anything other than a webpage. So, we came up with an unconventional solution.We set up a large iMac screen, and had users “touch” the screen of the whimbrel while we faked their interactions.
By mimicking how whimbrels would be used in the real world, we were able to get our testers to think differently and provide us with some really interesting insights.
As mentioned earlier, each whimbrel would be made up of ‘slices’; blank templates that would contain content (image, text, and video), in different combinations that could be repeated to tell a compelling narrative. We thought of as many different types of relevant slices we could come up with, and then tried to fit in as many as we could in our final whimbrel.
Armed with our findings from the lofi round of testing, we got to building our mid fi prototype.
We were lucky enough to receive content from Story Inc about “Golden Days” - their first major project that was exhibited at Te Papa.
The changes between our mid fi version and the final whimbrel were minimal, so let’s have a look at just how different from the original whimbrel our final product ended up being.
A major change was to the “home” page and the navigation. The original whimbrel had a burger menu that opened a fullscreen page. Clicking on the titles in the menu took you to the corresponding section in the story. During our benchmark tests most people thought the burger menu would take them to a home screen to find other stories. Once they understood its purpose, they had trouble using it because the titles in the menu didn’t match the titles in the story. Therefore, most people didn’t use the menu.
Another issue we noticed was that people often stopped halfway through the story because they thought they had reached the end. It was thus necessary to have some sort of wayfinding that would let users know their position, and how much reading they had left to do.
Outlined below is a more indepth breakdown of all the new features we added.
We then subjected our mid fi prototype to a final round of testing, and based on our findings we nailed down the final version of the Golden Days whimbrel.
There were some larger trends that we found in both rounds of our usability tests. They were ideas that emerged by digging deeper into our findings and looking at the bigger picture, and we made sure to keep them in mind as we geared up to finalise our whimbrel design.
During our benchmark usability tests and our own observations, we identified a lot of accessibility issues in the original Whimbrels. We concepted and came up with ways to solve these issues, using heuristics and our expertise as designers.
In our mid-fi test, we didn’t test our changes as we knew they would function as intended. No comment is a good comment, and we got no comments about the text being hard to read.
To make our design easier and clearer to use, we had added many signals that it was a touchscreen you could interact with. However, this wide range of options may have made people unsure of where they were meant to start.
In our final design, we grouped all the scroll indicators in one corner of the screen. This minimised confusion and let users know how to start interacting with the screen.
In our mid-fi tests, participants rarely identified the collage style gallery correctly, many of them scrolling past it without entering into the gallery itself. The second carousal style gallery was more commonly identified correctly and engaged with.
This may have been because we only tested young participants, and this horizontal scrolling image gallery is a very common feature of social media sites like Instagram. It could also be due to the clear dots below the image indicating exactly how many images were there, and that they could be scrolled through.
Important information like captions should not be hidden behind the enlarged version of the image in the future as we know users are not likely to find them there.
In the end, we decided to eliminate the collage style gallery, as it provided little additional information and did not seem relevant to use in educational contexts.
"Curio" is a system of delivering information developed by Story Inc. A still image contains certain "hotspots" or areas of interest that the viewer can click on to learn more.
The curio slices are a great way to get users to slow down and explore a specific image. In our tests they were really successful at fostering engagement.
There is no clear order to the touch points, and this playful aspect of exploring is probably what makes curio so interesting.
However, this could create an interesting tension. If you wanted to suggest an order that the curio touch points are best explored through (like a mini narrative), more thought would need to go into the existing hierarchies. A potential solution is a numbering system, or a path through the touch points like a treasure map.
Curio as a concept has a lot of potential within Whimbrels that we didn’t have time to fully explore.
The original whimbrels were designed using a backend system called Prismic. In our early talks with Story Inc, they mentioned that they weren’t totally happy with how it worked. So, after designing our templates in Figma, we explored Webflow as a potential alternative going forward.I took the lead in conducting research on Webflow. It was quite intimidating at first; I’d had unpleasant experiences with website builders before, and was expecting Webflow to be similarly challenging. Fortunately, building a site in Webflow turned out to be easier than expected, and I’m happy to have been able to add another program to my designer’s toolkit at the end of this project.
I also led a demo session with the team at Story Inc, where I walked them through using webflow to style future whimbrels. It was a really rewarding culmination of weeks of research, and I was really proud of how much I’d managed to learn and create.
You can view our webflow prototype here.
Here is a link to the final Golden Days Whimbrel.
We also created a style guide that Story Inc could refer to when creating future whimbrels. It contained guidlines for typography, colour use, how to use slices, and a short guide to using Webflow to make whimbrels.
You can view the full style guide here.
Finally, as part of our MUXD assignment, we created a poster that outlined our process of creating whimbrels. It was challenging to have to condense 3 months worth of work down to a single poster, but it was really rewarding to be able to view the journey of all our hard work.
The full hi-res version of the poster can be viewed here.
The biggest takeaway from this project would be the importance of delegating tasks. Our team was fairly large, and after first working on every part of the process together, we realised that splitting up just made more sense. Constant communication between our mini-teams made sure that we were all on the same page.
Another really important lesson I learned was to fully embrace taking on new challenges and to jump at the chance to learn a new skill. Before working on this project, I had very little experience building websites, and was hesitant to tackle Webflow. But I’m really glad I took the plunge and just went for it.
Overall, this project was incredibly fun and rewarding to work on. I was lucky enough to be on a team with some really supportive people, which made every challenging moment feel less intimidating.
UX Designer • Artist • Daydreamer
