Time keeps on slipping into the future ...
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 I led the redesign of the company website, which was concurrent with a rebranding effort. The design goals were multifold:

  • Effectively communicate services, value, and benefits
  • Establish a stronger online presence
  • Create an emotional connection with target audience
  • Utilize marketing strategies to generate leads and build an audience
  • Differentiate Grio from the competition
  • Further define brand identity

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

Photo of Grio Website Design Mockups
Photo of Grio Website Design Mockups


Planning & Discovery
  • Methods Used
  • UX Workshop
  • Project Brief
  • Project Plan
  • Gantt Chart
  • User Interviews
  • Persona Definition
  • Competitor Analysis
  • Site Map
  • Content Strategy
  • Mood Boards
  • Design Principles
  • Brand Toolkit
  • Wireframes
  • Conceptual Designs
  • Visual Design
  • Storyboard
  • Animation Prototypes

The project began with planning and discovery. I organized and led a UX workshop with stakeholders and designers to understand and document the UX aspect of the project. The team worked through a series of questions that helped us determine business goals, target user needs, and 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.

Outcomes 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.


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


The next phase was design. We started by creating a site map to determine content and information architecture. I collaborated with our copywriter to begin creating content strategy that used the sitemap as a high level reference. The designers then got creative and did a series of mood boards that were visual explorations based on our brand attributes. We moved forward with a geometric style because it complimented our logo mark and reinforced the fundamentals of creating software and our values of 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 determined yet. To figure out our identity we wanted to create a brand toolkit of visual elements so we did typography, pattern, and icon explorations. This was followed by a home page concept that utilized our identity as a focal point to create engagement and convey our message in a dynamic manner.

Elements Designed for the Brand Toolkit

Design elements from the toolkit


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 toolkit.

Scenes from the Home Page Concept Design

Grio Home Page Concept Design


Redesigned and Ready to Soar

We defined an MVP for first release and have continued to iterate on the design to make incremental improvements. The outcome of the MVP 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. The site was only recently launched in July 2017 and we immediately saw an increase in site engagement and lead generation. As well, prospect employees applying for jobs at Grio soared.

Visit Grio’s website

Grio Final Website Designs
Grio Final Website Designs