Type
UX/UI - Team Project
My Role
Timeline
03/2023 - 06/2023
Skills
Refugee Artisan Initiative's Website Redesign
Enhancing Refugee Artisan Initiative's UX for better storytelling & engagement.
My Detailed Role
Team
Linh Duong, Thit Thit T. Win, Wendy Yang
(under the supervision of Professor Stuart Gordon at the University of Washington)
Tools Used
Figma, Adobe Illustrator
Project Overview
Overview
In an era where every little bit of efficiency and sustainability counts, managing pantry inventory stands out as a common yet significant challenge. Many households deal with the inconvenience and wastefulness of mismanaged pantries, which not only costs money but also contributes to global food waste. This project aims to create a solution that transforms this everyday hassle into a streamlined, efficient process through a user-friendly, technologically advanced system.
The Problem
In a recent client audit, a substantial drop-off was identified after users visited the homepage. Users were confused where to go next due to navigational issues.
The awareness of the shop feature's existence on the RAI website is quite low.
Also, the donation rate through the website was relatively low.
Target User
Main: Female donors aged 40 and above.
Secondary: Corporate entities and volunteers.
The Goals
Make the website more engaging and story-driven
Place greater emphasis on artisans and their craftsmanship
Drive users towards partnership & donation after story-telling
Improve the shop page to become more user-friendly
Achieve a cleaner and more polished look & feel
After an initial discussion with the RAI team to gain an understanding of their expectations, and considering the constrained timeline of 10 weeks, we agreed to prioritize the redesign of the following components:
Restructure the sitemap for better navigation
Enhance the homepage to engage users on their first visit
Improve the user experience of donation
Improve the user experience of shop
Research
Interview
With a focus on enhancing the user contribution experience on the website, we conducted interviews with two users: female donors aged 40 and above (our core target audience). The aim was to gain deeper insights from their viewpoints, allowing us to better understand their behaviors and preferences towards making contribution to a non-profit organization via website and refine our approach accordingly. We also sought their opinions on the current RAI website for initial feedback.
These are the questions we asked them:
Key Findings:
A compelling story and well-organized information are crucial to making a good first impression of non-profit organizations. Incorporating personal stories and powerful anecdotes may also significantly enhance the organization's image and connections with the users.
Transparency, credibility, and emotional connection are crucial factors that determine whether users will contribute to an organization.
Complicated steps and confusing navigation are factors that hinder users from contributing.
The current website fails to fully present the artisans, who are the primary beneficiaries. This lack of storytelling makes it difficult to convince users to contribute to the cause.
Heuristic evaluation
Competitive analysis
We created a persona using the information gathered from our research. This represented a typical user archetype, ensuring that the redesign solutions would be customized to meet the needs and preferences of RAI's frequent users.
After crafting a persona, we moved on to creating a user journey that maps out all the steps a user takes when they make a contribution through donation or purchase items. This holistic approach helps us gain insights into the user's complete experience and enables us to identify any pain points they might face along the journey. By recognizing these pain points, we can uncover opportunities to provide effective solutions, ultimately improving their experience. Our goal is to make the journey smoother and more user-centric, aligning with their preferences and ensuring that they can achieve their goals in the end.
The issue with the current sitemap is that it contains too many categories, which can overwhelm users with excessive information. Additionally, some labels are challenging for users to understand, leading to confusion regarding their content.
To address this, we simplified the sitemap's structure, re-categorized some groups of contents and rephrased complex labels that could significantly improve user navigation. This approach allows users to find what they need more easily and comprehend the content effortlessly. By creating a more user-friendly sitemap, we aimed to enhance the user experience, making their journey on the website smoother and more intuitive.
The old sitemap
Our redesigned sitemap
We streamlined all categories into four primary groups: "About Us," "Our Artisans," "Get Involved," and "Shop." This approach simplifies the categorization for better user understanding.
In the "About Us" category, users can get all information about RAI. This is where users can uncover insights about RAI story, mission, staff and jobs. Notably, in the "Our Work" subsection, the organization can publish annual reports to showcase the transparency of fund usage from donations and purchases.
In the "Our Artisans" category, users can get comprehensive details about the artisans and their works. Additionally, aspiring artisans can apply to join the community through this category.
In the "Get Involved" category, we split it into two sub-categories: one for individuals and the other for corporates. For individuals, options include making donations, volunteering, and contributing materials. In the corporate category, companies can engage by hiring artisans, participating in wholesale or small batch manufacturing, and sponsoring events.
The final category is "Shop," where users can purchase products made by the artisans.
The Solution
Homepage
Problems
Absence of logo branding, despite RAI having an official logo.
The navigation bar is complex and excessively long, causing it to split into two lines.
The "Donate" button lacks visibility, making it difficult for users to recognize its presence.
The large main banner size results in a sense of overwhelming content for users.
Solutions
Added logo for branding visibility
Simplified the navigation bar based on the new sitemap
Enhanced the visibility of the "Donate" button by:
Putting a "Donate" button in the header to make it dominent, ensuring easy access for users.
The color of the "Donate" button was changed to red, creating a stronger contrast with the background and drawing attention.
For the main banner:
Reduced the size of the main banner. The resized banner allows users to quickly grasp the information of RAI without the need to scroll down.
Added an engaging video to make the banner more captivating.
Problems
Generic introduction about RAI, making it hard for users to grasp its core identity. Moreover, the lack of detailed information about 4 sections makes it difficult for users to grasp the specifics of what RAI is all about and might hinder users from understand RAI's mission and impacts.
Lack of details about artisans in the homepage while artisans are central to the organization's mission.
Solutions
Showcased RAI's impact using an infographic on the homepage in addition to brief introduction about RAI, giving users a snapshot of what RAI's societal contributions and accomplishments.
Created an interactive map to provide brief insights into all artisans. This map visually represents where the immigrants were from. This interactive feature could increase user engagement to create a more dynamic experience.
Problems
The absence of an artisan's product feature might lead to overlooking the products available for sale on the page. In the audit report, clients highlighted that users often overlook the shop feature on the website.
Solutions
We replaced the "News" section with "Products by Artisans", given the limited frequency of updated articles or news about RAI. Users can now access news through the "About Us" category.
Donation
Problems
RAI offers three distinct types of donations: "Give Big 2023," "Support Refugee & Immigrant Women," and "RAI's Capital Campaign." However, these options lack detailed information, making it challenging to persuade users to contribute.
The layout of each donation type page is not consistent, which could potentially confuse users.
The donation form is quite lengthy and demands significant effort to complete, potentially discouraging users from making contributions.
Solutions
Each donation type will now include a detailed description, providing users with a clear understanding of its purpose. Additionally, we also incorporated a fund impact section, allowing users to see how their contributions have or will contribute to society. These enhancements aim to provide transparency and motivate users to participate in making a positive impact.
I simplified the donation form, breaking it down into three stages to create a smoother user experience. Notably, users can now save their information for their profile, eliminating the need to repeatedly fill in personal details during subsequent visits. This feature not only saves time but also streamlines the entire donation process, making it more user-friendly and efficient.
Shop
Problems
The product overview page lacks information about the different product categories.
Solutions
We divided the overall shop into two distinct sections for the different product categories. Also, we added a section highlighting popular products, allowing users to easily explore and make informed choices.
Problems
For the "Artisan Micro Business" page:
Lack of detailed information about RAI's partnership with Net X Etsy, resulting in no prior notice to users that they will be redirected to the Etsy page to shop for products. This could potentially lead to inconvenience and user drop-offs as it redirects users to another page abruptly.
Solutions
We included details to inform users that these collections are showcased on Etsy, ensuring they are aware that their shopping journey will continue on another page. Additionally, we incorporated information about our partner, Nest X Etsy, to provide users with more context and transparency. These improvements aim to enhance the user experience and reduce any inconvenience caused by the redirection.
Problems
For the "Artisan X RAI Label" page:
1. Products sold directly through the RAI website are displayed inconsistently in different sizes.
2. The products page lacks inspiring stories to motivate buyers to make a purchase decision.
Solutions
We enhanced the layout to ensure consistency in the display of the products. We also added "Buy Now" and "Add to Cart" buttons directly on product pages, streamlining the purchase process for users.
Product pages were updated to include more detailed information about the products, including buyer reviews. This update aims to provide users with a better understanding of the products and enhance transparency.
