Mobile Profile
Problem: SumTotal Systems mobile application was outdated and needed a refresh. The software was a mobile version of the web application, which had both learning and talent features. The mobile app was meant to be a pared down version of the website that contained easy to access information and activities that could be done on the go. As part of the refresh, the profile page was redesigned to be an easily accessed homepage for personalized information.
Team: Fellow UX Designers, UX Researchers, PMs and SMEs.
The New Mobile Profile
A complete overhaul of the previous version.
The old application had a simple looking screen, but was actually barely usable and gave little data.
The final designs summarized data, while allowing users to dive deeper to get further information.
Major user flows include landing page, organization chart, and diving deeper into information.
Old Design
Data from UX researchers and PMs lead to several important discoveries early on in the design process. Most users weren’t uploading their profile images, making the image heavy page look unfinished. Several links at the top of the page were unclear, as they were only represented by icons. The linked pages were in fact unused by most people and didn’t make sense to be prominent. The donuts were especially problematic; the data attached was unclear or outright made no sense to be in a donut structure. There were also links, which was not clear to users.
A new design would have to eliminate elements that were unnecessary, while highlighting information that users would need most. The profile page would be a personal snapshot of a user’s progress of their learning and growth.
Early Profile Landing Page Designs
The core of the design was the landing page, the place users would land after tapping on the profile link.
These are early iterations, which show the progression in design.
(Fig. 1) At first I attempted to create a more visual diverse page, which reflected the way other sections of the new mobile design looked. Each category was a small summary or scrolling version of the first few cards that would be available after selecting a category. However, it became clear that this was overcomplicating the page.
Even in the first iteration, the design was focusing on improving the way data was shown. I kept the donuts from the old design, but kept them limited to information that had a clear goal. Other information was moved to the summary section, which showed the number of items in each categories the user needed to address. The extraneous information below was an attempt to let users see some information before diving deeper, but was ultimately unnecessary.
In the second iteration (Fig. 2) the design was simplified, removing unneeded information. Instead the donut information was highlighted, with additional categories below for past due, performance and badges. Each of these sections contained the number of items needed to be addressed. These numbers were also color coded, with pressing issues, such as past due being red, which badges, which contained items that needed to be addressed overtime, was a neutral blue.
(Fig 3.) Categories were largely unchanged from the second to third iteration, but the visual language was changed to unify the two different sections together. Continuous feedback was added as an additional category following PM feedback.
Organization Chart
A new flow added to the update was the organization chart. This flow allowed a user to check a personalized organizational chart that defaults to where their fellow coworker is in the organization. Opening the chart would focus on the selected user’s department that they belong to, as well as their subordinates. Teams are closed by default and open on a press. Only one team at a time can be expanded, in order to highlight the important information in the limited space.
Continuous Feedback
Users need to be able to get and give useful and timely feedback to and from their manager or subordinate. This can include time sensitive documents that may need to be accessed on the go. This section allows them to stay up to date on any messages. A notification bubble showed the unread messages.
Additional Flows
Flows in this group include Past Due, To Do and Badges. All sections contain color-coded notification bubbles with the number of the items that need to be addressed.
Past Due shows the overdue items that a user has not completed. These can included multiple types of activities, but is most frequently courses. Completing training such as these is important not only for the individual’s development, but also for their company. Compliance to standards and laws relating to training was extremely important to the companies that used the SumTotal application. Such courses might include safety training, anti-harassment, or specialized training for a skilled worker. Not being in compliance can subject these companies to a huge fine and other difficulties, so it is in everyone’s interest that the user is aware of their overdue assignments first and foremost.
To Do contains all activities. The user is able to see basic information about the course in order to decide which course to take first. This includes the due date and the amount of time required to view the course.
Having these training videos available on mobile was extremely valuable for the user. It allowed for them to do training while commuting or at other interim activities.
The Badges page is a mobile version of the main application badges page (that I was also responsible for designing). Badges are awards or certificates awarded to users for completing an activity or series of activities. These certificates can be set by their organization. It is also a way for companies to track their employees’ accomplishments and check on compliance. The associated activities are often based on a time limit (for example, something that must be completed yearly) and therefore badges earned by a user can expire when they need to be renewed. These are often compliance related and therefore it is the most important category for the user. The second is badges in progress, which allows users to see which badges they need to continue to work on. And finally, they can see their completed badges.
Additional Flows Pt. 2
The second half of the menu contains items that have multiple goals or activities associated with them. Users have the overall goal to complete these activities to fulfill company requirements. The data is represented as a donut graph. This gives users insight on how their goals are progressing.
Final Prototype
The final product was a landing page that gave users information about their overall progress, without overwhelming or confusing users. It was tailored to our users’ needs.
