OMNI AWARDS: RECOGNISING THE HEROES OF REMOTE WORKING

UI Design                  Prototyping                  Visual Design                  Creative                  Team Project         

OVERVIEW

Supporting the digital events team at The Croc, our client Omnipresent came in asking for us to help with an awards show. They wanted to run a digital awards show revolving around the celebration of home working, Omnipresent is a company that is dedicated to supporting other companies working remotely, and wanted to celebrate the companies that have embraced remote working the best through 6 distinct categories.

They wanted us to help define and come up with the creative direction, and the look and feel of the event, expanding into the UX/UI Design of the website and event series, and the creation of all the assets, including social posts, emails, and the awards themselves, as a team we worked on the creation of this digital award series from the ground up.

TIME FRAME:

4 Months

OTHER TEAM MEMBERS:

Creative Director

Events Management

Copywriter

Developers

Mockup

Recognising the heroes of remote working.

With this new awards programme, we're recognising organizations and their remote hiring practices in six different categories reflecting the stages of an employee lifecycle:

Outstanding Recruitment & Talent Acquisition

Outstanding Learning & Development

Outstanding Culture & Communication

Outstanding Asynchronous & Hybrid Working

Outstanding Wellbeing & Benefits

Outstanding Reward & Recognition

https://www.omnipresent.com/theomnis´╗┐

6

Awards

100's

Registrations

48

Figma Boards

MY ROLE

UI DESIGNER

As the sole designer, it was my job to take the creative direction and the journey map, and translate it into an effective and engaging UI, this was designed and prototyped using figma.

CREATIVE DIRECTION

I took part in the initial conversations and explorations into what the creative direction, and theme of the events could look like. This meant creating and brainstorming several unique concepts into where the project could head.

 

GRAPHIC DESIGNER

Further content such as social posts, advertisements, emails and winners assets were needed for the event to run smoothly. It was my responsibility to design and create all of the above assets, and more.

The final event screens are shown below.

HOME PAGE

The home page is the main lobby, it contains a pre-recorded video explaining the awards to the user, as well as all of the relevant information they would need at a glance, including who's online, what break out rooms are online, and the agenda for the day. There are 6 award categories, so the lobby has 6 versions, themed for each award.

AGENDA

The agena page breaks down the schedule for the event. It displays each event for the day, with options for the user to join, expand or pin each activity. A tab system breaks it down by day.

SPEAKERS

The speaker page shows a list of the announced speakers, as well as details for each, such as what category they're speaking at, their company, and their title.

KNOWLEDGE HUB

The knowledge hub is the central hub for all past events, each event is recorded, and uploaded here for people to come back to, to watch anything they might have missed, as well as bonus content.

NETWORKING PAGE

A crucial part of the event was the networking, allowing users to connect, talk to, and book meetings with fellow attendees as well as the speakers and judges. 

FIGMA PROTOTYPE

The UI was designed and built in figma, this allowed for a working prototype to be created. The prototype can be found below, you can navigate and explore between the above pages.

View the prototype here in case the embedded iframe doesn't work

THE DESIGN PROCESS

To start the design process, we decided to ideate and explore several aesthetic concepts/directions we could take the project in. This direction would be consistent across the UI, website, and social posts. Below are the concepts I explored, there were 3 of them in total. These were mocked up quickly, prioritising speed and range over quality at this point. Once mocked up, each concept was presented to the wider team, to receive feedback to steer the project into the final concept direction.

CREATIVE EXPLORATION - COMIC

The first creative direction explored was into the genre of comic books. The style wanted to reflect the slightly retro, nostalgic and creative industry of comic books. This idea came from the catch phrase "Recognising the heroes of remote working", with the immediate link between heroes and comic books. Using a small colour palette, the direction was explored through a logo, poster and social posts as shown below. The style reflected the grainy, hand drawn, imperfect aesthetic, and made a less serious, more fun attempt at the awards.

hero-1920
hero
Comic-BookV2
omnis

CREATIVE EXPLORATION - MODERN

The second creative direction was a modern aesthetic, composed of the company logo in a minimal style, on top of complex, abstract and colourful backgrounds, with the logo acting as a transparent window into the background. Some mockups with some background ideas are shown below. These backgrounds were chosen to represent the idea of "fluidity" and "liquid" due to the flexible nature of remote working, and how remote working is the "fluid" way of working in comparison to typical office working. In the final version, these backgrounds would be animated to produce a series of visuals.

3
1
Abstract
2

CREATIVE EXPLORATION - ABSTRACT

The final creative exploration was into a more vibrant and abstract aesthetic. This took on the appearance of a modern online brand, similar in a lot of ways to MTV, using a range of bright vibrant colours, and neon effects, as well as 3D shapes integrated into the designs. A range was explored as seen below, including mockups for logos, posters, and social posts. It was designed to be eye-catching, and help draw in a slightly younger audience.

futuristuc
FUTURISTIC-LOGO2
FUTURISTIC-LOGO4
futuristic
2727029
FUTURISTIC-LOGO
Untitled-1-1
2411779

These 3 creative directions were put into pitch decks, and then each presented to various stakeholders, including people from the team, and members from the client side. Based on the feedback and comments from these meetings, the final direction was chosen. As other directions were also pitched, the winning direction was a mix of several versions, the comic book style was well received and was taken forward, but it was merged with a more classic awards show feeling, similar to The Oscars or The Brits. This resulted in the colours, shapes and patterns of the comic style, without the use of comic book characters or the "imperfect" feel, merged with the higher class trophies, categories and feel of an award show, this is expanded on below.

FINAL DIRECTION - THE OMNIS

As mentioned above, the final direction was chosen, this was called "The Omnis" to mirror the professional feel, and the short and snappy title of "The Oscars", making it easy to remember, and makes it easy to fit on social posts and UI. The final asset below was created as a guide to what the direction would look like, and what it should contain. The hero shot of The Omnis was built as the base for the rest of the project and design to be expanded on.

key-visual-main

USER JOURNEY

To start the UI design, some background research was conducted into similar events and experiences that mirror what was trying to be done, looking at what was done right, and what could be improved. Digital events as a whole exploded over lockdown, so although it's a fairly new subject area, there were many examples we could base The Omnis off.

A user journey was created at the beginning to help give us an idea into the flow of the event, and how it could be run. Working with a UX designer and the events team who have run previous events, allowed the user journey to mirror what the average journey a person would go through, this was used as a source of truth to refer back to at any point to ensure we were on the right track.

Omni-journey-map-1-1

WIREFRAMING

Through an iterative design process based on ideas generated from the user journey, what started with a range of quick scribbles on a piece of paper, were slowly transformed into wireframes. Some of the more polished wireframes are shown below, these were refined and developed over time to result in the final versions by getting feedback from a range of groups including:

  • Other Designers
  • Developers
  • Stakeholders

It was important to acknowledge and be aware of platform restrictions, the event was being run using Inevent, and this meant there were some things which could not be fully customised and made unique, so being aware of these from a development standpoint fed into the design process.

Networking-Page-2
Speaker-Page-2
Knowledge-Hub-2
Agenda-Page-2
Lobby-Page
Knowledge-Video-1
Slide-16_9-1

BRANDING/DESIGN GUIDE

To help ensure the styling was kept consistent throughout all the different mediums, from UI through to social posts, a design/branding guide was created to use as a continued reference.  The guide was created using the chosen direction from the creative ideation stage. The style guide is shown below, this contained the colour palette, typography, and repeatedly used assets such as the main category icons. This was shared with other designers and developers throughout the process, used as a single source of truth, enabling all created assets to be consistent and correct.

 

Combining this design guide, with the above wireframes resulted in the creation of the final UI, the wireframes were styled to match the guide through an iterative process that spanned several versions.

UI/PROTOTYPE

The prototype was developed as shown right using figmas built in prototyping.

This can be viewed here

Prototype

SOCIAL ADS

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

LinkedIn-Cover-Announcement-AHW
Nominate-now
Award-Announcement-7
Category-Announcement-9
Award-Announcement-9
Enter-now
Remote-hero
Culture-and-Communication-1-Griffin
Tushar-Agarwal-2
Kaleem-Clarkson-4

WINNERS PACK

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Winners_Certificate
Winners_Certificate_Mockup
Winners_Billboard
Winners_Badge-2
Winners_Badge-1
Winners_Stamp
Winners_Post
Zoom-Background
Winners_Post2
Winners_Banner

RESULTS/STATISTICS

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Key results

6.7k

2:09

15%

18.5k

Visitors

Avg. time online

Financial growth

Engagements

TAKEAWAYS + LEARNINGS

FIGMA COMPONENTS

Due to the complex and ever changing nature of the prototype, implementing the component feature on Figma allowed for the iterations to be developed fast and without having to start again each time. 

I've previously used the feature, but implementing it right from the start saved a lot of time and hassle throughout the entire project.

COPY CONSIDERATIONS

The changing nature of the copy for several social posts, meant that it became difficult to design some of these assets when the copy was increased. It's taught me to be more mindful of how copy can influence a design, and how to make considerations earlier on in the design process as to how to fit the relevant copy on.

MOCKING UP CREATIVES

The importance of being able to mock up quick concept directions was paramount in this project, but I had a habit of spending slightly too long polishing designs at the early stage. This high fidelity designing isn't needed until the refining stage, and just wasted time early on.

My ability to create quick concepts to pitch ideas has improved drastically.

FILE ORGANISATION

Due to working with external clients, source files and images were frequently needing to be transferred back and forth. This placed an importance on file naming, locations, and size, having to practice and learn the best ways to keep things neat is something I'll take forward.