Bluvalt

bluvalt

  • Art Direction
  • Web Design
  • Front-End Development
Lloyd Bennett - Digital Designer

The Challenge Create an optimal experience that encourages customer conversion

Bluvalt is a cloud computing service based in Saudi Arabia, focused on providing affordable and locally-tailored computing resources for SME businesses. Think Heroku or Digital Ocean but tailored for Saudi tech start-ups. Bluvalt launched several social media campaigns to increase customer engagement and acquisition. Even though they had a high click through rate, they found 95% of their visitors on average would only spend 30 seconds on their website.

Bluvalt believed their low customer conversion stemmed from the overall design and experience of their website. To solve this issue, Bluvalt hired software design and development agency thoughtbot to redesign their website for a better user experience. My remit on the project was to carry out the visual and interaction design.

Setting goals and wireframming

After reviewing users activity on Bluvalt’s website we noticed many users were becoming lost. We came to the conclusion that the high bounce rate was due to a lack of clarity in the value proposition and a poor information architecture. We saw this as a good point to take a step back and try to understand the goal(s) of the website. Understanding the goal empowered us to make better design decisions when crafting a new user journey.

Quotation Mark

Lloyd understood the problem, wasn’t much back and forth.

Rami Taibah
Rami Taibah UX Architect at Bluvalt
Media Background Components

Figure 1: Flow Diagram of the proposed design

Establishing a visual direction

I created an inspiration / mood board of visuals that I felt would best convey the brand and presented this to the client. Undertaking this step before fleshing out any mock-ups made the client feel involved in the process and prevented excessive design revisions going forward. Together we decided to go down a playful illustrative direction that has an emphasis on the working Saudi community. We wanted to remove the typical “serious”, “nerdy” and “enterprise” feel about computing and create something that resonated with the local community.

Media Background

Figure 2: A collection of visual references on an 'Invision Board'

Colour Swatch

Tech Blue

HEX: 4BCBF3

RGB: 75,203,243

CMYK: 69,16,0,5

Colour Swatch

Communicative Purple

HEX: AD72E4

RGB: 173,114,228

CMYK: 22,45,0,11

Colour Swatch

Authoritative Blue

HEX: 024065

RGB: 2,64,101

CMYK: 39,15,0,60

Headline 1 & 2 – Gotham Rounded Bold
Headline - Bold
Headline - Bold
Alphabet - Bold
Numbers - Bold
Headline 3 & 4 – Gotham Rounded Medium
Headline - Medium
Headline - Medium
Alphabet - Medium
Numbers - Medium
Body – Gotham Rounded Light
Type - Body
Alphabet - Light
Numbers - Light
Arabic Version – Teshrin Bold, Medium, Light
Type - Arabic Bold
Type - Arabic Medium
Type - Arabic Light
Sketch One
Sketch One
Sketch One
Slice
Value For Money
Secure and Reliable
Small Businesses
Medium Businesses
Developers Icon
Virtual Machine
Software Licenses
Block Storage
Public IPs
Network Bandwidth

Figure 3: Illustration & Icon Design by Mike Weinstein

Home Page
404 Page
Sign Up
Sign Up
Virtual Data Center
Virtual Data Center
Sign Up

Developer Hand-off

The typical designer to developer hand off consists of a bunch of Sketch files with annotations being thrown over the wall with the expectation that the developer(s) will be able to make sense of it. In my experience this approach usually doesn’t end well. To avoid this I created an HTML & CSS prototype of the website. This allowed the client’s internal development to work more efficiently as they had ready made code available to convert into React components.

Media Background Components

Figure 4: UI Components

The Challenge Conclusion

thoughtbot delivered a new web experience and a cohesive visual language for Bluvalt.com. This generated lots of positive feedback and sharing from customers on social media. Most importantly, the website bounce rate reduced by an impressive 35%. Bluvalt also benefited largely from the high level of communication and transparency we maintained during our engagement with them, through daily stand-ups, retrospectives and demos. They felt involved in the design process and understood every decision being made.

Quotation Mark

Top notch, problem solvers, very candid. I felt like it wasn’t all about the end product, the work-flow, communication was very important to thoughtbotters too.

Rami Taibah
Rami Taibah UX Architect at Bluvalt
35%
Bounce rate reduced