Avanade DOTCOM
Project Facts
Duration: 6 months
Industry: Tech Consulting
Design System: MS Fluent, Segoe UI
Team: 5 designers
Deliverables
Personas
Low-fidelity wireframes
High Fidelity Prototypes
User testing prototypes
Skills Used
UX Design
UI Design
Accessibility
Design System Management
Roles & Responsibilities
UX Designer
UI Support
UX Researcher
Showcasing our digital competencies to lead our clients by example
Avanade is a joint venture between Accenture and Microsoft. This global company employs about 20,000+ digital experts across the globe, with presence across North America, Asia, and Europe. Avanade solves complex business problems for their clients everyday, but their own site had not been revamped since ~2013! How can a consulting company pose itself as an expert without having a modern web presence of their own?
This use case covers a 6-month effort to breathe fresh air into our public-facing site. During the project I was a UX Designer, tasked with drafting wireframes and high fidelity prototypes while supporting our UI Lead build out our home-brewed design system. The re-design was successfully launched before Avanade’s FY24 began. You can see the latest version of the website here.
User Research?
No time, fail fast!
Since this was an internal project, our main stakeholders were Avanade members of leadership. Because of that, the typical approach of researching before designs went out the window. This was a big challenge for me at first, since I usually pride myself in doing extensive empathy mapping and analysis before putting pen to paper.
Our first task to perform a competitive analysis of other Microsoft experts around the web, and come up with a compelling Home Hero design. These are some of the sites we looked at for inspiration:
Based on design patterns that we found across the internet, we came up with 3 distinct design directions shown in the wireframes below:
These ideas varied in levels of complexity, to push the envelope forward while maintaining a realistic sense of what could be accomplished. We called this the “Wise Child,” “Middle Child,” and “Wild Child”. After some feedback from business stakeholders, we were tasked with continuing to explore the three directions. I owned the first and second (Safe & Middle options), and a fellow UXer owned the third. Our UX Lead introduced an even “Wilder Child,” to nudge decision-makers towards a more modern (and therefore bolder/riskier) design language. Take a look at the early wireframe proposals here:
Design System & Grid
Elevating the brand
After a couple weeks of iteration, the team narrowed down our options to one Homepage Hero layout. We then passed it on to the UI Lead in our London Studio (Emma), who elevated the design by applying our brand colors and voice. Emma began exploring beautiful styles, and quickly started seeing repeating patterns. As she iterated, I helped her organize the small and medium components. These would be the start of our design system:
With the help of our Development leads, who would build the all components from scratch using Javascript React, we determined that our designs should follow an 8-point grid. This meant desktop screens would occupy 12 columns, 8 on tablet, and 6 on mobile.
Motion & Animation
Moments of Delight
During our Competitive Analysis, we saw that most of our competitors use some kind of animation or motion on their homepages to capture their audiences attention. We later learned that this also helped SEO metrics, since a user who’s engaged by video/animation tends to stay on a webpage alot longer.
The problem was that our developers didn’t know what we had in mind whenever we said “make the scrolling accordion dynamic.” So, I was tasked to put together simple animations in Figma to communicate the design team’s vision.
Accessibility Checks
Making a colorful brand colorblind-proof
After about 6 weeks, we had nailed down designs for the homepage. Our next big task was to start designing the content pages that are linked from Home (L1 & L2 Pages linked from the main nav).
However, I brought up the question: “Are we accounting for accessibility?” Turns out we weren’t, and our Avanade Orange color palette was very susceptible to unaccessible visuals. So at the same time as I helped design layouts for our L1 Pages (Solutions & Industries) , I used a Figma Plugins to run our designs through an accessibility check.
The color blindness tests revealed to us that as beautiful as our Avanade brand might be, it is not visible as expected to about 8.5% of the population. Further checks revealed that most of our designs were WCAG Level AA compliant, we were working with some components that were at risk for being unaccessible, depending on the size and color gradients that we used: