Owned Labs

Website design and development for a company that helps you create an online asset that plays an active role in your online growth.


Links:
Visit website


About the project
Owned labs, still in its first year, needed a new website to showcase the services that it provides to a prospective client.

Guiding principles for the OL website visual direction:
– Since it is a first time launch, should have appropriate use of colour and branding for recall
– Should be one that accommodates the use of bold typography
– Should feel approachable and trustable
– Should be actionable and have clear CTAs
– Should feel fresh with a pop of color
– Should be one that takes you in and out of different contexts

Starting point for Visual language: COLOUR!
The starting point for the Owned Labs visual language was the gradient used in the symbol

Explaining application of color on Owned labs

Extending the gradient
Since OL’s work focusses on understanding data and then using design to represent the outcome of the data, the analogy of a heatmap is used to derive the colour scheme. Green and blue are often the neutral spots in a UX heatmap, whereas red and yellow are the more actionable hues.

Explaining application of color on Owned labs

The following Color theory sheet shows a free hand application of the derived color scheme for the owned labs website.

Explaining application of color on Owned labs

Explaining application of color on Owned labs


Typography
– The typeface identified for the Owned labs website is Poppins.
– This typeface in its bold weight will be used in headlines and quotes where we are stating facts / making bold statements. The same typeface in its regular weight will find its application in body text and paragraphs.

Considerations while choosing a typeface for Owned Labs website
– Should be bold and impactful when used in headlines
– Should allow for continuous reading when used in paragraphs
– Should be available in multiple weights
– Should not feel dated (i.e​.,​ a traditional serif typeface)
– Should incorporate both geometry and circular forms (inspired by the symbol)

We tried new things! CSS Grid
We used GSS Grid to for the first time in the wild on this project. With @supports feature query, it made it easy to enable support for this website all the way until the early IEs.

Image showing CSS grid in application on one of the website modules Image showing CSS grid in application on one of the website modules

Design Tools:
– Sketch

Some development Tools:
– WordPress with underscores.me base theme
– CSS Grid with feature queries and flex box
– Gulp for compiling sass, concatenating JS
– CSS keyframe animation

Project management tool
(We love) Trello.

Visit website

Credits: WordPress and backend integration:- Jessica Duarte
Content Strategy, design and front-end development:- Hamsa Ganesh
Tagged in Content Strategy Visual Language Web Wordpress