INEVENT TEMPLATE: REDUCING DESIGN TIME AND INCREASING CLIENT ENGAGEMENT USING A TEMPLATED APPROACH

UI Design                  Prototyping                  Components

OVERVIEW

At The Croc, there is a big speciality in virtual and hybrid events running for external clients. This has blown up in demand ever since the pandemic, where in person events were no longer possible, this led to the formation of podium, the events management team. They've run many events, such as COP26, IDF and The Omnis, and the demand is only growing.

Inevent is a virtual event platform, which can be customised and styled by front end developers to match the event.  This is what we use to run the events, and it works well, but as the standard inevent design is bland and isn't designed to a specific company or event, this is something we have to do. For each project/event run so far, we've had to first design and build the UI using figma. When I joined The Croc, there had been several versions and figma prototypes built for several events even though the layout was the same, this not only led to inconsistencies, but would have wasted a lot of time. 

It made sense to speed this process up, if the functionality/layout of future events is to stay the same, but the styling/branding is to change, it makes sense to do this using a templated figma prototype. This was my job, to design and create a flexible non-branded version of the inevent system using components and colour styles in figma. This allowed for the design file to be duplicated, and then styled for each event quickly, and effortlessly, saving time and money, instead of having to build the system from scratch each time, but offering full customizability and options for the client.

TIME FRAME:

3 Weeks

Improving the efficiency of design work using a templated approach.

MY ROLE: UI DESIGNER

As a UI Designer, this was my task to do by myself with feedback from the events team and developers. I was in charge of designing and building the prototype and all the design system over the span of a few weeks.

68

Components

134

Figma Boards

3

Versions

Designing this prototype using components allowed for the entire system to be easily tweaked to fit each event, meaning we didn't have to create each component from scratch each and every time, reducing the time it takes to build out the entire system from months to weeks. This project goes over the process and final result, which ended in the standard template that we use going forward for each event we run, this prototype is sent to clients during the pitch stage to introduce them to the platform and to help them get an idea of the capabilities of it, but also to gather feedback and easily review the design later on in the process. This prototype was designed with the idea of customizability and efficiency at its core, as well as being a replica of the entire inevent system, meaning it ended up being fairly large and complex, but easy to design with going forward.

FIGMA TEMPLATE PROTOTYPE

The prototypes below show the Inevent template for both Desktop and mobile. These were made and prototyped on Figma. Using these allowed for the events management team and developers to explore and provide any feedback, as well as an easy way for clients to explore the prospective system.

DESKTOP

MOBILE

TABLET

BEHIND THE SCENES

The figma prototype links are shown below. This was quite a complex prototype to get working as there were lots of small variations on each frame, and lot's of frames were needed as this was designed to be an in depth prototype which mirrored the full functionality of the platform. Below shows the frames and links for the desktop version.

COMPONENTS

Figma has a built in component feature, where a parent component is designed and made, and this can be placed anywhere across all boards, but once the parent component is updated/altered, all other child components are also changed. Using this to build out the template will save the most time down the line. I used it to design and build the entire template, with components being used for almost everything, such as buttons, cards, and forms.

There are many advantages to using components to build out a system like this, although it may take slightly longer in the short run to develop all of these assets, it saves infinite time down the line, this is because:

• Repeated assets on a single page update all at once, e.g. on the home page, there are around 12 cards for the different people online, when it comes to styling, simply changing the component will update all 12 cards, instead of having to manually tweak all 12. This goes across all art boards, so the laborious process of deleting old and duplicating new across tens of frames is no more.
• It ensures consistency, all assets are grounded by a single source of truth, so nothing can have these small issues or problems, as long as the main component is designed correctly.
• Using the variant functionality allows a single component to easily be made into lots of different variations, such as the left hand navigation panel, which can have a variant showing which option is currently selected, and these can be swapped out in the click of a button.

STYLE GUIDE

Using the Colour Styles functionality in figma also helps speed up the process. The colour style used for the template is a colour scheme designed for wireframing, making everything various shades of greys with one bold primary colour to highlight certain elements, this colour scheme can be seen implemented below.

Using color styles combined with components make styling this entire template extremely easy, as it's likely that many different companies are going to want to use the inevent system to host their events, and they're all going to want it styled differently, but the functionality the same. Using colour styles, it's possible to simply input the new HEX code next to each colour, and the entire template will be well on it's way to being styled. For example, if a company's main colour was red, we could input their red HEX code into primary asset 1, and all buttons, titles, and assets that should have the primary colour will automatically be changed across the entire template, if we repeat this for each colour, re-styling for each company will be a short and simple task.

LEARNINGS & TAKEAWAYS

DETAILED PROTOTYPING

Due to the sheer amount and complexity of prototyping needed, I explored and learnt about all of the different prototyping features, and how to minimise the number of boards needed. For example, using the overlay and back features to make pop ups easier, without having to create a new board with the pop up everytime. This allowed me to create the most life-like prototype, mirroring full functionality. Utilising all of the prototyping features is something I will take forward to each project from now on.