The Serebro Mobile App was an existing piece of software that the Cox Automotive Enterprise Operations Center (EOC) used to push notifications about the “health” of the solution groups (business units) the EOC is in charge of monitoring and maintaining. When there were impacts and incidents the system issued a notification, pushed to anyone who had the app installed on their smartphone (iPhone/Android). The notification sent contained a short summary of the incident as well as the solution group affected.
The goal of the project was to completely redesign the the app. The app needed to be more user friendly and to make sure it was delivering timely, informative notifications as well as providing useful details about each impact and incident. Users of the app monitor specific solution groups in Cox Automotive (ex. AutoTrader or Kelley Blue Book) so they also needed to be able to easily filter notifications so that they only received notifications they were responsible for.
For the project I used the standard “Design Thinking” process flow.
The Serebro mobile app, as mentioned before, already existed (v1.0) and had been in use for over 6 months. To begin the redesign process I started off by creating a user survey to send out to a select set of users (selected by the Director I was working with) as well as performing a full review of the app after downloading it to my iPhone.
A user survey was created and distributed using Survey Monkey to get some initial feedback on the Serebro Mobile app. The questions covered the basics to get the process moving:
The feedback obtained from the survey helped get a better understanding of how the users wanted the app to function for them. Some examples of the feedback included:
The review of the app showed a lot of areas for improvement. There weren’t a lot of screens used by the app but they all needed improvements in their appearance and how they displayed content in addition to what content.
The Sign In screen had some usability improvements to be made like saving previous email address and adding a checkbox or some other indicator as to if the user wanted to show their password while typing it in. Also the logo for Cox Automotive being stuck at the bottom of the screen meant it was covered up when the keyboard was displayed. Finally the “Sign In” text was actually the button to initiate the user’s sign in but this wasn’t readily apparent and needed to be updated.
The Notifications were fairly standard. The time stamp was hard to read and the summary message wasn’t necessarily clear and concise. One issue noticed was that the notifications had a “slide to view” call to action but sliding a notification didn’t result in the full notification being displayed. So user expectations were being set but not met.
Once logged in the user was taken to a landing page that gave a thumbs up or thumbs down icon. This was a pretty nebulous image because if there was a thumbs down only the most recent impact or incident was displayed. A user really had no way of telling how many impacts or incidents were currently active. Also the hamburger menu was absent and would only appear if you went to an incident and then returned to the landing page.
The settings page was where users could select specific Cox Automotive solution groups to receive notifications for. A user could also filter for specific impact/incident severity levels. The biggest issue with this screen was that the thumb sliders weren’t easy to interact with and the business units weren’t grouped together under the “Solution Groups” structure they normally fall into (Ex “Media Solutions” contains Autotrader and Kelley Blue Book). Finally for some reason the sign out functionality was buried in the settings app but you wouldn’t know it until you happened to go to the settings and scroll down far enough to see it.
The incidents list is where the users see all of the active resolved incidents. The look of the screen was going to be really long and it seemed like there needed to be a better way to separate active and resolved incidents. Also the icons were basically impossible to decipher without some prior education or help. Along those lines there was no actual help available throughout the app which was a definite problem that needed to be addressed.
The incident details were a mess content-wise. The screen was just a display dump of what was stored about the incident. None of the content was formatted and there was also repeated content. Basically it looked like a giant data-hairball thrown up on the user’s screen. So overall the content needed to be gone over and then formatted in a way to better serve the users and the overall display of the information was poor.
From the review, feedback and discussions with the Director and Developer, some white boarding was done that gave a basic direction for the wireframes that followed the discovery and research phase. The wireframes addressed, at a basic level, the issues discovered during the app review.
The design of the app initially was to have a dark look and feel and the following was the first iteration on that design idea.
But wait…after this first design was done the feedback, while good, still fell into the camp of “it doesn’t feel right”. So after some discussion of going over the design and bringing up some other applications with UI that was similar to tracking status it was decided that the Apple Health App had an interface that could be used as a guide and the following is what was the result of following that aesthetic?
The visual design of the app followed the Apple Health app but all of the icons for the app were created custom.