Explore Digital Space UX/UI Design

  • Worked on project: May 2015 - October 2015
  • Client Base Creative
  • Launch Project
Space intro image

Overview

This started as a marketing campaign at a design agency I worked at, Base Creative. The original brief was to come up with a concept or experience that would inspire users/potential customers to get in contact.

This project brought everyone together, with every member of the team encouraged to contribute. My role was leading the ux and design, beginning with getting everyone together to collaborate on potential ideas.

After many brainstorming sessions we realised the best way to meet our goals was to educate users in what we do, giving users a sense of trust by demonstrating our knowledge and expertise.

We broke down our core services and felt the best and easiest way for people to learn is through a step by step process, allowing infomation to be digested and processed slowly.

Through the interpretation of a step by step experience, the word journey kept coming up in discussion. After many evaluations on the experience of journey/travel, we decided to use the metaphor of space. User's would explore a digital space like world to learn about the web.

Making it more personable

One of our key objectives was to evoke a considerable amount of trust from our users. We came up with the idea of tailoring each 'section' (or 'galaxy' moving forward) specific to a user's sector. Making the experience even more personal.

This gave users a better understanding of the context of the galaxy and a rough idea of where they stood against their competition. This became a key initiative of the project - where possible, we would engage users through interaction against data specific to their business sector.

In keeping with the theme of a campaign, we decided to release a galaxy every 7 days. Through strategic email marketing and mailouts, user's were notified in advance of when each galaxy would be revealed.

Wireframes illustrating the sector specific interactions and locked galaxies for mobile devices are shown below.

Space wireframes for paid search interaction
Space wireframe for menu with locked stages
Space wireframe for contact panel with locked stages

Visual Design

Due to the space theme of this project, we were spoilt for choice with inspiration on where we could take this visually. We opted for a playful space feel - bright colours, lots of round edges etc. we felt this would further encourage interaction and keep a friendly feel to the experience.

Each galaxy was to have its own visual personality, which we achieved simply with the use of colour. All graphical elements in each galaxy were to follow it's parent's colour definition.

An illustrative approach was taken for each of the galaxies too, with a unique hero 'planet' at the top. All illustrations were done in house, mainly by myself but also our creative director.

Additionally, for an extra subtle design feature we had a myriad of static and shooting stars going off randomnly in the background to enhance the feeling of being in deep space.

Space visual components

Additional features

User's needed a tool to save what they'd learned. Either to return to at a later date or share independently with their colleagues. Relying on general 'sharing' capabilities wouldn't have been enough so we returned to the theme of journey/exploration.

While browsing through galaxies, either all in one go or on a weekly basis, this was a journey in itself. We decided to give user's the ability to save their progress - where they'd been and what they'd learnt, in their own personal journey area.

Images below show the process of a user choosing to save their journey. Additionally we requested a user's sector at the registration page and prefilled the entire experience against their sector.

Space register screen
Space email confirmation
Space journey panel
Space journey panel - share interaction

Final Outcome

Final selection of screens for this project are shown below.

Alternatively you can visit ExploreDigitalSpace.com to see more.

Space galaxy
Space
Space branding page