Brand
Awareness
Attract
Investors
Customer
Enquiries

How I built a thriving startup brand and website that draws in more customers

  • Client
    Cloudcycle
  • Role
    Web Design & Branding
  • Tools used
    Adobe XD
    Photoshop
    Webflow
  • Responsibilities:
    Style Direction
    Competitor Analysis
    Website Strategy
    Wireframing
    Website Design
    Developer Handoff

The Opportunity

Cloud Cycle had a one-page website which wasn't working for the quickly growing start up. After significant investment, they wanted to develop their brand guidelines alongside a new website, software and products.

Original branding

Cloud Cycle's original 3 colour palette was very limiting and needed to be adapted and expanded upon in order to give some life to the brand and meet online accessibility guidelines.

Blue and Grey colour swatches. Old Cloud Cycle colour scheme.
Old Cloud Cycle logo.

Our goals

  • Raise awareness of the brand.

  • Help customers with product enquiries.

  • Attract investors and new team members.

Website style direction

Bold colours, colourful gradients, abstract geometric shapes and transparencies.

Screenshot of styleguide.
Screenshot of sitemap.

Evolving the brand

The new palette I created was an evolution of the original. Still recognisable as being Cloudcycle but adapted and modernised for an innovative startup. Colour contrast was a key consideration.

New Cloud Cycle Logo on White background.
New Cloud Cycle Logo on sky blue background.
New Cloud Cycle Logo on Midnight blue background.
New single colour Cloud Cycle Logo on Midnight blue background.
New Cloud Cycle colour palette.
Ubuntu and Oxygen typefaces.

What we did next

  • Created and edited wireframes for mobile, tablet and desktop making sure content was where customers would expect it to be.

  • High-fidelity prototype with a few rounds of changes.

Design prototype

Interactive prototype created in Adobe XD so the client could sign off the final designs.

Link to XD Prototype

Outcome and visuals

A desk with an apple iMac and a laptop showing the CloudCycle Website.
A visual mockup showing different pages of the CloudCycle website on a phone screens.
Floating Ipad and Iphone with Mockup of CloudCycle website inside.

Developer handover and next steps

I took the client through the designs and got final sign off. I then created a handover for the developer with all the specifications and breakpoints needed to code the website.

A screenshot showing user interface elements for handoff to web developers.
A screenshot showing user interface elements for handoff to web developers.
A screenshot showing user interface elements for handoff to web developers.