top of page
AWS Error Pages
Unexpected server errors can be extremely confusing and frustrating when they happen. AWS has millions of customers and providing an experience to appropriately and consistently guide customers motivated this project
PLATFORM: Web, Tablet, Mobile
TEAM: 1 Designer, 1 Senior Product Manager, 1 Front-End UI Developers, 1 Backend Engineers, 1 Dev Manager, 1 Design Manager, 1 UX Writer
ROLE: Design Lead
I started by initially uncovering the inconsistent experience across AWS for error pages. Then created a draft design proposal. After a serious outage, AWS leadership asked to make it a priority and I led the design process through it's launch.
Research
DISCOVERY
During an early audit after joining the team, I was asked to design the experience for the use-case of 'Region not supported'. However, when I started looking into it, I stumbled across inconsistency in the experience across different areas and created a document with areas to improve UX which I first shared with my manager and then presented to leadership.
Part of spreadsheet that error pages needed a consistent UX design
Different experiences that I found and documented
However, other Projects got prioritized over Error Pages, that the product team had defined earlier on the roadmap.
MAJOR EVENT
Console Home outage on April 25, 2019, at 9:11 AM PDT in the IAD region
Previous experience for customers that the customers experienced during this outage
Error pages quickly got reprioritized high and above other projects by leadership. Leadership and my team started referring to the earlier document created and its early draft proposals.
Initial Rough Design
CUSTOMER PAIN-POINTS
Console Home outage on April 25, 2019, at 9:11 AM PDT in the IAD region
What happened?
Why did I land here?
Where do I access the page I was looking for?
Interaction Design
UX DESIGN
Created an empathy map to better understand the customer's needs. Based on the WHAT - WHY - WHERE discussed the content strategy and design goals with Design Manager and Product Manager, so that the initial design could also become more actionable for AWS customers
On social media:
Empathy Map
Based on the design goals, I started doing various explorations.
Concept 1
wireframe
early visual
Concept 2
wireframe
early visual
Concept 3
wireframe
early visual
Comparing the concepts
Usability Study
Based on the guidance of the PM, we wanted to limit our efforts to a rapid customer validation. The initial findings were very encouraging. So, the PM and I decided to push forward with the rest of the presentation and design approval process. This was motivated by getting these critical enhancements out sooner.
Key Objectives: Is the content and links relevant? Is the destination for each deep link clear? Does the content flow resonate? Is there any other content needed?
Insights
All 7/7 strongly felt the new designs were a drastic improvement from the previous error experiences.
1/7 At first glance did not realize this was an error page but understood it after reading the title.
1/7 UX copy for the last section was not clearly indicating that it was only relevant if the above data is not revelant.
1/7 Steps in the last section feel too heavy to consume
Based on the feedback from other reviews and the usability test, further iterated on the design to make minor modifications to the design.
Illustration Explorations
Option 1: Direct messaging 'Service Unavailable'
Option 2: Positive messaging 'We are out now, but will be back shortly'
UX Copy Review
In parallel, I also worked with the UX writer to get feedback on the UX copy so that we were able to capture the voice and tone of the brand. Also since this experience was around communicating the message in the best manner, I created a document for all stakeholders to also contribute feedback on the copy.
Sceenshot of the document created by me to collaborate with the UX writer and other stakeholders on the content/messaging.
After all the different UX explorations, UX copy refinement, illustration and messaging brainstorm, below is the final design my team and I launched.
Final design launched
EDUCATE (What's broken)
HELP (Alternatives)
Shows how it ties back to the content strategy defined early on
Post launch I worked with the AWS design system to contribute this pattern to be used across all server errors.
One of the error design implementations in action
KEY TAKEAWAY
In order to influence the roadmap of a product, it's vital to deeply empathize with the user flow/journey and the pain points. A designer also needs to fully understand the different product features and keep up to date with customer feedback. The most effective product decisions are based on data-driven conversations that represent the voice of the customer. This context can empower designers to help initiative product improvements and ensure they are implemented.
VIEW OTHER PROJECTS
bottom of page