1. Discover

Getting to know our client & their needs

Our task was to take Start Beyond's new brand messaging and visionary product to the next level by translating it into a website that would generate interest, and provide an immersive experience. We familiarised ourselves with their new brand identity and started brainstorming ways in which we could showcase their redefined values into an actionable objective for the site design and build.

Existing Start Beyond brand styleguide (credit: Monogram Studio)

2. Style

Translating brand language into a visual Stylescape

Since Start Beyond came into this project with a new identity system already in place, it meant that we had a clear direction to explore. We only presented a single Stylescape in this instance, focusing on the use of negative space to provide balance to their brand's new motifs and bright colours. When brighter colours are used in a colour palette, they can run the risk of becoming too overbearing if they have too much coverage and saturation, so it was important to find the right mix in order to create a clean yet dynamic design.

3. Plan

Creating website wireframes and mapping out content

Following approval from the stylescape, we shifted our attention to planning the structure and content for the website. Start Beyond already had a fairly detailed idea of how they wanted to map out their website in terms of content, so this made it easier to define the site's overall layout. The client’s wireframe provided the basic structure for our team to start building their wireframes from. Our designers brought in the content supplied and developed simple layouts to indicate graphics, sections and buttons.

4. Design

Apply the visual design to the wireframes in Figma

Once the client had approved the wireframe structure for the website, our team went to work evolving the basic layout into a refined visual representation of the site. The site came to life with the use of triangular shapes, bold colours and engaging imagery. It’s at this stage where we start to think about possible interactive elements to include in the next phase of the process. The website designs went through a few rounds of amends before going to the build. This included some minor layout changes, content and image updates, and general tweaks across each page.

5. Assemble

Build the final website in Webflow

The last stage in our process is the build. This is when our developer translates our visual design into a real, working website. During the build, we are able to put some of our initial interaction ideas from the design process into action. It was really important that we explored interactions that evoked a sense of depth and multiple dimensions to the user – in order to mimic the VR experience.

6. Deliver

Website launch

On the day the website went live, Start Beyond threw a launch party in Sydney to introduce their new brand and website to their clients, staff, family and friends. We were honoured to be a part of this process and thoroughly enjoyed working alongside the team at Start Beyond.

Start Beyond
Start Beyond
Start Beyond are creators of immersive spatial learning experiences in VR & AR who enlisted our team to help build a website as dynamic and engaging as their products. Start Beyond already had their branding guidelines established and were seeking our services to primarily focus on the website design and build.
Half Dome
Half Dome
After a few years of solid growth, Half Dome felt that it was time for a re-brand and new website. Expanding in such a rapid manner had led to a brand inconsistency across their collaterals, and a website that no longer accurately represented the scope or calibre of their work. Vaulter worked intensively with the Half Dome team over a week-long sprint to dig deep and create a new identity system and website to help drive the brand forward.