← Return homeContact
OfficeAccord
Redesigning an enterprise communication tool connecting employees at leading organisations such as Harvard, Stanford, Redhat, and Northwestern Mutual.

1. Project Brief

OfficeAccord is an employee communication tool with over 15,000 users in organisations such as Harvard University, Stanford University, and Redhat. The platform suffered from a confusing and outdated UI which the founders worried was harming sales.

2. What I Did

I led an overhaul of OfficeAccord’s interface, focusing on improving usability and creating a visual design more in line with the company’s corporate client-base.

3. Key Deliverables

I designed, conducted, and analysed usability tests, ran a usability evaluation, designed solutions to the problems I identified, and delivered a vastly updated visual design.

4. Results and Impact

With the new look and improved usability, OfficeAccord was able to rapidly close more client deals with Stanford University and Yale University.

OfficeAccord is a responsive, web-based employee communication platform. The company’s mission is to help large companies foster community within their organisations, improving employee engagement and loyalty.

The company’s actual clients are HR managers who make purchasing decisions. For them to feel comfortable investing in OfficeAccord, they need to be assured that employees in their company are going to find the tool easy to use - and not bombard HR with support requests.

After signing their first few customers, OfficeAccord’s founders realised that users were failing basic tasks (and worse, believing they had succeeded), and were blind to important features. These issues threatened both OfficeAccord’s existing customer contracts and their future sales opportunities with new clients.

In addition to the usability problems, the platform’s visual design didn’t meet the standards their multinational clients expected. Having been built on Bootstrap, the platform was very ‘boilerplate' and lacked polish.

In addition to the usability problems, the platform’s visual design didn’t meet the standards their multinational clients expected. Having been built on Bootstrap, the platform was very ‘boilerplate' and lacked polish.

Design process

My goal was to create a new visual design, and identify and solve critical usability issues.

I sat down with Ben Comstock, OfficeAccord’s CEO, and we identified the most important areas of the product to focus on, using the features that current clients were using most as a guide.

I wanted to understand where users would be failing, so I wrote usability test scripts around these important parts of the product, and tested with 5 users. This would be a cheap and effective way of identifying the most salient issues.

Running a usability test

I decided to combine a usability evaluation with the usability testing, to get a better picture of where users would be failing tasks.

Typically usability evaluations benefit from more than 1 evaluator, but I felt that we would catch the most serious problems with the usability testing, and there were enough minor problems I could identify to give us plenty to do.

The results were worse than I expected - most users completely failed each task, and those that were successful typically took a long time and had to use more clicks than should be necessary.

Additionally, I gave each participant the SUS survey after they completed the test, to get a sense of how the platform compared with other software. The score was 74, slightly above average but with room for improvement.

In general I noticed that users thought the system wasn’t that difficult to use, but also lacked confidence when trying to achieve their tasks.

Prioritising usability problems

I worked together with the OfficeAccord team to prioritise and rank the usability and design issues, taking into account how much the issue blocked user from achieving their goals and how easily implementable a solution was.

Prioritising the issues to decide what to focus on

After compiling and ranking the usability observations, we determined the most critical problem preventing users correctly sending notifications and starting conversations was that limiting visibility to certain departments or regions was confusing.

Most users failed this task. This was because “All departments” is selected by default - only if the user deselects it will it show the option to choose other departments. Users were simply missing a key feature because of the way it had been designed.

Additionally, users were confusing “private conversations” (intended for groups of individual users) with limiting conversations to specific departments.

Selecting locations was also unclear - users were unsure if selecting all locations was achieved through deselecting specific locations offered, or choosing all of them.

In general users were also missing the “additional options” available when creating conversations.

Most users completely missed the More Options section at the bottom (which expands outwards) due to the visual styling

There were also more minor issues with unfriendly/technical messages and confusing interactions (e.g. a modal window closing when a user presses enter while adding items to a multiple choice survey question).

Usability solutions

Often the solutions to the problems I identified were straightforward. For example, to show users that conversations and notifications could be limited to departments, I came up with several interaction concepts, including these:

These options would allow users to select any configuration of departments they needed, and also not take up too much space in the form.

Another example of an easy fix is this concept I created for choosing a topic, where topics would drop down underneath a chosen category, using the concept of progressive disclosure to save space and only show users what they need at the time:

I also developed ideas for simplifying the list and detail views of events and classified listings:

Adding a news feed

OfficeAccord helps organizations to keep their employees informed and connected with both the business and each other.  

To do this more effectively, the team wanted to consolidate all of the data in their product’s various modules into one news feed that would give employees a quick run-down of important company news, surveys, job postings, as well as ways to connect with their colleagues through employee events, ride shares, classifieds, housing and recognitions.

Here is a rough wireframe that shows the direction we eventually took for the New Feed:

A new visual design

OfficeAccord, as a bootstrapped product, relied heavily on existing front-end libraries and frameworks. As such the interface was very generic and unattractive - and certainly not appealing to its enterprise-level clients.

As part of the visual redesign, I sat together with the OfficeAccord team and defined what they wanted from the redesign. The team’s main concern was that their software is not proprietary - there is the threat that a large company could simply clone the tool.

By creating a more usable, clean, engaging, and visually attractive user interface, OfficeAccord was hoping to shield themselves from other companies attempting to create similar tools, become more competitive, and bolster their ability to retain and attract clients.

Once I understood the motivations behind the redesign, it was time to understand what type of visual style the team had in mind. I compiled a moodboard with a disparate range of designs and asked the CEO to pick the 4 or 5 he most envisioned OfficeAccord looking like.

Having determined the general direction, I began to define the elements of the visual style. I chose a medium blue, which was a shade of the official OfficeAccord brand color, as the primary color, and developed a muted palette to evoke a corporate, trustworthy feeling.

The tool had been built using the Overpass font, and due to a number of technical and corporate decisions we decided to stick with that choice.

In creating the visual style, I went with an aesthetic that was very minimal, using as much white space as possible.

OfficeAccord was built on Bootstrap 4, and in order to make development as fast as possible, I decided to match my layouts as closely as possible to existing Bootstrap components.

Here and some before-and-after images:

Adding an Item - Before
Adding an Item - After
Conversation Thread - Before
Conversation Thread - After
Ride Shares - Before
Ride Shares - After

Here are some more mockups showing the visual design system applied:

List of conversations
Creating a survey
Mobile view of an item for sale
Mobile version of the news feed
Survey results mobile view

Results

Here's a video shot by Ben Comstock, OfficeAccord's CEO, that explains how my work impacted the company:

Other Projects

Doctoroo
A mobile app to help patients get care in minutes, not days.
See the project →
Nokia Data Gathering
Redesigning a data collection tool relied on by NGOs worldwide.
See the project →