A user experience for environmentally-conscious consumers to shop and go #PlasticNeutral at the same time.
rePurpose Rewards is a Chrome Extension created by rePurpose Global that allows users to earn plastic offsets while they shop at any of their 25,000+ participating stores. For every dollar that users spend while using the app, rePurpose works with plastic collection and recycling organizations to remove 2 kgs of ocean-bound plastic. However, without a supporting account creation process, dashboard, and uninstallation screens that were native, users are at a loss. rePurpose Global needed a more customized user experience that would provide an intuitive, smooth, and informative way for users to create accounts, track and grow their impact, and share feedback upon uninstalling the extension.
The solution was to understand, ideate, and prototype a user experience that addresses their users’ needs, reflects the unique product offering, and is cohesive with their branding. As the UX/UI Designer, using business parameters and a user persona provided by the Co-founder/Chief Impact Officer and Product Manager, I created User Stories, User Flows, conducted Competitive Research, sketched possible solutions, created interactive prototypes of the post-installation flow, post-uninstallation flow, and dashboard, and provided recommendations for next steps, including usability testing.
Role: UX Designer, UI Designer
Teammates: Aditya Siroya (Co-founder and Chief Impact Officer), Shivansh Inamdar (Product Manager and Developer)
Date: August - October 2020
Tools: Figma, Milanote, Miro, Google Sheets
Key Skills: User Stories, User Flows, Competitive Research, UI Design, Sketching, Interactive Prototyping
Understand → Ideate → Prototype → Test
Working within a strict time constraint, I created a scope of work and design process to balance rePurpose Global's business needs, user needs, and best practices for user-centered design.
As the advocate for users on the team, my original plan was to start by speaking with users through 1-on-1 interviews. However, since we were pressed for time, ultimately prioritized a scope of work that would result in a testable prototype, which left no room for fresh primary research. Instead of beginning with user interviews, we agreed to use the company's existing knowledge of their users to inform the designs. For a startup like rePurpose Global, adaptability within the user-centered design process is crucial.
Understanding the Problem
Diving into a work in progress
Joining this project as the sole UX/UI designer, I learned that rePurpose Rewards is a live, but not yet launched, Chrome Extension. Its goal is to provide a simple, engaging new way for users to go #PlasticNeutral while they shop online. With this browser extension, users have an opportunity to offset their plastic footprint while they shop.
However, the extension and its user experience are currently provided by a different company, UCapture, which focuses on carbon offsets. As a result of rePurpose Global’s partnership with UCapture, rePurpose Rewards users currently create accounts, login/logout, share feedback, and view their account dashboard through UCapture’s website. This means that none of the screens have been designed to communicate the extension's true functions, follow the company's branding, or address users' needs. For anyone using the rePurpose Rewards extension, without a native experience, this is very confusing. I created an account to see this for myself.
For example, to the right is a screenshot of the rePurpose Rewards extension with a call-to-action for users to "activate" their plastic offsets whenever they visit an online retailer. Above is a screenshot of the existing dashboard provided for the extension by UCapture. Immediately it is obvious that the user experience is disjointed in terms of form and function.
Before the official launch of the extension, the user experience needs to be designed specifically for rePurpose Rewards users. How might we create a user experience that is native to rePurpose Global? How might we create a user experience that addresses users’ needs and is reflective of the rePurpose Global brand and the unique product offering as well?
Who are the users?
Without enough time to conduct primary research specifically for this project, the team and I decided to start with a User Persona to consolidate the company's existing knowledge of their users. Since the company did not already have one created, I led the team in using a simple template to communicate findings about their users that they have gathered as a business. This way, I was able to include both the Chief Impact Officer and the Product Manager in the UX design process. The resulting User Persona was created using customer data gathered from the plastic footprint calculator on their website and user insights provided by their partner brands.
User Persona created via Milanote
This collaborative effort in defining the User Persona allowed us to establish a shared, empathic understanding of rePurpose Global's main users, their goals/needs, pain points, and preferences.
To summarize, these are the key takeaways for this User Persona, Marina:
A conscious consumer, they value convenience and making a positive impact
They dislike complexity and lack of transparency
They like to stay informed and want to see that they are making a difference
Translating needs and wants
How might we translate the user needs and wants into features? Using the User Persona of Marina as a guide to inform my process, I made assumptions detailing what the user would want to accomplish and why, in regards to using the rePurpose Rewards Chrome extension.
Although it's not ideal to make assumptions this way without being able to correlate explicit needs and wants with data from user interviews, considering our time and research constraints, this method was the next best option. With hypotheses based on the User Persona, however, there is still the opportunity to test these assumptions through user testing with the prototype. Through the creation of these User Stories, I was able to clarify to the team what features might look like in an MVP, additional features that might work well in future iterations, and what the benefit of each feature would be for the user.
User Stories created via Google Sheets
Mapping the end-to-end experiences
Driven by the User Stories, I created User Flows to diagram the most critical user goals. With this tool, I was able to better visualize users' red routes, which also aided in my understanding of the information architecture of the user experience.
User Flow created via Miro
Competitive Research and Analysis
To better understand the market and learn from competitors, I conducted Competitive Research and Analysis on similar products that are currently available. Since our User Persona is a tech-savvy conscious consumer, looking at products they may already be familiar with is a helpful way to learn about how other companies have approached their user experience design.
I downloaded and interacted with 3 direct competitors that focus specifically on environmental sustainability, as well as 3 indirect competitors that offer popular browser extensions for general shoppers. I evaluated each competitor's user experience according to Jakob Nielsen's 10 Usability Heuristics for User Interaction Design, paying close attention to their post-installation flow, dashboard features, and post-uninstallation flow. To share my learnings with the team, I summarized my findings below to present each competitor's main features, strengths, weaknesses, and what we can learn from their design patterns and UX.
Competitive Analysis created via Milanote
Informed by my Competitive Analysis, User Stories, and User Flows, I sketched out potential wireframes for the post-installation flow (user registration and onboarding), the dashboard, and the post-uninstallation flow. Keeping Usability Heuristics in mind, I focused especially on recognition over recall, user control and freedom, error prevention, and flexibility and efficiency of use. I was careful to make features as clear as possible, to provide users with options to proceed or exit if they wish, to easily back-track if they need to, and to provide an intuitive and consistent user experience that does not overload the user. Considering the team's time constraint for the project, creating sketches over digital wireframes allowed for fast explorations of these different ideas that could be used to help users in their red routes.
Creating interactive hi-fidelity screens
Using Figma, and following rePurpose Global's existing style guide, I created prototypes of the post-installation flow, post-uninstallation flow, and dashboard that users would be able to interact with. I was able to demonstrate to the Chief Impact Officer and Product Manager / Developer the features described in the user stories and user flows for the project, and address their user needs for convenience, simplicity, transparency, and an informative yet engaging shopping experience that also makes a positive social impact for the environment.
By creating this user experience for rePurpose Rewards that is native to the company's product, users get a customized experience that is cohesive with the brand and product offering, minimizing friction and elevating the overall experience.
Interactive Prototype Demo
Recommended next steps for the project
Due to time constraints, soon after presenting the interactive prototype to the team, I reached the end of my role in this stage of the project. However, the rePurpose Rewards Chrome Extension will ideally be a work in progress that continues to improve. Using a human-centered design process to create better user experiences with each new iteration will foster better user acquisition, user retention, user satisfaction, and ultimately, more people united to go #PlasticNeutral and remove ocean-bound plastic waste.
To ensure that the team would be equipped to take the next steps in testing our hypotheses about their users' needs, I provided the team with an outline of a plan for usability testing, analyzing feedback, and implementing their findings, before moving forward with the development process. By centering users’ needs and concerns early on, we can ensure a more successful product and better experience for them. Implementing user insights at this point of the project will also allow any issues or concerns to be solved without wasting valuable time and resources needed for the development process. As more users join rePurpose Rewards and more user feedback is collected, following a similar data-driven, human-centered design process will be important to further improve the Chrome extension: understand the problem and user, ideate, prototype, test, implement, and repeat.
This was such a fun, meaningful, and rewarding project to work on and I am so glad that I could contribute to what rePurpose is building. Working as the sole UX/UI designer on their team was an incredible experience to learn about their work in environmental sustainability and social impact, as well as the creative ways in which they are able to monetize their business as a social enterprise. Being able to work closely with the Co-founder and Chief Impact Officer, I had the opportunity to include him as a stakeholder as well as a collaborator in the UX design process, integrating his feedback relating to business needs. I also had the opportunity to consider technical constraints as well, as the Product Manager also provided support as a developer. As the project progresses towards usability testing and ultimately the development process, rePurpose Global has kindly asked for my assistance for future UX problem-solving, and I am so excited to offer my continued support and advocacy for users.