24H · Design Challenge

Re-designing UX for an intranet.

Challenge

Create a new proposal for Mango’s intranet, its home page and navigation, using responsive design for mobile, tablet and desktop.

Solution

Re-design of the intranet with a mobile-first approach, reorganizing hierarchies of features.

Original intranet to be re-designed.

Pain Points

· The superior menu presents 8 pages, more than what a good design system should have.
· The intranet’s home presents 9 sections showing same hierarchy of importance.
· Words used for links are not easy to understand, making the user feel lost.
· User section missing.
· The home presents an unbalanced structure where each section has a different size.
· Lack of consistency in information architecture generating a fail navigation.

Re-design of the sitemap with a mobile-first focus.

Sitemap

All the elements of the intranet are gathered to create a new organization in order to improve the user’s navigation. At the same time, names of sections are changed to maintain a comprehensive vocabulary to the user, and some elements such as the ‘last visited’ section will be shown only in the desktop version.

Finally the mobile app’s sitemap is defined, the user will access to a home feed with the highlighted sections such as Human Resources, Mango, and User profile. The home will also show a search icon and a menu to extra information. Every section is no further than three clicks away now, for example if the user wants to plan his vacation days, he will go to HR section and then click into Petitions.

Mid-fi wireframes to start defining some aspects of the design like typography and icons.

Wireframes

Once the hierarchy of elements and the navigation is defined, I proceed to do the low-fi wireframes for mobile and desktop versions. I iterate the wireframes until I get a good distribution for the home. Then the mid-fi wireframes are done in Sketch and some elements are defined, such as typography and icons that will represent different sections. By these visual elements, user experience is improved, as recognition is important when navigating. Mobile and tablet design will both have a top and bottom bar. Both will have three icons in the bottom bar, each with the name of the section. The home feed will show the calendar, news, advertises, outlined information and an informative slide, each one following a different level of importance .

Hi-fi wireframes of the intranet in responsive design.

Styleguide

Following the style of the simplification of Mango’s logo, five icons are made to represent the different options of the intranet. Lato Regular and Bold is used as the main typography, and different sizes are applied to show different levels of importance.