A Multi-Faceted Approach to the Rivals Brand Refresh
Refreshing your company’s brand is more than just updating your logo. Refreshing your brand requires multiple layers of design and development to create a strong brand identity that can be implemented across platforms consistently and reliably.
When Rivals decided to refresh the branding on their website, mobile apps, and social media accounts, Grio knew that multiple design elements would be needed to carry the design across platforms. Grio worked with Rivals to establish their digital design goals, and then the Grio team worked tirelessly to bring Rivals’s vision to life.
The Rivals Brand Refresh Design Goals
Using a new logo, typography, potential color palette, and general brand guidelines, Grio and Rivals collaborated to create a more robust brand identity that incorporated and expanded on the original concept.
Once the new brand identity was firmly in place, Grio created four key design goals for the brand refresh:
1. Create Digital and Physical Branding
The initial Rivals brand refresh was created with the physical space in mind. However, Grio needed to pull those elements into the virtual space. Grio took the logo, topography, and basic color scheme provided by a third-party design agency and created a robust brand identity to bring the refreshed Rivals brand to life within the digital realm.
For example, while the color palette created by the design agency was striking for t-shirts and posters, the small number of colors would have led to simplistic website designs. Grio expanded on the original palette, keeping the core colors and adding secondary and tertiary colors to add complexity to the website design.
2. Update the Rivals Homepage and Articles
Grio revamped the Rivals homepage, redefining the layout and reorganizing features to dictate the flow of the page in ways that better served Rivals users. Grio combined user data with modern and established editorial experiences to inform intelligent design decisions that allowed us to optimize UX.
Grio also added new features, such as live news updates and community forum widgets, all incorporating the new brand identity while also improving the website’s accessibility and scalability.
3. Streamline Design and Development for Future Success
Grio not only focused on the immediate brand refresh but also on the long-term success of the platform. During the brand refresh, developmental updates were made to the website. Grio used Atomic Design Methodology to create a cohesive design system that was built using block components.
While these updates added time and effort to the refresh, they prepared the website for future scalability and improved consistency in future page design for both designers and developers. These changes both streamlined future workflows and successfully set up the website for long-term success.
4. Ensure Consistency Across Platforms
Finally, while the redesign prioritized the Rivals website, it was important to Grio that the new design elements were carried across the other platforms in a consistent visual language. In addition to updating logos, Grio also updated typography, color palettes, and subtle brand elements throughout the Rivals iOS/Android apps and social media templates. By carrying the brand refresh consistently across all platforms, Grio was able to increase Rival’s brand identity.
Grio’s Design Strategies
Once these design goals were in place, Grio used multiple design strategies to create a successful brand refresh:
User Analysis
Before the onset of the brand refresh, Grio used an analytics tool to perform a user analysis for the website. While user research had previously been completed, user groups and their needs can change over time. Grio found that new users primarily accessed the Rivals platform via articles but that returning users spent most of their time in the community forums.
UX/UI Design
Grio was able to use the findings from the user analysis to prioritize user needs throughout the refresh. The brand refresh presented a fantastic opportunity to improve UX, especially on the most-visited pages, including the homepage and articles page.
For example, given the popularity of the community forums, Grio was able to make design decisions that highlighted the community forums on the homepage to improve their accessibility. Grio was also able to introduce widgets to the design flow so that each college page could be customized based on their individual users’ preferences.
Visual Design
As mentioned above, Grio focused on more than just logo updates. Elements from the new logo and color scheme were incorporated across Rivals platforms to improve brand recognition. While this was relatively straightforward on Rivals’s main pages, Grio’s designers had to find innovative solutions that allowed them to carry it over throughout every college page.
On individual college pages, Grio designers had to find ways to incorporate a wide variety of school colors, ranging from very light to very dark, while still maintaining contrast values that met WCAG accessibility standards. They also had to find ways to incorporate colors that contrasted with Rivals’s new color palette.
Grio’s designers used a number of solutions to overcome these obstacles. For example, designers created a gray overlay that could be placed over the teams’ colors to bring them all to a consistent tone. This overlay allowed the overlaid typography to always be the same color while also maintaining the necessary contrast. Through the use of modern design solutions, Grio was able to customize each college page without losing the distinctive Rivals branding.
Prototyping and User Testing
Once the brand identity was solidified, Grio designers created multiple prototypes of the Rivals homepage. Grio performed a/b testing, card sorting, and surveys in UX workshops on a testing pool of targeted users to steer our direction in a way that maximized the value add for our extended user base.
Utilizing Grio’s Design Expertise for Your Brand Refresh
Whether you’re looking to accomplish a company brand refresh or to design a new application, the expert designers at Grio are here for you. Schedule a free consultation today to see how we can utilize our design expertise to bring your vision to life.
