coopexports-13_edited.jpg

Double

UX/UI site redesign

Client & task

Year

May 2022

Location

Remote (Dutch based agency)

Double are a fully remote growth marketing agency who help clients understand the inner workings of their marketing. They build systems that acquire, convert and maintain customers. 

  1. Light branding and direction including typography & colour

  2. A new component library 

  3. Wireframes for all site pages on desktop & mobile

  4. Full suite of visual designed pages

Shape 1.png

I worked closely with one of the founders and a product owner and redesigned the sitemap, created wireframes based on each pages KPI's for mobile and desktop and a full suite of fully visually designed pages. Initially we did a lot of branding work including mood-boards and colour exploration to really push the brand. The aim was to make their users feel safe
, curious
, excited, welcome and looked after. Words we defined to describe the brand were: nerdy, 
complex, 
practical, 
self assured
, collaborative, reactive and adaptable. They described the move as going from your 20's to 30's and maturing a little. 

The journey was ever changing and meant I had to be adaptable with their moving goal posts. Although we explored a different colour pallet the decision was made to go back to the original one in week 4. In the end I delivered a component library and design system elements like typographic styles, icon sets etc, wireframes and UI pages for 14 pages (two breakpoints) over a 6 week period. 

The solution

The process

Moodboards & branding

We began the process working with their new logo and exploring styles and where we could take the brand. We explored a new green colour pallet however we did go back to the original blue below. I chose to explore greens because they have connotations of growth, harmony, freshness, safety. The pairing with a dark charcoal created a mature look which leant on the agencies new direction. We wanted to push the freshness with the lemon/lime shade as an accent colour. Although it was liked, through company reviews it was decided the change was a little too much fro the brand and is something that can be evolved in the future.

 

I created three mood-boards to pick from and ran a collaborative meeting where we all discussed elements that were liked and disliked. From this I created a final look and feel mood-board, which is on the right. This was used moving forward to define brand elements and typographic styles. 

Featured article images.jpg
Moodboard 3 - Elegant nerd_V3.jpg
Desktop Homepage.jpg
Mobile Homepge.jpg
Desktop - Portfolio landing page.jpg
Mobile - Portfolio landing page.jpg
Desktop - Career landing page.jpg
Mobile - Career landing page.jpg

Wireframes

Once the visual elements had direction we moved onto creating wireframes for each page on both desktop and mobile. This process was quite light due to the project scope and included some research of competitors site structure.

I worked closely with the CEO to define each page's goals and reflected this in the page's hierarchy. We went through several rounds of iterations to ensure that all KPI's were met for both new clients and new employee users. I presented the pages in Invison and has regular communications with the team to get approval of each page. 

Full page designs

The full page UI designs were composed of numerous components and variants of those components. A huge change for the company was to re-platform and create structure yet remain creative in their look and feel. We had to make sure that the page designs did not feel so template like and it was a fun design challenge to apply the iconography/brand elements is an organised and structured modular way of thinking. A lot of lateral research was carried out and design trends to get inspiration on how to achieve the look and feel that the client was looking for. It was challenging at times to create the right style however through careful communication and branding workshops of key words and how they wanted the users to feel we were both very happy with the end results. 

Image 1_2x.jpg

Ready for dev components 

To maintain the structure of the UI designs I created a light style guide/component library for the client. This had the basic elements like typography and CTA's as well as more designed icons and lockups. I created detailed notes and support the developer now in the last stages of the project to ensure the interactions are correct and the designs are implemented correctly. 

Components board.jpg