NOTE: This project was a solicited design challenge to redesign the current Stripe Status page (shown at bottom.) The challenge instructions offered no insights or assumptions about the page, simply asking me how I would redesign the page.
The first thing I noticed was that the status page was not responsive (at time of the challenge), and difficult to read on phones.
I also assumed that this page was used by engineering teams around the world, some on a daily basis (and may even have it as part of their dashboards.) Assuming that, I chose to iterate on the design and not do a whole-scale redesign. The last thing an engineer wants (another assumption) would be to come into the office in the morning and have to relearn how to read the Stripe Status page.
Lastly, I also chose to design the page in HTML to allow the reviewers to see it exactly as it would be shown to a user/visitor, hover states included. They could view it across all screen sizes to get the full effect instead of having to scroll through a bunch of static images.
Skills used:
- UX Design (iterative)
- UI Design (iterative)
- Responsive web design
- HTML
- CSS
- JS
- Information architecture (iterative)
On mobile/extra-small screens
Below are some static mockups of the initial screen state on an extra-small screen breakpoint. You can view a demo of each of the three status states here:
- All services are online—green/good
- Initial issues reported—yellow/issues
- Experiencing persistent issues—red/good
If you are familiar with the Stripe Status page, you may notice that I added a more heightened notification system by adding a green/yellow/red tint to the page background, as well as a new banner at the top. My assumption was that this would help two-fold: one was to make the overall up/down status a faster read than the current red/green button, and to also to help make the status visible from across the room (should this be part of the TV system dashboard some offices have.)
On desktop/large screens
Below are some static mockups of the initial screen state on a large screen breakpoint. You can view a demo of each of the three status states using the links above.
Again, if you are familiar with the Stripe Status page (or view the screenshot below) you may notice that I proposed adding a “Current Incident Reports” section at the bottom of the yellow and red states. Over the years I have see some companies’ Twitter accounts serving links to blog posts detailing their incident reports, and any actions required by their customers. I felt this page could serve as a report repository for the current day.
Screenshot of Stripe Status page
Below is a screenshot of the Stripe Status page at time of the challenge.
