Pegah
UX designer

OFFICEACCORD

A digital employee social hub that brings people together

OVERVIEW

OfficeAccord is an employee onboarding, company culture, and engagement solution designed to help organizations onboard, connect, and retain talent.

Team: 1 UX/UI designer, 1 programmer

Duration: 3 weeks

Tools: Figma, Photoshop, Webflow, Zoom

CHALLENGE

The project revolved around streamlining their web design, in order to showcase their assets and features in a clear and fun way.

GOAL

A redesign that aims at improving the understanding of what the platform offers and therefore increasing conversion.

01 - DISCOVER

COMPETETIVE 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.

02 - 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.

03 - 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'VE LEARNED

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. In previous project I have mainly worked in a team, but it was refreshing to work solo for a change which also pushed me to take quicker decisions by myself. My responsibility was mainly to design the user interface that should provide clear information for potential clients, which was a challenge. Since the product is very wide with several functions I felt like the challenging part was to decide what to highlight and not in the beginning of the project. The different methods that I used before creating, like competitive analysis and sketching, helped me to narrow it down and take decisions faster.