share website


Revamping share’s online presence and user experience with new CMS components
      




The team 

Three UX/UI desginers,  Two product manager, Two developers.

In this project I was the UX/UI designer alongside a share product manager. Together, we collaborated with a digital agency, involving a product manager, two UX/UI designers, and two web developers, forming an integrated team for the project.





Background

 share is a socially-conscious brand with a unique mission: for every purchase of beverages, food, hygiene, or stationery items, a similar item is donated to someone in need, allowing customers to make a meaningful impact with their everyday purchases while supporting various social projects.


Challenge

Moving towards complex digital content platform

share needed to revamp its outdated website, transforming it into a dynamic platform to engage users with varying interests, from social impact to environmental issues. 

A motivation to transform the nature of the website content to better reflect the brand’s vision and mission, created a gap between content quality and the status quo look and feel.

Furthermore, the current rigid technical setup did not facilitate the goal of being a social impact hub, as it was not content writer-friendly.




Current website design






Task

Redefining share's Digital Presence

01.

 Website revamp and Rebrand

We wanted to build a comprehensive new style guide that would better bridge the gap between the high quality content and the website’s UI, and that would commmunicate better the brand’s vision. 

02.

 Building a CMS framework

We also needed to create a scalable and consistent framework that would cut the middle men in content implementation into  the webiste, and offer modularity that still takes good hierarchy and harmony into consideration. 







Research phase
Hypothesis workshop

Our journey kicked off with an hypothesis workshop, aimed at uncovering what users expect from share to become their preferred source of social impact content. As a result, we formulated these key hypotheses:
  1. Share users prioritize transparency regarding share's activities and mission.

  2. Users demonstrate a desire and intent to educate themselves about social impact.

  3. Share customers exhibit a preference for engaging in reading and information consumption over direct purchasing.

  4. Customers seek to make a positive impact with minimal effort.




Competitor analysis
To gather insights and validate these hypotheses, we conducted comprehensive competitor analyses and explored key industry players. Our focus encompassed four key strength areas for share: retail, content, social impact and e-commerce (in the future).We emphasized the importance of leveraging compelling storytelling and seamless product integration to actualize share's vision as a prominent social impact hub.


Competitor anlaysis research process





Findings

Our guiding principals

01.
Scalability and ease

It was essential to facilitate content contribution by non-design team members while adhering to brand guidelines. 

02.
Transparency and playfulness

Providing a clear, upfront presentation of the brand's mission was essential to not only be reflected in content but also to resonate in the look and feel of the website.

03.
Educational yet digestible

Facilitating a deeper understanding of social impact issues in a simple and easy-to-read editorial format.





Design process

Building a modular design library for easy use for other departments

Our challenge was to create the entire website, which also needed to accommodate future features.

We conducted interviews with prospective departments that would utilize the website for building landing pages and magazine articles. From those we were able to gain insights into their specific use cases.

This allowed us to map the scope of the project and informed the design system solution, which included a set of 20 modular components.



Design library examples



Easy to use templates

Carefully, I crafted a comprehensive design library, establishing a modular design system. Each component allows for adjustments in specific elements such as colors, call-to-action (CTA), secondary headlines, and decorative elements as outlined in the style guide to maintain a consistent brand appearance.


The result

Here are some examples of articles and landing pages that are built by non-designers marketing teams








Conclusion
This project provided me with the chance to oversee two facets of the user experience. On one side, catering for the needs of content contributors, and on the other, meeting those for site visitors. Through this challenge I learned to make design tradeoffs for overall usability. This project also introduced a distinctive challenge of modularity, requiring consideration not only of a linear experience but also the evaluation of an almost infinite array of compositions and hierarchies.




share website
share mobile app
share e-commerce
More work