BluvaltCloud
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.
Lloyd understood the problem, wasn’t much back and forth.
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
HEX: 4BCBF3
RGB: 75,203,243
CMYK: 69,16,0,5
Communicative Purple
HEX: AD72E4
RGB: 173,114,228
CMYK: 22,45,0,11
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
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.
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.
