Photography Credits: Elliot Layda
By early 2019 the Giro homepage had become severely dated from both a user interface and user experience perspective. Not only did the page not meet current brand objectives, but it had been designed at a fixed width and performed very poorly on mobile devices as well as large desktop screens. I set out to create a modern digital front door for the brand with a fully responsive page that would tell the Giro brand story at the same time it provided a frictionless gateway to the Giro e-commerce experience. The project started as a clean slate with a series of team brainstorms in front of a whiteboard to define clear goals, establish an achievable schedule with clear milestones, and decide a lauch date for the project.
Once the Giro team was aligned, I lead a team through a design process to create a page based on empathy and understanding of all users. The end result was a responsive grid based design that can seamlessly integrate with a content management system so the inhouse digital team can stay nimble and instantly update without a developer. The navigation was redesigned to expose users who know the brand for helmets to all of the other product categories Giro now supports. Video content was integrated in key areas to capture visitors attention and create an emotional connection to the brand. Since the launch of the new page in March it has been universally well received.
User Personas: Ensuring a Design Solution for Everyone
Before the initial designs for the new homepage could begin, it was imperative to clearly define who the key users of the site are and what needs they have. I lead a team to identify key giro.com users based on analytics and conversations with all the key stakeholders at the brand. Once the group aligned on all of the current and potential users of the site, I bucketed them into groups and built design personas that represented a set of users who shared goals and characteristics. The key three personas for Giro.com are direct consumers, shop owners, and sales reps. Each of these groups had a very different set of needs on the site and all designs needed to work equally for all.
The younger enthusiast who wants to engage with the brand and buy Giro product immediately on their phone.
Most reps use the site to close the sale and show buyers how product will be supported by the brand if they decide to carry it.
The shop owner uses the Giro site on a daily basis as sort of a digital catalog for product information and technical specs.
Setting the Course for the Redesign
After all of the macro objectives were clearly established, I synthesized the information down into a simple shareable document that everyone could reference. This document set the course for the new page and helped inform every design decision along the way. It also was a useful tool for brand executives to share with upper management and investors when there were inquiries about the new page. In the end this document was a key piece of making sure that the final designs stayed on course and met the original objectives as they moved through the review process.