About

Revolve NTNU is a voluntary student organization at NTNU Trondheim competing in the largest engineering competition for students in the whole world: Formula Student. More than 1000 teams compete, and this organization is amongst the top 10 teams.

Each year, the team produces two formula style electric race cars: one requiring a driver and one driverless.

All photos of the cars are credit to the team.

More information about the team can be found below:

revolve.no | Instagram | Facebook | LinkedIn

The work

For Team 2023, Mia Li Elisenberg was a part of their team as a graphic designer, videographer and photographer and web developer. This included work using the Adobe Creative Suite to create posters, flyers, and other promotional material.

For website maintenance and development, Figma and Webflow were used.

The maintenance consisted of publication of blog articles. The development consisted of creating mockups and testing user flows in Figma, and then implementing them in Webflow.

The process

The organization’s website has changed primarily three times since its establishment in 2010. Due to suboptimal transfer of experience between teams, with each team having a rather high turnover rate, the website turned into a spaghetti mess over time. Additionally, documentation was nonexistent.

Therefore, in 2023, it was highly due time to clean up the old mess and provide order, clarity and proper documentation.

Methods

As with most design and implementation processes, steps are repeated, resulting in an effective iterative process. The below steps have therefore been partially executed sequentially and partially in parallel.

1. Research the history of the website, including previous designs, sitemap solutions and more.

2. Research theory and standards a website must follow, such as the WCAG and design principles.

3. Research our current website and locate bugs, points where standards are not followed, points where user experiences and flows are not taken into account etc.

4. Research what companies the organization envisions itself to be like, not just visually but on a core value and organizational level; see what these companies’ websites look like.

5. Research what the websites of our competitors, other Formula Student teams, look like and determine whether we should do something similar or not.

6. Define our website’s target user group and each user group’s various goals and frustrations. Create user personas, user journeys and assess which platforms (desktop, phone, tablet) are used the most.

7. Define the new sitemap based on the needs and desires of the user groups and personas.

8. Define a design system based on the visual identity of the organization.

9. Prototype design suggestions for all pages listed in the sitemap. Start with the index (home) page, as this provides the first impression a user will experience of the organization. Then, keep theory and standards in mind when designing the remaining pages.

10. Present the final design proposal to the organization, especially the Board, and receive feedback. Iterate according to feedback.

11. Implement the final solution in Webflow.

The process result

A new consistent style

The research phase found the organization’s current website to be messy and inconsistent in design and technicalities. It also broke several of the WCAG’s points.

An analysis of all current F1 team websites revealed that Revolve NTNU’s website would benefit from making content more accessible across the site, having a consistent pattern in terms of layout (both type and media), reducing paragraph lengths to make the site more scan’able, having more CTA’s (Call to Action buttons), and more.

Methods

Google Analytics data from previous years was used to map out where the users come from (country and city), which language they use, which operating systems, browsers, devices and screen resolutions they use, and where the users originate from (direct link, organic search, referral, organic social).

In previous projects, surveys have been conducted to provide data used in creating user personas. However, due to a tight project schedule, this was not possible. The user personas were therefore created based on the Google Analytics data and data from previous experiences of the organization. 7 user personas were created, each with an example user scenario and journey.

The new sitemap eliminates unused and outdated pages, resulting in the removal of a second layer of navigation. Now, the navigation is flat – you don’t need secondary dropdown menus.

Due to complete lack of website documentation, a design system has never formally existed. Therefore, a design system was developed, based on the theory presented in Figma’s 2023 YouTube course on how to make a design system. This includes foundations, components and patterns.

The final design was not designed with mobile-first in mind, but he design system lays the foundation for creating a website design that is simple to convert between different viewports.

The final implementation was executed, utilising CMS to make maintenance and further development both easier and more effective.

The new design system

The final website redesign (desktop)

The final website redesign (mobile)