Human Connections is a nonprofit organization based in Bucerías, Mexico with a mission to empower local Mexican communities by fostering authentic, meaningful connections through responsibly curated cultural day tours and immersive student programs. With a vibrant network of local artisans, Human Connections is able to authentically share local partner stories and provide a platform for them to share their culture. This in turn provides these local communities a form of income generation and helps ensure economic sustainability in the long run.
Due to the recent impact from the pandemic with both travel and local tourism hit hard, local artisans no longer have a steady source of income, which compelled Human Connections to launch Camino— a sub-brand online store to sell a pilot collection of artisan goods to help offset this financial burden.
Camino is not only a collection of artisan goods, but a path forward for the community.
The Problem
Currently, the website does not tell a cohesive story between Human Connections and the launch of Camino and does not support a seamless online shopping experience for both individual sales and wholesale sales.
The Focus
By redesigning the homepage to introduce Camino and redesigning the Camino store experience, Human Connections hopes to bridge the gap between the two brands and potentially drive more support and sales for this pilot initiative.
Design Thinking Process
UNDERSTAND
Starting with research
Human Connections is in a unique position where it is both a nonprofit organization and conscious brand based on sustainable principles with the launch of Camino, so it was important to prioritize research on the two concepts— nonprofit & conscious shoppers. Though Human Connections & Camino touch on sustainable tourism and fair trade practices, these two general areas were too vast to tackle during this time, but important to keep in mind.
By using three different research methodologies— secondary research on the nonprofit donor landscape, 1-to-1 user interviews with nonprofit supporters & conscious shoppers and competitive research on brands selling unique, artisan-made products, I found different areas of opportunities to expand on.
Shift in consumer shopping behavior with an increased commitment to buying from socially responsible companiesdue to COVID-19
Company purpose is important, but generating trust matters more
Consumer brand loyalty and purchasing decisions highly contingent on detailed product information
Brands active in the artisan-made, fair trade space feature compelling stories of the artisans to tie back to their mission and how consumer purchases can make a positive impact
DEFINE
Potential Camino shoppers and their painpoints
Based on the 1-to-1 user interviews, I synthesized findings via affinity mapping and grouped them into three categories based on motivations, needs, and frustrations. This led to the development of two personas: the student/nonprofit advocate and the conscious shopper.
*Note: The student target audience was partially pre-established as Human Connections has student programs as one of their main offerings, so this persona was further refined as a result of the interview findings.
By including an observational piece during the interviews, I was able to see how users perceived and navigated the current website. Through this process, the following pain points were revealed:
Homepage
No visibility and entry point to shopping Camino on the homepage
Lack of context and impact behind the launch of Camino
Store Page
Current store page does not feel like a shopping site
Confused on how to access the online catalogue
Product info. is not readily available to help users make an informed purchase
Order Form
Not a seamless shopping experience
Option for wholesale is hidden in a seperate FAQ page
Ideate
Path to the solution from sketches to hi-fi wireframes
Visualizing the information architecture
I started off with a deep dive of their current website to get better acquainted with their existing sitemap and informational architecture and decided to make some changes to align with their goals. I renamed some pages to make it more intuitive for new visitors and restructured the footer to enhance Human Connections's offerings and Camino's presence on the site.
In addition to:
revamped footer to include newsletter sign-up and easy access to the online catalogue and wholesale orders
created a separate top bar nav for Camino since it is an e-commerce, product-focused sub-brand with completely different look and feel
dedicated a tab specifically for wholesale orders on the Camino sitemap
Take a look here for a detailed look into the sitemap and user flow.
TOP NAV & Footer - Before
ToP NAV & FOoTER - AFTER
Translating the catalogue experience
I analyzed their online catalogue as a source of inspiration to help maintain a consistent voice and to translate that manual experience onto their website as it's currently tucked away in a separate site.
I found that their use of traditional techniques, materials, and traditions are what makes their artisan-crafted products unique and products fall into 3 different categories: kitchen, decor, accessories. I wanted to strategically highlight this content to help tell the story of what makes Camino products special to appeal to the conscious shopper.
Designing the solution
In considering the above findings along with Human Connection's goals, brand guidelines, and availability of assets (logos & images) that were initially mentioned on the kick-off call, I used different methods— sketches, crazy 8's, mid-fi wireframes to tie all the pieces together with a main focus on weaving in Camino into Human Connection's current website and creating a more seamless and user-friendly Camino store landing page to checkout flow that prioritized the story, impact, and unique selling points of Camino products.
Goals
Current: Bridge the gap between Human Connections and Camino
Long-term: Drive brand awareness and traffic to site to increase day tour and student program sales, and the purchase of Camino products
Brand Attributes
Human Connections: to educate and to inspire, personable, professional, friendly, respectable
By using crazy 8's to brainstorm ideas to showcase the artisan stories, I ended up choosing the idea of an interactive map of Mexico as a fun way to give users more context on where the artisans are from and how that may contribute to their choice of traditional techniques used in crafting their products.
Other ideas that were explored include: ☞ weaving the artisans together for a connectedness imagery with a spinning interactive element that allows users to chose the artisan they want to view ☞ produced videos to showcase behind-the-scenes of how products are made or a day in a the life of the artisans
By using crazy 8's to brainstorm ideas to showcase the artisan stories, I ended up choosing the idea of an interactive map of Mexico as a fun way to give users more context on where the artisans are from and how that may contribute to their choice of traditional techniques used in crafting their products.
Other ideas that were explored include: ☞ weaving the artisans together for a connectedness imagery with a spinning interactive element that allows users to chose the artisan they want to view ☞ produced videos to showcase behind-the-scenes of how products are made or a day in a the life of the artisans
To further tie in the story and launch of Camino with Human Connections, I also integrated these design elements:
1.)
the wave and squiggly lines to evoke the meaning of Camino— originated from its Spanish meaning of path
2.)
the use of unconventional shapes to tie in the idea that handmade goods are all unique and not two pieces are the same
3.)
maintaining use of the original brand teal color as the Human Connections' mission continues to revolve around sustainable practices
PROTOTYPE
Revamped shopping and checkout flows
I designed my prototype (and final deliverable) for desktop as the team mentioned site visitors via GA data are largely desktop users with the intention to apply learnings from this desktop version to optimize the future tablet and mobile versions. I created two particular flows to introduce a seamless shopping and checkout experience that tells a cohesive story between Human Connections and Camino and to increase Camino's visibility on the overall website.
User-Centered Shopping Experience
enhanced visibility of Camino on the homepage
dedicated Camino shopping landing page and product overview page to expand on launch of Camino, impact, and unique selling points
showcases the artisan in each individual product page to humanize the impact, techniques, materials, and traditions behind the product
includes dedicated section to guide wholesale buyers
Seamless Checkout Experience
checkout follows a similar design as Shopify's checkout experience as the team mentioned a 3rd party integration with Shopify is in consideration
meets established constraints: highlights minimum order requirement when product is added to bag and informs user that Human Connections will confirm shipping and handling costs, expected delivery date, and total cost once order is submitted
TEST
Validating designs through usability testing
With the hi-fi prototype, I conducted 10 usability tests through a mix of moderated and unmoderated testing through Maze. The Human Connections team graciously introduced me to an active Human Connections supporter, so I was able to get valuable feedback from an actual user through one of the moderated tests.
Revisions
Based on user feedback, adjustments were made to make the prototype more intuitive, consistent UI, and iterated changes below to enhance the final prototype prior to delivering to the Human Connections team:
Problem: Users felt that the launch of Camino was a little hidden under the COVID-19 response section
Solution: Deprioritize COVID-19 as the header and bring out Camino as a dedicated section
Problem: Users were unfamiliar with the technique icons that accompanied each product card on the product detail page
Solution: Remove the technique icon in the initial product card state, and introduce a hover state to include a description, a clear reminder that icons need a text label
Overall, all participants were able to understand the story behind Camino and were able to easily navigate and complete both the shopping and checkout flows, which helped meet the goal of bridging the gap between the two brands and to introduce a seamless shopping experience. In order to validate for the longer term goals of increasing awareness and Camino sales, further tests would be needed to understand users' inclination to purchase.
Users appreciated the clear visual hierarchy and the option to learn more about the artisans and what makes Camino products special.However, users did come across a couple areas of confusion and provided some suggestions to implement that were mostly content-based— to provide more transparency on the product process to validate cost of product and made-to-order length of time and more inspirational quotes or stories from the artisans themselves.
Final Prototype
Closing thoughts
This was my first pro bono project as a UX designer for an organization with live stakeholders, so it was both an exciting and challenging experience in managing the entire process from briefing to design execution. Through this experience, I was able to learn the challenges and importance of working with live constraints (i.e current & future business goals, asset availabilities/content strategy) in a nonprofit setting and how that can ultimately determine the feasibility and viability of the designs, beyond advocating for the end user.
Many thanks to Mariana and Nova at Human Connections for giving me the creative freedom and opportunity to introduce design thinking to the team and explore and influence the future vision of Camino within Human Connections. These designs are not live, but they would like to transition their website to an e-commerce platform to support Camino in the near future when timing and logistics align.
If the team decides to move forward, I would work with them to further explore the look and feel of the overall brand, implement any designs that meet their current goals in that point in time, and assess and optimize the rest of the site to ensure a holistic and seamless experience. In the meantime, please check out Human Connections x Camino here, if you're interested in supporting!
VIEW PROTOTYPE
.png){kind=logo}
