Web application
StatusGator is a status data platform, which collects the status of the cloud services selected by users and presents it on a status page. Client requested the Status page update in order to add new features and improve the overall UX.
Competitors research
UX/UI Design
Screenflows
Interactive prototypes
Duration: 1 week
During the kick-off meeting, I had the opportunity to learn more about the platform, the goals of future updates, learn about the target audience, agree on the project schedule and project activities.
Key takeaways from the meeting:
The main goals of this update are: improving the overall UX of the "Status" page, implementation of new features.
The status page was already developed and even updated about 4 months ago. The client's team received good feedback after the last update, but users shared new suggestions with the team.
The client's team communicates with its users, so it received real feedback, which should be used for updates.
I have to find the best solution to implement the following features: expand a service to see components, accommodate longer messages or a detailed history, allow subscribing to updates from the status page, show history of a service, allow reporting issues that are not shown, dark mode / light mode.
The customer is open to small improvements (e.g. font), but mostly wants to keep the existing style of the platform. In the future, it is planned to update the entire platform, not just the "Status" page.
After the kick-off call with the client, I reviewed the technical specification, which outlined the client's vision for future updates and user requirements, which gave me a better understanding of the expected results and helped me plan the design process.
Since the client's team had already done a pretty good job on research, I studied and used this information for updates, as well as conducted my own basic research to better understand the domain, checked competitors' status pages.
Page view before redesign
While working on the UX part, I faced several challenges. One of them was to find a way to show users not only the status and name of the service, but also to include data such as: a detailed description of the service, a short explanation of the service, a 2-level list of components, a history of the service, a service icon, and the ability to report a problem for that particular service.
It had to look clean and compact (as there can be many services), but still be accessible. Also I had to keep in mind some of these components were optional (as they depended on the user's choice when configuring the status page).
Screenflow
Another thing is to make it work on mobile devices. Making the site simply responsive wasn't an option in this case, too many components would just turn it into a nightmare for users... imagine how cluttered and unusable it could be if you left those elements as is, even if you rearranged them somehow. A separate mobile version was the only option I saw to keep it usable, even if it would add work for the development team.
I suggested to keep it simple and follow a pattern that mobile users are familiar with - hide related less important components under the "kebab" menu (like apple music or youtube), and leave only three key components visible on the service card (logo, name, status).
In total, I made three iterations, which we discussed with the team to find the optimal solution. The prototypes were not tested by external respondents, only by team members.
Mobile version screenflow
Dark mode has become popular among many users, so StatusGator wanted to give its users the option to decide which mode to enable, and I aimed to design it for them. The main goal here was to maintain contrast so that the content is readable and legible.
Dark mode
I was not the original designer of this platform, so I have to mention that the basic style guide was provided by the team, which made it faster and easier to create new components based on it, but I still worked on the style guide to make it more structured and easier to maintain.
Style guide
