Avanade DOTCOM
Skills Used
UX Design
UI Design
Accessibility
Design System Management
Roles & Responsibilities
UX Designer
UI Support
UX Researcher
Deliverables
Personas
Low-fidelity wireframes
High Fidelity Prototypes
User testing prototypes
Project Facts
Duration: 6 months
Industry: Digital Consulting
Design System: MS Fluent, Segoe UI
Team: 5+ designers
Refreshing our digital brand to lead our clients by example
Avanade is an IT Consulting company that specializes in Microsoft solutions. Being a joint venture between Accenture and Microsoft, this global company employs about 20,000+ digital experts around 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:
Outcomes & Results
Launching a Minimal Viable Lovable Product
I was staffed to this project for the first 6 months. During that time we took a vague ambition and made it into tangible UX and UI designs. For the following several months, Developers in both onshore and offshore teams would spend their days making our vision a reality.
I helped deliver 30+ unique components, and partnered with Content Strategy teams to design the page layouts for our Home, L1, L2, and L3 pages. I also helped design our Contact Us Lead Gen page, and our Search experience (which had to be pared back until post-MVP. In all, my designs served as the roadmap for about 20+ page templates that would house content for the entire Avanade site.
The great design team at Avanade has spent the last several months refining the designs as needed to make it a great experience live on the web, but it is satisfying to see that alot of my design ideas have played such a huge influence to what they use today. To see Avanade’s own case study of their public-facing website, visit their newly re-designed website.
Yuri Tran (UX Lead)
"I am thrilled to take a moment to appreciate the outstanding work that Luis has provided us on the [Sitecore Web Redesign] project. His contributions to both phases of this project have been nothing short of marvelous... Luis' approach to problem solving was awe-inspiring to watch. He constantly applies creativity to how he approaches his research and deconstruction of the problem, always providing us with routes we hadn't considered. In addition, his ability to work seamlessly along our cross-functional teams has been invaluable.When we struggled with keeping the workstreams connected [across global timezones], he acted as our glue and never shied away from taking additional meetings, before and after his work hours, to ensure that the team remained in lockstep and aligned. Thank you for being nothing short of a UX rockstar!"