Brand Work
Task: redesign proposal. Design a homepage header (desktop), an email newsletter (mobile), and a Facebook ad by interpreting the existing brand brief.
Turnaround in 5 working days.
The brand is a tech start-up providing a cloud-based team organization software to share files and track workflow.
The Design Process
I started my design process by breaking down the given brand personality and assigning each of the five different qualities to a type of design asset.
Joyful
Shapes
Ambitious
Imagery/illustrations
Friendly
Tonality
Clear
Copy/typography
Calm
Colours
Joyful
Shapes
Ambitious
Imagery/illustrations
Friendly
Tonality
Clear
Copy/typography
Calm
Colours
After mapping out these five concrete focus points I started building the brand visually.
Design Elements
Colours
Since I decided that the colours would be the main contributor to the attribute calm, I wanted them to be more on the sombre spectra, yet happy. One of the colors that stood out to me in the logo was yellow (the logo consisted of three circles in green, blue, and yellow). So I came up with a very similar, slightly darker shade of yellow as the main brand colour.
As the backbone colours I landed in a very dark, almost black, blue and two different tones of beige for background colours. Supporting colours are red and green, followed by a lighter blue and purple.
The whole colour palette is calm, versatile and connects back to the logo.
Primary colours
Secondary colours
Typography
I went with the straight forward, easy to read and very adaptable google font Roboto as the brand typeface.
It is a no fuss type of sans-serif, and it will show the same on basically any device or browser there is.
Roboto
This is a smashing tagline
This is a smashing tagline
This is a smashing tagline.
Shapes
A base shape helps to bring out the spirit of a brand.
First I thought of a file, the square. It’s stackable, good as a frame, and can be used in many different angles. But is it joyful?
Then I messed around with some irregular, blobby shapes, but eventually I landed in the circle. It’s a good shape, it is part of the logo today so it is recognizable, it is good for animations and it is joyful. The shape of the circle will extend to the square shapes too, by rounded corners and soft edges.
Illustrations
Illustrations and imagery are the most important supporters of the copy, here we can really set the tone of the message.
I wanted the illustrations to be clear, ambitious, and friendly. I used the Flat Design style which goes very well with the overall design profile and the rounded shapes.
Keeping the timeframe in mind, half of the illustrations are made by me (top half), half are free to use illustrations that I modified to fit the brand (bottom half).
Design Tasks
Website
My main goals:
product front and centre, clear call to action, clear navigation.
Demonstrate the core functionality of the product right away. Make call to action clear. Display everything the visitor might want to know or navigate to either directly in view or one click away.
I started by mapping out the menu bar. I wanted to simplify the existing menu and clarify the call to action. The landing page for signing up can involve both demo and trial signups. If someone signs up for a demo you’d want to give them a trial anyway.
I then mapped out my initial idea of text and button partly overlapping image. And added the four bottom squares as a draw down. By showing the top of the next scroll level it indicates what the visitor can expect to see further down and encourages further reading.
After developing the frames a bit more there was something that wasn’t sitting right with me in the design. So in my final wireframes I scrapped the idea of overlapping and decided to add room for a more informative and interesting animation. An animation allows me to communicate more effectively what the product is and does, and keeps the viewer interested for longer.
My main goals:
call to action, information, engagement.
Serve prospects with easy to digest main benefits and most important information to take action. Plant a touch of FOMO.
Drive engagement from existing customers with product updates and relevant blog posts for their customer category.
I decided to make two separate emails for this task, one clear prospect email and one for existing customers, since the two goals are very different. I would however use the same email, only segmented, as followup newsletter for both groups. Adding only a few more layers of sale for the prospect group.
Prospect email
Call to action, explain the product, gain legitimacy.
Customer email
Valuable user information, stay relevant, encourage engagement.
Ad
My main goals:
awareness, engagement, call to action.
Spark long term brand awareness and generate leads. Effectively convey what the product is.
Social media is all for moving ads so I decided to use and adapt the animation for the website as my ad. I made it short to increase the chance of many people watching the whole ad, and chose to push three key product features that are easy to connect to on a personal level for a broad audience.
This ad can also easily be tweaked to fit LinkedIn and other social media platforms, as well as all sorts of HTML5 banners. I would recommend running the same ad on LinkedIn and sites like Unsplash where I expect much of the brand’s target audience to reside.
