Y2k Inspired Error Screens Case Study
1. Introduction
The new error screens for UNiDAYS was a project that aimed to tailor the user experience to a design that was appealing to the target audience of students aged 18-24. The project involved an investigation into gen z design trends, analysing the competitor market in order to reach the most appealing conclusion - error screens that could be considered fun and appealing to the target users.
2. The problem
Analysis conducted by the UNiDAYS commercial team has shown that there is a large drop off rate for users after approaching an error, with over 75% often leaving the site completely, rather than returning to the previous page to continue with their purchase. The project was initiated in order to asses whether there was a way to rectify this through the implementation of more appealing error screens, that could potentially ease user frustration and convince them to return.
3. Project metrics
The audience
Stakeholders
My role
- Students aged 18-24
- Students users
- Creative team
- Software Engineers
- QA Engineers
- Commercial team
- Senior management
I was the sole designer on the project, working in a scrum alongside a PM, scrum master, software engineers, QA engineers and a technical copywriter.
The main objective was to create new and bespoke error screens that would be more appealing and less jarring for users, utilising the full UX process, with a focus on competitor analysis and user testing.
4. The objective
1. Discover
The UX process
Existing error screen investigation -
The first step in the discovery phase of the project was to investigate the existing error, focusing on the overall user experience, as well as the aesthetic design.
It became clear that the existing error screens were as basic as they could be, giving only basic information to users about the error that they had encountered, with a call to action button to take them back to the previous page.
With over 75% of users leaving the site completely after reaching the existing error screens, it raised the question about whether this could be caused by confusion when reaching this screen. In order to improve this, the next stage of investigation was to analyse the target audience and also competitor market, assessing how similar brands handle their error messaging.
Target audience research
In order to understand the needs of the target audience of students aged 18-24, it was important to conduct some research into behaviour trends.
It became apparent that gen z audiences have a preference for nostalgia, especially in relation to design trends that are inspired by the 80s and 90s. A study by Stephanie Harlow for GWI states that -
"As a generation, Gen Z are the most nostalgic, with 15% feeling that they’d prefer to think about the past rather than the future. Millennials aren’t much further behind at 14%, and the preference continues to taper off with age.
Gen Z and millennials are driving nostalgia in the media too. Gen Z are in the lead again with 50% of this generation feeling nostalgic for types of media, followed by 47% of millennials.
So, while all generations feel nostalgic to some degree, it’s the younger ones who are driving the trend today."
Stephanie Harlow, GWI, March 2023 [1]
This idea of nostalgic design being a prevalent trend with gen z is further emphasised by a study Nottingham Trent University, stating that this trend may be accelerated by Tik Tok -
"Gen Z loves nostalgia. Sentimentally for things of the past is not a new phenomenon nor is it an emotion reserved for Gen Z. But it would appear, judging by the amount of coverage on the topic, that Gen Z have got it bad. The demand for nostalgia on TikTok is booming."
Yvonne Richardson, Nottingham Trent University, October 2022 [2]
This idea of Tik Tok accelerating the trend is further emphasised by a study conducted by Camp + King, claiming that members of the gen z community find comfort in nostalgic entertainment -
"There’s no question that gen z has a tight grip on nostalgia. From Y2K fashion and accessories flooding middle schools across the globe to the TikTok trend showcasing young people’s parents in full ‘90s grunge, gen z tends to look at any era through rose-tinted glasses. This younger generation craves the sentimental longing of the past in fashion, entertainment, and trends - and uses it to seek comfort and connection. These styles and memories enable them to romanticise the past, escape, and cope with the often dark realities of today."
Camp + King, December 2022 [3]
Research clearly shows that there is a prevalent trend towards nostalgic entertainment in gen z targetted design, something that was further emphasised in competitor research.
References:
3. https://www.lbbonline.com/news/how-gen-z-is-changing-nostalgia
Target audience research
With the initial target audience insights, the next stage was to asses the competitor market, examining how they handle their error messaging. I decided to focus on brands that were aiming towards the gen z market, including YouTube, Spotify, TikTok and Snapchat.
It became clear whilst looking at competitor error messaging screens that there was a key focus on nostalgic, Y2K style designs, usually utilising illustration, animation and with a comedy edge.
Next steps:
With target audience and competitor insights, the next step was to start building concept designs for new error screens for UNiDAYS, utilising all of the key features that were identified through research.
2. Define
When desiging the intiail concepts for the error messaging, it was important to consider the key elements that were identified as being important in the research stage - nostalgic, Y2K style, humour, illustration and animation.
Collaboration with creative copywriter
One of the key features that were highlighted through research into competitors was the use of humorous messaging. In order to integrate this style into the design concepts, it was decided to bring in a copywriter from the businesses creative team to work on some quirky messaging to go along with my designs.
Through a series of meetings, we chatted about various concepts to feature in the design, based on the list of error screens provided by the engineers. Collaborating using a shared Figma file, myself and the copywriter shared ideas until we had enough concepts to use in an initial user test.
With the quirky tag line, I started to build out illustrative designs to work alongside them. It was decided to focus on two different styles on design, one that featured numerous designs and copy but in a simple way that utilised a lot of white space on page, and another that was more immersive and design focused, featuring a nostalgic 90s arcade game style.
The next step was to then run an A/B test with both of these designs, in order to gain insights into which features resonate with the target use base.
A/B research test
With the two design styles selected, the next stage was to set up and run a user test to analyse their success with the target audience. The test was set up in an A/B format, with participants asked to carry about two separate tasks using prototypes for each design. The prototypes mimicked the flow of the core website, but had the option for participants to either return to the previous page or exit the site when they reach the error screen, allowing to analyse behaviour patterns on both. Participants were also asked to select their favourite aesthetic design in a comparison question, in order to gauge the preferred design style.
The test setup:
40 participants
UK/ USA
Students
aged 18-24
10:15 mns
median completion time
Key insights:
- Participants widely responded best to design option B, with 72% of participants exiting the site after reaching the error screen, rather than returning to the previous page on option A, as opposed to 37% on design B - a difference of 35%.
- 65% of participants returned to previous page on design B, as opposed to just 28% on design A.
- Design B was also unanimously preferred in terms of aesthetic design with 79% of participants choosing it in the comparison question.
- Participants felt that design B was "fun" and "interesting".
- Some participants also highlighted a need for a wider range of ethnicities and genders within the animations in design B.
Key participant quotes:
The next steps:
the next stage of the project was to use the insights gained in this A/B test to inform an MVP design, which will then be developed and shipped as a first iteration. The test results clearly show that design B works with the target audience, but the comments about more diversity are very important, being that UNiDAYS is a business that aims to be inclusive to all kind of students. Therefore, it was decided that some changes to the characters and overall animations would be made for the MVP design, featuring a more diverse and inclusive representation.
- "The first design felt a bit boring, it didn't really give me a reason to continue with anything." Participant 3
-"I didn't feel like the first design was particularly clear, the second ones were fun and made it really clear that I had reached the wrong page." Participant 31
-"The second one was so funny! I found myself watching it on a loop." Participant 15
-"The first design was fine, but the arcade game ones are definitely better." Participant 40
-"The arcade game ones were really cool, but a switch up of characters would be good - a lot of them seem to be white?" Participant 26
- "I really like the animations - good job! I can't help but think that the characters could be a bit more inclusive though. A gender neutral character would be a vibe." Participant 36
The MVP designs
The MVP designs are a result of both the competitor research and user testing phases. The error screens feature a quirky 90s, nostalgia inspired animation, paired with matching copy that members of the target audience have infomred us that they find fun and amusing.
Due to feedback about increasing diversity in the user test, a focus was made on making the final MVP designs as inclusive as possible, featuring a range of characters of different ethnic backgrounds and genders.
The next stage was to then work in collaboration with the software development team to develop the MVP designs into a final build that will be shipped to users.
3. Develop
I worked in a scrum with various colleagues that had expertise in various areas. The team consisted of -
Product Designer myself
Product Manager
Scrum Master
Back-end Software Engineer x4
Front-end Software Engineer x1
QA Engineer x2
Technical Copywriter x1
In addition, I also collaborated with the creative team, ensuring that the copy was also being translated correctly into the build. This included -
Creative services lead x1
Creative copywriter x1
I worked very closely in conjunction with other team members, insuring that each area of the project was being carried out to specification. Daily meetings were set up with the engineering team, allowing us to go over the progress of the build together, resolving any issues and agreeing on any technical comprimises.
4. Deliver
The decision was made to ship the product in stages, using the new partner component as a starting point. The objective of this was to use the component as a live testing point, where insights could be gained before pushing to the rest of the site.
Initial insights:
- Within the first week of being live, there has been a 20% increase in the amount of users who chose to return to the previous page, as opposed to leaving the sit entirely, showing an abandon rate of 55% as opposed to 75% with the old error screens.
- Stats show that users are typically spending longer on the error screens, which could indicate stronger retention rate, with a new average of 55 seconds, as opposed to 15 seconds on the previous screens.
The new error screens are now being shipped to the rest of the website and insights and data will continue to be gathered in order to gauge their overall effectiveness.
Thank you for reading this case study, you can find more of my work on the homepage.