Creating a fresh, new web design for a powerful analytics tool to drive customer acquisition.
Client
Flurry Analytics
Team
Art Director (Me)
UX Designer (Aaron Usiskin)
Producer/PM (Maceo Marquez)
Timeline
3 weeks
Tools Used
Photoshop, Illustrator, Invision
The Challenge
Flurry Analytics is an analytics tool for businesses to track app performance and activities, and drive data-driven scalability. With only a logo and basic color palette, our client wanted to reskin their existing web site, with responsiveness in mind.
My Approach
I created a consistent visual design throughout the web site that can be carried across other non-digital collateral such as office wallpaper or physical branding materials. Working closely with a UX Designer, we reorganized the information architecture and visual hierarchy of the homepage and features page for easier scannability and clustering of related talking points.
01 Define
Quick Heuristic Evaluation
Taking a look at the existing web site design for Flurry, we did a quick heuristic evaluation to identify areas of improvement.
- Consistency and Standards
Iconography style varies from page to page. Font styles are inconsistent, as well as image treatment (some are cut off or placed into circles). - Confusion with Co-Branding
Yahoo's logo is placed above Flurry's in the sticky header, making it confusing which product is being marketed, especially for those unfamiliar with whether or not Yahoo owns Flurry. As a result, login details can be ambiguous, as it might be either a Flurry login or Yahoo login. - Tightening Up Typography
Long, description product feature copy is difficult to read when centered or extends across many columns. There is also too much leading and not enough font size distinction between headlines and body copy.
02 Ideate
Exploring Different Visual Directions
I created several design options before narrowing it down to two that will be presented to stakeholders and prototyped. Version 1, which was the chosen direction, uses low-poly shapes cut out as representations of the analytical charts and graphs within the app. Version 2 uses a mix of overlapping shapes and colors, but it was ultimately too playful for an enterprise tool.
03 Prototype
Designing for Conversion
Working closely with our UX Designer, I turned his wireframes into high fidelity prototypes. The main purpose of these pages is customer acquisition, so they need to tell a clear story of what Flurry does without the user having to review documentation right away.
At the very top we have a scrolling carousel to showcase Flurry at a high level and garner credibility through testimonials and usage stats. Low-poly shapes and concise headlines were added to separate each section on the page while highlighting a key product benefit. I used different screen sizes to show that the app looks great across devices.
Mobile-Friendly Design
While developing the desktop prototype, I kept mobile in mind and made sure all elements were stackable. As a result, we were able to maintain the visual integrity on a smaller screen.
Cleaning Up the Iconography
The existing web site had iconography that were sometimes within a solid circle, and sometimes with no border. They was also inconsistent usage of color, as the icons were either knocked out or purple. I redrew the icons so they look more like they belong to the same library, with the same stroke widths, color, and borders.
Learnings & Next Steps
We designed the new look and feel for Flurry based on business objectives, but I would be interested in testing actual users and learning which features were most important to them, or used the most frequently. We only had very brief testimonials to work with, but it would be interesting to include some detailed case studies on how Flurry was able to transform real businesses.
