hpe onesphere mobile web
Role Sr. User Experience Designer
Task
The task is to improve the tab bar design. At the same time, it requires for it to have a few new screen for example, a user profile, session, settings and help screen.
Problem
The reported problem was about the existing tab bar having 7 tab buttons and a hovering panel when pressed. It is somewhat a messy execution. For example, the link ‘My Profile’, ‘Learn’ and ‘Log Out’ does not have enough line spacing or affordances between them which causes accidental and unintended interaction. Furthermore, there is a big ‘Log Out’ button in the panel. That is a problem alright.
Solution
As a solution, the first step is to simplify the tab bar from 7 to 5 tab buttons. This way the user is shown the most used sections that matters and that it appeals to their primary task and responsibilities when managing their public, private cloud and other data management type of services. It also makes the tab bar less crowded with buttons, making the main buttons easily accessible without the accidental actions once plaque this tab bar previously.
For example, the most used tabs or sections are shown on the tab bar, while the other section of the application, such as the user profile, login session, support documents, etc,… are neatly placed under the ‘More’ button.
To note, the goals here are to make it a technically low in cost enhancement while making the experience familiar and consistent to contemporary mobile app. practices in the market. It has come a long way.
.
The ‘More’ Screen
And since the other sections are now under the ‘more’ button, a new screen is created. The section are arranged based on frequent of used, and user feedback. For example, the ‘profile’ and ‘user session’ section are at the top allowing the user to update their profile or log out. It is then followed by the ‘settings’ section then the ‘assistance’ section.
In short, the updated design positively functions and performs as expected. It successfully solved the reported problems. The below visuals is the improved version.
mobile view