Abroad Modern

A responsive website to make an impact

Role: UX Designer (including research, strategy, information architecture, interaction design, UI design, user testing)

Tools: Figma, OptimalSort, Zoom, Whimsical

Date: January - February, 2021

Project Overview

PROBLEM

Two companies, Abroad Modern and Giving Joy, were merging and needed to redesign their website to reflect this merger. Their goal is to sell unique, handmade goods from around the world and make it simple for customers to have an impact through their purchase, with 25% of proceeds going towards grants for women entrepreneurs.

OBJECTIVES

The project aimed to:

• Design a responsive e-commerce website that is pleasing to use and allows potential and current customers, as well as women entrepreneurs who apply for grants, to navigate the website
• Extend coherent branding and messaging that aligns with Abroad Modern and Giving Joy’s desired clientele and customer experience

SOLUTION

A responsive e-commerce website that provides customers with the opportunity to make an impact through their purchase of unique, global goods while also empowering artisans and women entrepreneurs.

Phase 1: Research

RESEARCH PLAN: OUTLINING RESEARCH

I started the project by conducting research in order to better understand the users and evaluate my current knowledge of how consumers shop for unique, global goods. To help frame my research and ensure a structure was in place, I created a research plan, which includes the goal, objectives, assumptions, methodologies, participants, questions, and timeline.

Overall, my goal when conducting research was to understand the value of a service that provides handmade, unique global goods so that I could design a platform that benefits customers, artisans, and women entrepreneurs.

I identified secondary research (including both market research and competitor analysis) as well as primary research (through interviews) as the main channels through which I'd conduct research.

In the end, I came to three key insights:

1. Abroad Modern and Giving Joy should target consumers with a higher income and those of a younger crowd
   
2. Abroad Modern and Giving Joy need to maintain consistent branding and messaging that’s personal and highlights the company’s values and mission. Abroad Modern and Giving Joy should also highlight product details and help users understand the impact they’re making with their purchase.
   
3. The collaboration between Abroad Modern and Giving Joy is not clear 

Let's dive into how I came to these insights.

Secondary research

MARKET RESEARCH: IDENTIFYING KEY SHOPPING TRENDS

I first started by conducting market research, looking at broader industry trends and how consumers are behaving to gain a better understanding of the market and help me understand the users I would need to speak with, as well as the questions to ask them, during my primary research.

I looked at two main topic areas and found:

Shopping during the pandemic

• High-income earners and millennials are leading the way in shifting spend online across both essential and nonessential items 
  
• Around 40% of US consumers have reduced spending in general as they’re struggling to meet expenses
  
• While the beginning of the pandemic brought about an increase in conscious consumerism and charitable giving, after May, though, more uncertainty caused this to decline
  
• There is also a strong group of individuals (especially younger consumers) who want to better themselves during the pandemic and focus on more sustainable, healthier purchasing choices
  

Consumer preferences and behavior

• Companies that put their values into action grow faster than other companies: 68% of US consumers say that a company’s social responsibility reputation has at least some influence on their purchasing with that company
  
• 88% of customers think detailed product pages are crucial for making a purchase decision and want to know more information about the products they’re purchasing

COMPETITIVE ANALYSIS: EXAMINING COMPETITORS

Looking at both direct and indirect competitors through a competitive analysis helps me to not only get a sense of their strengths and weaknesses but also identify potential areas where Abroad Modern and Giving Joy can better differentiate themselves against these competitors.

Primary research

USER INTERVIEWS: TALKING WITH USERS

Talking to users, both those familiar and unfamiliar with Abroad Modern and Giving Joy, would give me direct insight into user's needs, goals, fears, and frustrations. I created an interview guide to frame my interviews and while I primarily wanted to get a customer’s perspective, I also looked to speak with an artisan and grant winner to understand their points of view. I conducted six interviews and as one user noted:

“If you want me to buy stuff, bring me the story that is most compelling and connect that story to the product.”

From my findings, I knew that the company was going to need to either distinguish between Abroad Modern and Giving Joy, showing the grants as a part of the business model, or become one brand name. It would also be important to highlight the artisan for each product, as well as how the new company came to be. Finally, the site would need to communicate what impact each purchase makes.

Research synthesis

USER PERSONA: UNDERSTANDING THE USER

With my findings from research, I created two personas to get into the mind of the user and to keep the user at the forefront of my designs. The two personas included one for customers (Dana Miller, below) and one for women entrepreneurs applying for grants (Soraya Morgan). While my focus was primarily on customers, I also wanted to include grant applicants as they would be using the site too. Throughout the remainder of the project, I kept Dana and Soraya at the forefront of my decisions, ensuring that my designs would keep their goals, needs, fears, and frustrations in mind.

Phase 2: Define

Strategy

FEATURE ROADMAP: PRIORITIZING FEATURES

With the research synthesized, I began prioritizing features to include on the site through a feature roadmap, identifying features with descriptions and the research supporting each. Creating the feature roadmap helped me prioritize the features into four categories, with the top features to move forward with first under the Must-Have (P1) category, followed by Nice To Have (P2), Surprising & Delightful (P3), and Can Come Later (P4).

Information architecture

CARD SORTING: STRUCTURING THE SITE

I implemented a card sorting exercise to gain insights from users on how they would structure the site. The organizational structure of the Abroad Modern site at the time proved difficult to find particular products. The similarity matrix below shows the proportion of participants who grouped any two cards in the same category. We can see some closely related pairings (identified in the red boxes), as well as strongly associated pairings that all participants grouped together (identified with the star icon).

SITE MAP: INTEGRATING FEATURES

With insights from the card sorting exercise, I began to create a site map to understand the organizational structure of the site and identify content groupings, which helped me identify how to best integrate the features into the site.

In my initial conversations with the founders, the plan was to move the content under Giving Joy’s website to Abroad Modern’s domain; however, this changed during the project. Due to Giving Joy being registered as a non-profit organization, we were legally advised that it would need to maintain its own domain. Thus, I created two site maps, one for Abroad Modern and one for Giving Joy. As I continued on with the project, my focus would be primarily on Abroad Modern, which is the site map you see below.

Phase 3: Design

USER FLOW: HELPING DANA NAVIGATE THE SITE

Before taking pencil to paper and sketching the design, I outlined the user flow to better see how a user such as Dana may navigate the site and its features, as well as what steps they will need to take to accomplish their goals. In this case, Dana is looking to purchase a pair of earrings as a gift for her friend. Below is a piece of the full user flow, in which Dana selects the product page for a pair of earrings.

SKETCHES: TAKING PEN TO PAPER

With the flows outlined, I began sketching out the necessary pages I’d need to help Dana find a pair of earrings for her friend. Sketching enables me to quickly begin to visualize what the Abroad Modern site will look like before I begin outlining the details in a design tool.

MID FIDELITY WIREFRAMES: FURTHER REFINING THE DESIGN

Once I had a sense for how the pages should be laid out, I took to Figma and began creating mid fidelity wireframes to add more details and hierarchy. With learnings from my research, I wanted to ensure that users could learn more about Abroad Modern, what they do, and their connection to Giving Joy. I also looked to include details about their impact and who they work with. Finally, I knew it would be important to include product details, such as where the product was made and who made it.

RESPONSIVE WIREFRAMES: ENSURING A RESPONSIVE DESIGN

Users may access the Abroad Modern website through different mediums, such as through Instagram or their iPad, so it was important to create responsive wireframes for this project. To ensure it would be a seamless experience for users, I designed responsive wireframes for desktop, tablet, and mobile.

BRANDING: UTILIZING THE BRAND

Before evaluating Abroad Modern's brand, I worked with the founders to define the brand attributes as:

• Socially conscious
• Trustworthy
• Personal
• Empowered
• Global

With these brand attributes, I kept the Abroad Modern branding because (1) users were already familiar with Abroad Modern, as the shop had been around for several years, and (2) I felt the brand conveyed Abroad Modern’s brand attributes outlined above.

I refined my wireframes to include the Abroad Modern brand, incorporating the logo, color palette, typography, and imagery to evoke the Abroad Modern visual identity.

UI KIT: MAINTAINING CONSISTENCY

With the brand defined, I also outlined the UI Kit for Abroad Modern to ensure that a consistent design is maintained throughout the application. The document will change as the design is refined and any iterations will be reflected in the UI Kit.

Phase 4: Test

PROTOTYPE & USABILITY TESTS: EVALUATING THE SITE

With the high fidelity wireframes complete, I created a prototype to connect the pages together as if they were the Abroad Modern website itself. The prototype then enabled me to test the screens with users and understand what worked well, or could be improved upon, in the design.

Before contacting usability test participants, I outlined a usability test plan in order to highlight the objectives and process for testing the prototype with users, including the script and scenarios for each test. I expected the completion rate to be 100% and the error-free rate to be 95%. I conducted usability tests with four participants and noted any errors they made while they took the test. 

AFFINITY MAP: SUMMARIZING USER FEEDBACK

The affinity map below shows the results and highlights common themes from the usability tests. With comments noted for each participant by color, I grouped common feedback together to uncover patterns. The map categorizes the feedback based on positive comments (wins), areas pertaining to content, comments on the user interface, and features participants noted they’d like to see. 

REVISIONS: ITERATING ON THE DESIGN

Taking into account feedback from users and stakeholders, I prioritized revisions to the design to improve the usability of the Abroad Modern website. Below are a few of the revisions I made:

Edited the impact section on the home page to streamline the text and maintain consistency with the UI design and visual hierarchy of the page

Adjusted the network section to clearly identify and distinguish between the different groups Abroad Modern works with and supports through their store

FINAL PROTOTYPE: COMPLETING THE PROJECT

Now that the revisions were implemented, I could finalize the prototype, allowing me to complete the wireframes with feedback incorporated.

Takeaways

Impact: Impact is important to users, and myself. I was grateful to have had the opportunity to work on a project that aligns with my passion for social impact and empowering women throughout the world to become self-sufficient.

Business implications: Working closely with the two founders, I was able to learn from their experiences, as well as balance their feedback with what I was gathering through user insights.

Prioritization: While there were additional features that could have been added to the site, keeping in mind my time limitations, as well as those of the founders, was important and forced us to prioritize the most pertinent features to be included on the site.

Next Steps

For immediate next steps, I would compile all of my design files, as well as any helpful instructions or tips, and hand off the designs to developers through Zeplin for development. In regards to the design, I would also explore designing the nice to have features that were identified in the product roadmap.

Let's connect!

I'd love to chat with you.