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