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