404 Screen Design
Problem: “We need a custom 404 page to render for users and search engines in the event of a product or page becoming unavailable. When optimized with appropriate internal linking and messaging, custom 404 pages can reduce bounce rate and help users navigate to useful pages on the site.”
- Analytics Analyst, IT Department, Costco Wholesale
Discovery
To start, I captured screenshots of the screens that were already in production.
Next, I carried out competitive analysis. This enabled me to see what the industry trends are around this standard page. From the investigation I found that there were several common patterns that weren’t present in the the production screen.
Design
After the data was in, I worked with a few of my peers to sketch several variations.
We also discussed what image or illustration we could use. We decided to go with the bear since it seemed that everyone was familiar with the big stuffed character. A teammate and I went over to a local warehouse and took some photos of bears.
I composed a first mockup which was used to pitch the idea to my team and management. They wanted further adjustments before presenting to the business. After making further adjustments, I built a second mockup that was used to present to the business. They approved.
Handoff
Once the design had approvals, I composed a design document and handed off to the developer.
The design document had exact sizing/spacing/positioning for screen elements as well as style specifications and interaction expectations.
While the design was being developed, I provided post handoff support where I answered questions about details and specifics pertaining to image format, espot placement and selection, and project timelines and scope as needed.
The design is live on Costco.com today (Oct 2020).
Relationship with…
Analytics Analyst
For this design task, the Analytics Analyst acted as the Project Manager, the Business Analyst, and the Solution Architect. They basically have full control over what goes into this section of the site. They gave me all the requirements, timeline, and explained the design space. Using research and mockups, I helped them visualize their new screen section so that they could decide if it was what they wanted on their site.
Developer
The Dev reviewed my mockup and gave me UI technical feasibility approval. Using mockups and design specifications, I gave the Dev clear and exact description of the desired final products appearance, interactions, and accessibility traits.