Launching a new website and brand vision

Project: Brand Identity and web design

Client: OASIS Open

Sector: Non-profit

Responsibilities: Brand Identity, Web build, Web design, UX and UI design

The challenge:

Our Approach

OASIS Open is a non-profit standards body helping individuals, organisations, and governments come together to solve some of the world’s biggest technical challenges. The body champions this through the development of open code and open standards.

OASIS Open’s existing website hadn’t been updated in over a decade and was in need of modernisation in order to align the brand and digital presence with the innovative nature of the organisation. We refreshed the non-profit’s brand identity and created a new website in collaboration with our development partner, Human Made.

Highlights

Outcome

A brand identity and website that fits the core values of the organisation and is a delight for users. The new website is now live at https://www.oasis-open.org/.

Our refreshed visual identity and mobile designs for several OASIS Open templates
Our refreshed visual identity and mobile designs for several OASIS Open templates

Discovery

We kicked off the project with a discovery and research sprint in order to determine what OASIS stood for as an organisation and how its new digital presence should reflect its mission and goals. We spoke with a wide range of internal and external stakeholders to establish the key user needs for the website and organisation as a whole. We quickly realised that not only was the existing website making it difficult for visitors to find the information they needed, but it also wasn’t effectively communicating the key elements that set the organisation apart from others in the standards space.

In addition to stakeholder research, we also ran multiple collaborative workshops with stakeholders including a detailed brand essence exercise to help set the foundational elements of the new visual brand direction.

Elements of the new visual design guidelines established for OASIS Open.
Elements of the new visual design guidelines established for OASIS Open.

Branding & design principles

OASIS already had a well-established logo and a colour palette that was recognised within the community. Rather than create something completely new, our approach was to simply modernise what was already there, and extend the visual language around it.

We redrew the symbol using rounder forms and paired it with bespoke type that echoed the shape and weight of the logo design. We also introduced a more vibrant and modern colour palette, including a gradient to prevent designs from looking too cold and clinical.

To add more personality and visual interest to the brand, we developed patterns and iconography which could be used across the website. These were created using the “O” from the word mark to form a dot-grid. The joining of the dots represents the concepts of community, collaboration, networks, sharing information and most importantly, openness.

Refreshed branding for OASIS Open. The joining of the dots in the icon design represents community, collaboration, networks, sharing information and openness.
Refreshed branding for OASIS Open. The joining of the dots in the icon design represents community, collaboration, networks, sharing information and openness.

The aim was to create a look and feel through the UI that exploited clear, white space and was modern, dynamic, enthusiastic, friendly and approachable.

After an agreed brand direction was established, we began building out a design system incorporating all of the new visual elements with clear guidelines for future usage. Developing a design system ensures consistency across the brand touchpoints and allows for easy additions by the development team and internal marketing teams in future.

A selection of key templates  from the updated OASIS Open site design.
A selection of key templates  from the updated OASIS Open site design.

Website design

In parallel with the branding work, we began working on an updated user experience for the site. We overhauled each of the key templates in order to better serve the actual user needs. The website needed to be equally effective for each of OASIS’s key visitor types. It had to market the organisation and its offering to new visitors, while simultaneously making it quick and easy for existing partners to access important technical and standards documentation.

In order to better market the organisation we put a greater emphasis on its latest work, news, and events across the site. We developed a more visual homepage that clearly highlights the latest happenings at OASIS, showcasing the constantly innovating community. We reinforced this element by creating new dedicated sections for ‘News’ and ‘Events’.

This makes better use of tagging so that content can be viewed according to the relevant technological field. The pages for standards and technical committees previously contained long lists of text links without filtering options, making it difficult for users to find key information. We introduced new filtering and formatting for those pages in order to only display the most relevant information and allow users to sort through data easily.

We applied the updated brand and visual styles across the website, introducing the custom patterns and iconography to bring a distinct OASIS feel to the site. We worked closely with HumanMade, to apply the designs in build and bring our vision to life.

“Furthermore not only knows design, they understand its intimate relationship to how people feel about a brand. They spent the right amount of time on researching our organisation, talking with stakeholders and consistently refining their designs to meet our needs and deliver an incredible set of assets and designs that have given our brand new life, while staying true to the best parts of our history. They were a true partner in our rebranding and redesign and I would hire them again in a heartbeat for any other design projects we might need.” — Guy Martin, Executive Director, OASIS Open
Next Up:

More case studies:

Get in touch with the team to discuss your idea, project or business.

workshop session for a service design project
service design workshop with Furthermore teamLarge Furthermore logo in white
The Telegraph App
Providing news on the go