Monolite: An Interactive exhibit for public engagement
Posters & Invites
Apparel Campaign
Apparel Campaign
Apparel Campaign
Monolite: An Interactive exhibit for public engagement
Website Redesign
UI Design | Website Redesign | Design system | Brand guidelines
Green Story's platform helps brands unlock the potential of their sustainability data and achieve a better way of doing business. It had gone from a single-product offering to a multi-product offering, so new products and departments needed to be represented. Conversion and usability opportunities needed to be acted upon. The design aesthetic needed to be unified across all product offering.
​​This project was a joint effort with the marketing team of 2, where I was the sole individual responsible for User Experience and I saw the project through from the kickoff meeting, to the launch, and through multiple rounds of iteration afterward.
Overview
Green Story's vision is to empower 1 billion consumers to know their impact and make choices that are better for the planet and the generations to come. They do that by partnering with leading fashion brands to help them understand their supply chain data and calculate their product footprint.
Green Story's range of solution aims to meet the needs of clients at all stages of their sustainability journey. One of the defining factor for the website's content and structure was to ensure this message was clearly highlighted.
​
To achieve this, we analyzed the users' journey and identified how Green Story's solutions address the gaps along the way. We focused on clarity, relevance and structure to help users not only identify the solution that works best for them but also possibility of utilizing more than one.
Challenge
Lack of clear narrative
A disconnected external narrative and journey for existing and prospected customers: Brand identity is different on the emails customers receive. Multiple solutions took users to different sites with different visual language. Users are confused what "exactly" Green Story offers.
​
Research & Analysis
Initial Analytical review
I began by digging into our historical data, surfacing user pain points and barriers to conversion. Users commonly went from the home page directly to the pricing page (pre-disqualifying themselves from the product), the FAQ, or a search. Despite being in-depth, the home page lacked critical information.
Gathering insights from users
To gather more qualitative data about our user's motivations, pain points, and needs, I conducted interviews with internal and external stakeholders.
External
​"Green Story is the authority in the LCA space, that’s why we want to work with you. We didn’t know you had a carbon offsets platform!"
- Client
Five existing clients who had experience using the website. ​
Internal
Representatives from Product, Marketing and Sales to understand each part of the company’s unique requirements and concerns for the design.
"​It’s very confusing to see two websites. 2 brand identities, 2 narratives… Are you planning to incorporate them all into one unique narrative?"
- Marketing
Alignment with the vision and clarity of content
In collaboration with the marketing team, we revisited the vision to ensure the diverse solutions were unified under a single, cohesive umbrella. Once the vision was in place, the site's content was updated. 70% of this part was done by the marketing experts, my role was to provide insights and direction to the flow.
Updating the theme of the site
Given this was a second iteration to the website, it required a complete makeover to look clean, fresh and welcoming. I did a competitive research on the trends and design style, followed by an analysis on how can we stand out.
Understanding stages of sustainability
New to the space
Just started out with a goal to create sustainable clothing.
Everything in place
Complex yet organized supply chain data.
Unorganized data
Been in the space for a few years, but supply chain data is scattered and unorganized.
Missing information
There is some available data, but there are gaps and missing information
This lead to one simple yet complex (behind the scene) solution:
To create one cohesive and unique destination for the users
Information architecture
We decided to first create the content and structure of the site followed by the style guide. The main part of the site architecture was the home and product page. Home page was the hook which touched upon what the company does and conveyed its vision. Product page focused on the features that their B2B platform offered. These features were designed to cater to the needs of their brands at different stages of the sustainability journey. I decided that each feature required a page to explain the benefits and how it works.
User flow
Following the site's architecture, I laid out the journey of the user visiting the site. The primary goal of the site was to help users understand the solutions offered, ultimately encouraging them to sign up for the platform to conduct a lifecycle analysis of their products. This user flow only covers the journey leading up to the sign up.
One of the challenges was to guide users to explore all the product feature pages and encourage them to book a session with the customer team.
I tried to solve this by adding an "Explore the next module" section on each page to allow users to easily navigate through the features without needing to return to the menu each time. It also contained a clear CTA of "Book a demo" at the end of each page.
Brand Guideline
To give the site a fresh and clean look, I created a new guide on colours, typeface and UI elements. This was inspired from the cause, target audience and the impression we aim to create in the minds of the consumers.
Wireframes
Home
Product feature page
Plan & features
Book a demo
About us
Once we had a solid direction for the design, I began to produce multiple different variations of wireframes. I then put the designs in front of users and internal stakeholders for testing and feedback. This helped me to narrow the design down to three major variations, which I used to establish a single design framework, and thus move into visual design.
High Fidelity Mockups
Old design
.png)
New design
In the past, designs were very static and felt as if they went straight from the PSD to code. So in this iteration, I used interactions to bring the page to life, draw users into the content, and help confirm user actions.
Usability Testing
Once the site was live, I came up with list the of interaction we wanted to test and monitor. Using Google analytics, I paid close attention to Conversion Rate, Submission Rate, Drop-Off Rate, Event Triggers that we built into the design, Goal Completion, Navigation Summary (Origin page and Destination page), and even specific Search Queries.​
​​
Through multiple rounds of heat maps with 100 users each, I was able to observe how they were engaging with the design, where engagement had increased, and where it had dropped off. We saw major engagement increases in critical CTA’s, navigation elements, and supporting links.
Learnings
Adapting to changing requirements
Content drives design, if the content and structure are in place it is easier to visualise the design
Getting all stakeholders to agree on a single goal, despite their different focuses, often requires thorough research and evidence to back your results