My Roles Art Direction, Web Design, Front-End Development
Industry Cloud Computing

Bluvalt 
Cloud

bluvalt
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

Goal Statement: A customer is able to learn about Bluvalt’s services, find a cloud solution suited to their needs and subscribe to it with ease.

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.

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

Tech Blue

Tech Blue

HEX: 4BCBF3

RGB: 75,203,243

CMYK: 69,16,0,5

Communicative Purple

Communicative Purple

HEX: AD72E4

RGB: 173,114,228

CMYK: 22,45,0,11

Authoritative Blue

Authoritative Blue

HEX: 024065

RGB: 2,64,101

CMYK: 39,15,0,60

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.

Figure 4: UI Components

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
The Outcome
35% Bounce rate reduced

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.

35% Bounce rate reduced
Next Project
Tones & 
Shades
bluvalt