Loading...

D-Intranet

UX/UI Design • Conceptual
Company: Deutsch (New York)

2016

This redesign is a personal "designer's proposal" to motivate a change for the interface of Deutsch's intranet system.

At Deutsch, anonymously or not, it was encouraged to voice out your opinions regarding internal matters. I had made a few comments and proposals for the improvement of the company:

  • Office Snacks: Besides making a suggestion on the best protein bar available on the market (Quest Bars) and which unhealthy snacks should be replaced, I offered to be a part of the office's nutritionist team, if they were going to approve one.
  • Brief Template: I suggested the account department should come up with a new template for their project briefs as they were not uniformed and could cause misunderstanding. A few months later, we got a new brief template that was clear, organized, and fitted perfectly in one page.
  • Food Notification System: There was a conversation among some employees about leftover food from client meetings and office events that were placed in the office's pantry area without annoucements. Many people missed the food, because they didn't know about it, or weren't quick enough to reach it. I designed a mobile application to solve this problem with one of our developers, but later changed to the idea of using bots.

And there is D-Intranet. This is an activation disguised as a redesign project for the agency's intranet site. The intention was to raise awareness among the managers regarding the usability and value of the intranet in relation to the quality of the agency and its employees, and convince them to upgrade it to a better platform. It received a positive reaction from my coworkers and made it to the management's discussion.



Research & Analysis

Who are the users?
Everyone in the agency, full-time and part-time, has an access to the intranet. The operations department are responsible for updating the information. People from other departments can submit information to them. This means we have experienced users and newcomers every now and then. The site should be very easy to navigate. Users should be able to locate the information they need within one-digit seconds.

What does the current intranet site look like?
Unfortunately, I wasn't allowed to publish the real screenshot online. However, I created a wireframe to represent it as seen below. The site is not responsive. There is no membership system and you can only access it via Safari at the office. It loads very fast, because the majority of the content is text-based. There is a top navigation bar that contains links to most important features such as payroll, expense report, and PTO request. Underneath seems to be the "fun" part of the page, which hosts an automatic photo carousel of office events, and a Twitter feed that causes a spatial imbalance within the area. Down further are lists of links to the rest of the content. While it's good that every link is presented on the page, it makes each link hard to find. Most employees don't know what's there until someone points it out to them. Some of these links also appear more than once in different categories. They need a reorganization.

What is the content?
As an information hub, the intranet is expected to have a high amount of content. From the content audit below, there are 13 content categories.



User Experience

The first half of this part was taken over by content reorganization. After going through rounds of simplification, I created the wireframes and went through details in each section.

Problems & Solutions
Problem #1: Poor content organization
Solution: Simplify the navigation as much as possible by grouping sections together under clear titles. Split the content into two main parts: the Employee and the Agency.

Problem #2: Inability to view on mobile and outside the office
Solution: Use a membership system to limit access. Make the design responsive to serve on mobile.

Problem #3: Inability to contain related information from other platforms
Solution: Awards, client wins, project launches, and weekly news are sent out as emails. While it is a good way to get instant responses, the attention level can drop as fast if not reminded. Putting those information on the intranet means the employees will constantly notice them.

Content Organization
The biggest part of this project was content organization. I started by regrouping the original content audit, simultaneously online (Google Spreadsheet) and offline (notebook). While I was listing out sections on the screen, on the paper I had more freedom to sketch out wireframes that could match with the new content. Going back and forth between these two mediums for a couple of times, I arrived with a content organization map, and a few wireframe sketches to develop into actual wireframes.

The Most Important Functions
I had a hypothesis that needed a confirmation: "Timesheet, Payroll Manager, Expenses Report, and PTO Request are the most important functions on the intranet." If confirmed, I would put them in a special section on the site where the user could access all the time. A quick survey was sent out to some of the employees for a total number of 10 people from different departments. There was one question in the survey: "Which functions do you use most on the intranet? Please list out four." The answers were as expected: all of them had the four functions from my hypothesis, though not in the same order. I later put these functions in a fixed navigation at the top of the page.

Additional Functions
I added these new functions to improve the experience.

Bookmark System
To prevent the user from going through the same route to find what they need on the intranet, a small link on the top right corner of each page, "Bookmark This Page", would save their time. After clicking the link, that page will be saved in the user's "My Bookmarks" page in their profile section. A small bookmark icon next to the link will be filled, and the link will change to "Bookmarked". To remove the bookmark, do it on the My Bookmarks page, or click the Bookmarked link again to revert it.

Employee's Profile Page
This function will benefit the new hires a lot. Employees will get a profile page on the intranet that they can add personal information/conversation starters such as favorite color, an answer to a random question from the intranet's question banks, a brief biography, and social media links. These pages will live in the employee directory section. The employee can edit their page through their profile section.

Suggestion Box
Apart from the physical suggestion box that we have, with this digital one, everyone can write a suggestion anytime from anywhere. There is also an option to send the suggestion anonymously.

Sitemap & Wireframes
Here are the site map and wireframes for desktop and mobile.

View D-Intranet's sitemap and wireframes in PDF >



User Interface

As a holistic designer, I naturally started the interface design very early during the content reorganization phase. While sketching out wireframes that could go with the new content, I was also visualizing how it could look like in my mind. During the wireframing phase, I started the design to see if the wireframes would work in reality. Once the wireframes were finished, I continued with the rest of the UI design.

Simple, clean, fast-loading, and orange (the agency's theme color) were the keywords that I used as the main criterias for the design. I also incorporated Google's Material Design principles and made changes as necessary.

View hi-res screenshots in PDF: desktop | mobile