I was the UX lead of Collaboration Services with Unilever. As part of my role, I created a full set of reusable components to be used across Unilever SharePoint experiences. I also created components that required additional visual options in order to accomodate a number of styles and variety for users.
Design Objective
In order to allow users to swiftly and easily create websites (using SharePoint's internal site builder), Unilever Collaboration services were tasked with creating custom reusable components for Unilever SharePoint experiences.
Product owners often need to create internal SharePoint experiences for their products or divisions rapidly and the components needed to be consistent with Unilever's corporate and design guidelines.
USER RESEARCH & INSIGHTS
In order to understand the product owner's requirements, I had the opportunity to speak to five key users. These users spanned across geographies and products, in order to give us the widest user perspective available.
I sat down with these users for in-depth user interviews and these were my main insights;
All five key users agreed that they preferred most components to prioritise imagery over wordy descriptors.
Most product owners were fairly proficient in using the SharePoint site builder, barring a few complicated actions.
These experiences would not have have any complex interactions since it had to cater to any potential visitors/new users.
UNILEVER DESIGN GUIDELINES
Unilever have an exhaustive set of brand guidelines that are followed across the organisation. These guidelines are employed strictly to create consistency among the diverse set of products and services that Unilever encompasses.
These guidelines also had to work seamlessly within the SharePoint experience, and accommodate any technical hurdles this platform could present to implementation.
LAYOUT WIREFRAMES
There were close to fifteen different components planned, and I created wireframes to help users and the development team visualise what they could expect.
The seven components (and respective variations) represented below are a selection of the most frequently used by the primary users.
Hero Links - A large component to showcase featured links, information or a call to action pertinent to the product page.
I Need To - An quick links/ menu format for the user to have easy access to important or frequently accessed locations.
Spotlight - This was intended to allow users to include testimonials, quotes or highlighted information.
Information Board - A concise format to present heavy, but thematically similar information, accentuated with appropriate brand imagery.
Image Carousel - A basic image carousel (one with a text label, one without)
Banner with Call to Action - This was created to focus attention to a key call to action or task to be performed on the page.
Announcements - These would allow the user to add pertinent or important updates.
FINAL COMPONENTS
After several rounds of iterations based on reviews with users, stakeholders and development teams, I produced the cohesive and customisable elements that would be available to access on the internal sitebuilder that these reusable components would be housed in.
The final components below correspond to the wireframes displayed prior.
Hero Links- FINAL
I Need To - FINAL
Spotlight - FINAL
Information Board - FINAL
Image Carousel - FINAL
Announcements - FINAL
USER ENGAGEMENT & TESTING
We scouted ten more product owners, in addition to the key five we had initially interviewed. This was to verify how seamlessly the reusable components worked for a selection of product owners across Unilever.
Approximately, 80% of users were in consensus about the components being visually strong enough to meet their expectations and intended message. The feedback reflected that users were pleased with the variety and returned an average ranking of 8.9/10.
In order to study this, I started with five second tests. The five second tests were used to gauge visual appeal and accuracy. The ranking tests indicated how close each reusable component was to their requirements and ease of use. Users were asked to rank each component and its corresponding variations on a scale of 1-10.
