Hyper Island

A complete remake of hyperisland.com

A global school

and a business transformation partner

Hyper Island design transformative learning experiences to enable growth – for individuals and for businesses.

We were awarded the job to rethink and rebuild hyperisland.com.


Visit www.hyperisland.com

Prestudy

What do we need?

Hyper Island has become a large organization with many stakeholders and customer groups. The first step of the project was to research what needs the old website didn't meet and to define goals for the new.

Site inventory and analysis

One of the first steps was to analyze the current state of the website in order to find areas of improvement.


Define tech requirements

A big part of the prestudy was to define the requirements of each tech platform we were going to use. Hyper Island is no longer just a school, they're very much an e-commerce company and the whole build would need to deliver on many verticals.

Interviewing customer groups & stakeholders

Hyper Island has offices in multiple countries around the world. Talking to customers & employees was key to map project requirements.


The roadmap

The result of the first phase became two things. A roadmap describing the approach to designing and building the site, together with milestones. The second outcome was a structured document with categorized goals and needs from each target group.

Blocks and modules

rather than pages

The pages on the site will be put together by different people for many different purposes. It needed to be flexible yet based on a strict pattern.

The framework has a set of foundations – basic ideas that will help both the people who create the pages, but more importantly the visitors.

A new interpretation

of an existing brandbook

Color palette.

Aa

Helvetica Neue Bold

Aa

Helvetica Neue Regular

Button variations.

Link styles.

Use of overlap in layouts.

Place image captions in colored cards.

Card variations.

Design guide

and ui component library

The updated look & feel of hyperisland.com needed to feel fresh and modern while staying true to the Hyper Island brand.

We kept the color palette, but added some new rules on how to use it.

Engineering a monster

A big build with many moving parts

The site runs on multiple platforms and integrates with a list of third party services. All to fulfill the needs of editors, finance, sales, marketing and product owners. In multiple markets.

The front-end is built on ReactJS and server side rendered via NextJS. We separated the presentation layer from the business layer. The content comes from both a CMS, an e-commerce system and a CRM. They're all accessed by the front-end via GraphQL APIs.

See the result in action

Visit www.hyperisland.com