Time keeps on slipping into the future ...
back
Grio website design by Robert Jarrell

Grio Website

A Strategic Online Presence

Grio is a design and development studio in San Francisco. As design director at the studio I led the redesign of the studio’s website in 2017, which was concurrent with a rebranding effort. The design goals were multifold:

  • Elevate our professional online presence
  • Effectively communicate our services, value, and benefits
  • Create an emotional connection with our target audience
  • Utilize marketing strategies to generate leads
  • Differentiate Grio from our competitors
  • Showcase our new brand identity

I led a cross functional team through all phases of the project, conducted workshops to generate ideas and create alignment, experimented and defined brand identity elements, developed concepts, produced visual mockups, and even did some front-end development.

Grio Website Design Mockups
Photo of Grio Website Design Mockups

Planning & Discovery

The project began with planning and discovery. I organized and led a UX workshop with stakeholders and designers to understand and document the UX objectives. I led the team by asking a series of questions that helped us determine business goals, focus on user needs, and define strategy. We captured the site’s main tasks and scenarios with simple flow charts and determined how we would measure the success of the redesign. The workshop helped provide focus and agreement on what the website redesign would entail from a UX point of view, which is essential for the design team to understand and align on.

Outcome from the UX Workshop

Outcomes from the UX Workshop

The Brief

Near the end of the UX workshop we prioritized each section in order of importance. I then created a project brief that captured the vision, problem, goals, objectives, requirements, phases and milestones. This is another alignment method and living document that confirms the work we are doing. It is shared with the entire project team and everyone signs off on it. It can also be useful for anyone who joins the project at any stage to quickly get up to speed.

Research

The research phase included client and employee interviews, persona definition, and competitor analysis. Key findings from the research informed our strategy and decision making. I updated the UX workshop document and project brief to reflect any new insights.

Example Pages from the Competitive Analysis

Grio website competitive analysis

Design

The next phase was design. We started by creating a sitemap to define information architecture and I collaborated with our copywriter to lay out content strategy in wireframes. Concurrently, designers got creative and explored a series of mood boards that were visual explorations based on our brand attributes. We moved forward with a concept we called Playful Experts, a geometric style that complimented our logo mark and reinforced fundamentals of creating software, collaboration, structure, and reliability. We also felt it differentiated us from our competitors. With this general direction in place we created design principles to guide us toward creating the website’s personality.

Design Principles & Mood Board

Design Principles & Mood Board

Brand & Identity

Early in the project we decided to use an unorthodox approach to the site design and treated it as an exploration of our brand identity, which we had not completely defined yet. To figure out our identity we evolved our brand style guide and defined typography, pattern, and iconography. This was followed by a home page concept that utilized our identity as a focal point to create engagement and tell our story in a dynamic manner.

Elements Designed for the Brand Style Guide

Design elements from the toolkit

Concept

The home page concept relied on dynamic animations that morphed our logo mark into different icons that supported key messaging. We developed this by creating a storyboard of 7 scenes and then prototyped animations for developers to reference. After the home page was finished all additional pages on the site were designed using various visual motifs from our brand guide.

Scenes from the Home Page Concept Design

Grio Home Page Concept Design

The Impact

Redesigned and Ready to Soar

We defined and delivered an MVP for launching our new brand identity and website and continued to iterate on the design to make incremental improvements. The outcome of the site is a clean, fun, modern website that clearly communicates Grio’s brand, identity, values, and services to our target audiences and differentiates us from our competition. After the new site was launched we immediately saw an increase in site engagement and lead generation. As well, prospect employees applying for jobs at Grio soared. And our employees were proud of our site as it reflected our brand, culture, design, and development capabilities.

Visit Grio’s website

Grio Final Website Designs
Grio Final Website Designs