Project:
New relic
New Relic came to AKQA looking to rebrand their brand voice and site. New Relic is a software analytics company that uses insights to slice performance data in by a wide range of attributes.
The objective of this redesign is to elevate New Relic’s brand and give it a distinct brand characteristic. How do we balance satisfying the internal vision vs. the need to appeal to engineers? We lead the redesign with the concept of “Making software runs smoother”.
Studio:
Client:
AKQA
New Relic
Creative Director:
Design Director:
Designer:
Michelle Lassman
Kenji Tomita
Carissa The
Nikki Lee
Problem
New Relic’s website does not have a clear stance on its branding, no brand ownability and lacks consistency in its elements— creating a sloppy first impression for potential users. This issue extends to other collaterals of the brand as well.
There has been an attempt of redesign done on the New Relic site prior that had been left mid-way through. This caused a lack of consistency throughout the site, as several pages would be designed differently, with differing brand elements and colors.
Time constraint is also a major influence in the redesign. We had to work with an already defined bootstrap grid and functionality that was used in the previous redesign. How do we create a design that will solidify New Relics’s brand characteristics and speak to its core engineer audience, while facillitating functionality constraints?
Concept
The phrase of “Making software runs smoother” is the idea of fluidity and malleability of great software coming to life; visually brought to life with free-flowing lines and abstract patterns.
Graphic elements — Free-flowing line patterns can be used on dark or light mode and on any New relic collaterals.
Visual extensions — The visual elements can be extended to other mediums such as a digital ad, tshirts and trade booths.
Research
A study on New Relic’s direct competitors showed that as a brand, New Relic is lagging behind in its brand ownability and consistency. As a result I found that:
2. No clear brand definition in look and feel.
3. No clear communication hierarchy.
4. Stacked modules are very “boxy”.
5. Needs a consistent POV on lifestyle photography.
Direct competitors — New Relic’s direct competitors for reference.
Opportunity — Our audit included sites in and out of category. By contrasting differing approaches to site design best-in-class experience practices emerged. Based on our analysis we have identified six main design principles that will deliver our vision.
1. Ensure everything has a purpose. Keep content clean.
2. Show don’t tell. Highlight the product as hero.
3. Present a clear communication hierarchy.
4. Make it effortlessly scannable.
5. Make it unique and relevant. Create a memorable experience.
6. Infuse experiential moments of delight.
Additional websites — Differing approaches to site design for inspiration.
Explorations and Iterations
Initially, a few ideas was explored to solve the problem that probed this project. How do we convey the concept visually? How many creative liberties can be done while working inside the constraints of the bootstrap functionality? As a part of the process, a detailed comparison is shown below as the pros and cons are weighed.
Early sketches — In the early stages, the focus is on content organization and hierarchy. We worked together with the internal design team in New Relic to identify the needs.
High-fidelity wireframes — After throwing ideas onto paper and several iterations of low-fidelity wireframes, I began designing in sketch to create several high-fidelity wireframes to show the team and get feedback. There were several iterations where nuances on the visual elements shifted, swapping modules around to another iteration, and flushing out content as I went.
Homepage CTA — A last minute addition before delivery was to rethink the CTA module on the homepage, recognizing the need to draw attention to the CTA at first glance while still keeping things minimal, we tried several layout variations.
The strongest win — After testing it to a group of developers, Option C was the most successful. In summary, developers preferred when the CTA feels like an extension of the first paragraph module.
Design System
To accomodate the newly established visual elements and redesign, a core design system is necessary to maintain consistency in UI and brand elements.
Grid System — The grid system is made in accomodation of different breakpoints for desktop 992px, tablet 768px and mobile 320px.
Updated Colors — Focusing on striking contrast and having a core color base. Complimentary neutrals are added on as secondary colors.
Typography — Only one typeface is used throughout the site, differing in size depending on the format and breakpoints.
Spacing — Spacing is measured on multiples of 4, and is to be implemented with restraint.
Buttons and Links — Different hover states for buttons and links according to breakpoints.
Iconography — The icon style is designed to flex to the various needs of the brand. Each icon expresses only essential characteristics and maintains a minimal form to represent the idea.
Reflections
This was a really fun project for me to work on as it was an ambitious undertaking, had a great focus on interface design and gave me an opportunity to do creative exploration. However, change of scope and constantly changing requirements did make me and the team go on a race to deliver as scheduled for the launch. Still, I learned a lot from this project about product delivery, and also gained insight on business processes.
How to be flexible and adapt quickly — During the course of this project, things are always shifting and changing. From new timeline, prioritization, and additional informations to be considered. This resulted in myself and the team to have to adapt quickly and follow along the new scope appropriately.
Understanding the scope — I learned how to spot what the best functional and feasible solution was for the project; in comparison to the solutions that was great, but is not within the scope due to either budget, resources or timeline.
Choosing what to do — There were many instances where we could use motion to create a memorable experience and elevate the site. However, this was an unrealistic solution as it would be too costly and take too much time to properly execute. In turn, we had to find realistic solutions that gives real value to both the product and the business as a whole.
Project:
New relic
New Relic came to AKQA looking to rebrand their brand voice and site. New Relic is a software analytics company that uses insights to slice performance data in by a wide range of attributes.
The objective of this redesign is to elevate New Relic’s brand and give it a distinct brand characteristic. How do we balance satisfying the internal vision vs. the need to appeal to engineers? We lead the redesign with the concept of “Making software runs smoother”.
Studio:
Client:
AKQA
New Relic
Creative Director:
Design Director:
Designer:
Michelle Lassman
Kenji Tomita
Carissa The
Nikki Lee
Problem
New Relic’s website does not have a clear stance on its branding, no brand ownability and lacks consistency in its elements— creating a sloppy first impression for potential users. This issue extends to other collaterals of the brand as well.
There has been an attempt of redesign done on the New Relic site prior that had been left mid-way through. This caused a lack of consistency throughout the site, as several pages would be designed differently, with differing brand elements and colors.
Time constraint is also a major influence in the redesign. We had to work with an already defined bootstrap grid and functionality that was used in the previous redesign. How do we create a design that will solidify New Relics’s brand characteristics and speak to its core engineer audience, while facillitating functionality constraints?
Concept
The phrase of “Making software runs smoother” is the idea of fluidity and malleability of great software coming to life; visually brought to life with free-flowing lines and abstract patterns.
Graphic elements — Free-flowing line patterns can be used on dark or light mode and on any New relic collaterals.
Visual extensions — The visual elements can be extended to other mediums such as a digital ad, tshirts and trade booths.
Research
A study on New Relic’s direct competitors showed that as a brand, New Relic is lagging behind in its brand ownability and consistency. As a result I found that:
2. No clear brand definition in look and feel.
3. No clear communication hierarchy.
4. Stacked modules are very “boxy”.
5. Needs a consistent POV on lifestyle photography.
Direct competitors — New Relic’s direct competitors for reference.
Opportunity — Our audit included sites in and out of category. By contrasting differing approaches to site design best-in-class experience practices emerged. Based on our analysis we have identified six main design principles that will deliver our vision.
1. Ensure everything has a purpose. Keep content clean.
2. Show don’t tell. Highlight the product as hero.
3. Present a clear communication hierarchy.
4. Make it effortlessly scannable.
5. Make it unique and relevant. Create a memorable experience.
6. Infuse experiential moments of delight.
Additional websites — Differing approaches to site design for inspiration.
Explorations and Iterations
Initially, a few ideas was explored to solve the problem that probed this project. How do we convey the concept visually? How many creative liberties can be done while working inside the constraints of the bootstrap functionality? As a part of the process, a detailed comparison is shown below as the pros and cons are weighed.
Early sketches — In the early stages, the focus is on content organization and hierarchy. We worked together with the internal design team in New Relic to identify the needs.
High-fidelity wireframes — After throwing ideas onto paper and several iterations of low-fidelity wireframes, I began designing in sketch to create several high-fidelity wireframes to show the team and get feedback. There were several iterations where nuances on the visual elements shifted, swapping modules around to another iteration, and flushing out content as I went.
Homepage CTA — A last minute addition before delivery was to rethink the CTA module on the homepage, recognizing the need to draw attention to the CTA at first glance while still keeping things minimal, we tried several layout variations.
The strongest win — After testing it to a group of developers, Option C was the most successful. In summary, developers preferred when the CTA feels like an extension of the first paragraph module.
Design System
To accomodate the newly established visual elements and redesign, a core design system is necessary to maintain consistency in UI and brand elements.
Grid System — The grid system is made in accomodation of different breakpoints for desktop 992px, tablet 768px and mobile 320px.
Updated Colors — Focusing on striking contrast and having a core color base. Complimentary neutrals are added on as secondary colors.
Typography — Only one typeface is used throughout the site, differing in size depending on the format and breakpoints.
Spacing — Spacing is measured on multiples of 4, and is to be implemented with restraint.
Buttons and Links — Different hover states for buttons and links according to breakpoints.
Iconography — The icon style is designed to flex to the various needs of the brand. Each icon expresses only essential characteristics and maintains a minimal form to represent the idea.
Reflections
This was a really fun project for me to work on as it was an ambitious undertaking, had a great focus on interface design and gave me an opportunity to do creative exploration. However, change of scope and constantly changing requirements did make me and the team go on a race to deliver as scheduled for the launch. Still, I learned a lot from this project about product delivery, and also gained insight on business processes.
How to be flexible and adapt quickly — During the course of this project, things are always shifting and changing. From new timeline, prioritization, and additional informations to be considered. This resulted in myself and the team to have to adapt quickly and follow along the new scope appropriately.
Understanding the scope — I learned how to spot what the best functional and feasible solution was for the project; in comparison to the solutions that was great, but is not within the scope due to either budget, resources or timeline.
Choosing what to do — There were many instances where we could use motion to create a memorable experience and elevate the site. However, this was an unrealistic solution as it would be too costly and take too much time to properly execute. In turn, we had to find realistic solutions that gives real value to both the product and the business as a whole.