My role: visual design, user interface, information architecture
Some main visual considerations included:
Lightening up, simplifying, and clarifying the interface to prioritize the content and interactions the user is having with their work colleagues, and provide a friendly, welcoming appearance.
Reduce the bubbly quality of the overall interface.
Modernizing the look and feel to incorporate current visual design trends like flat design and color gradients to provide an up-to-date and crisp look and feel. Enterprise users today all have smartphones and see the latest apps and design concepts within them on a regular basis. Long gone are the days of "good enough for business."
Look like Fuze. A previous iteration of the visual design left the app looking confusingly similar to one of our major competitors and used a color palette that was somewhat divergent from our corporate branding.
In addition to updating our visual presentation, I wanted to use the opportunity to improve a few functional “rough edges” that were in the areas of the screen engineers would already be updating.
One of the biggest conceptual visual challenges we had was color. Specifically trying to make purple "work" in an enterprise business application. Purple is Fuze’s core brand color with all of the other colors in the Fuze logo as secondary, but purple isn’t generally thought of as a business color, and unlike many other colors, doesn’t really have any established meaning. The previous visual design seemed to have tried to solve this by making the main header bar the darkest purple you could still (sort of) tell was purple, presumably in an attempt to hide that it was purple at all. On many screens and for many users however, this ended up looking almost black, and made the appearance very dark and unwelcoming. Additionally, it was fairly similar to a very well known chat focused competitor. Purple had also been used heavily for headings, actions, labels, and titles. Even gray highlights had a purple cast to them making the appearance very monotone.
Working with our Worldwide Director of Product Marketing, we were able to come up with a range of purples that complimented the brand color but were lighter. We used this to apply a new subtle gradient to the app header bar and applied sparingly throughout the app as a highlight and in special cases where it was used for some common actions.
We also established a range of new grays that were less purple tinted, while still somewhat cool to compliment the purple, which we used for backgrounds, dividers, and headings and titles. For primary actions we moved from both purple and our existing teal color to a slightly more blue teal which is distinct from the rest of the ui and also aligns with user expectations of "blue" meaning "link."
I switched our previously all dark purple sign in and loading screens to white and added a large watermark of part of the Fuze logo to the bottom right corner to impart the brand and introduce our friendly color palette.
To add some engagement and highlight special areas or items that need user attention, we created a series of color gradients using our brand colors and applied them strategically.
For the remaining screens it was largely a matter of organization, clarifying navigation vs content areas, and standardizing navigation elements.