Pegah
UX designer

OfficeAccord
redesign

Redesigned website for a digital
employee social hub

The project

OfficeAccord is a digital employee social hub designed to help organizations onboard, connect and retain talent. The project revolved around streamlining their web design, in order to showcase their assets and features in a clear and fun way. The redesign was aimed at improving understanding of what the platform offers and therefore increasing conversion.

Discover

Competitive Analysis

To start with we wanted to understand how we could improve OfficeAccord's website, therefore a competitive analysis was carried out by the design team. This consisted of attempting to locate the information that users typically seek when visiting OfficeAccord's website, however, on competitor websites. The ease at which this information could be found was used as a metric for how user friendly competitor websites are and therefore provided a benchmark for the new and improved OfficeAccord web design. The information that potential clients typically search for includes:

  • Product features

  • Company values

  • Value propositions

This helped us to identify weaknesses in OfficeAccord's website whilst also providing inspiration for redesigning.

Ideation

Sketches

Based on our research, I started to sketch out different alternatives on how we could change the layout to make it easier for the user to find information and understand what OfficeAccord can offer. The challenge was to present the information in a engaging way in order to make it easy to read. The sketches helped me move forward by trying out a multitude of ideas and iterate them before settling on one.

OfficeAccord

Style guide

In order to start creating assets a style guide was created with colors that are used in the platform today. We mixed the colors together with a lighter version of the colors, to be able to focus on some parts more than others. The style guide helped me to keep consistency through out the whole design.

Result
OfficeAccord

Assets

My next step in the process was to create assets that would be presented on the website. These assets will demonstrate what the user can do on the platform, however the assets should not be designed the same as the actual platform. It was important to create a very minimalistic design with focus on the most essential functions, and at the same time create a fun feeling.

OfficeAccord
Mobile version - you can scroll in the mockup.

Mobile version - you can scroll in the mockup.

Results

My next and last step in the process was to implement the created assets in the website with the wireframes as my template.
The result was a playful and clear design with information of what the platform offers. The design was adapted to both mobile and desktop.

Desktop version - you can scroll in the mockup.

Desktop version - you can scroll in the mockup.

What I learned from this project

This was a really exciting and fun project for me to work on as it allowed me to play around with the assets and be creative. I was responsible for designing the user interface and creating clear information. I learned how to work with developers and other designers.