Project Overview:
This project was a team effort as part of the “Projects in IXD” coursework at Pratt Institute. We worked with the non-profit “Made in Chinatown” over 4 months to redesign their e-commerce website. The main goal of the website redesign was to drive ecommerce sales through an information architecture and visual design that enables users to connect with the businesses by learning about their stories.
About Made in Chinatown:
Made in Chinatown (MiC) is the e-commerce function of the non-profit organization “Welcome to Chinatown”. MiC supports businesses in Manhattan’s Chinatown by providing them with free design services to create custom merchandise, which are then sold through the e-commerce website. The program has 10 participating businesses and almost 30 – 40% of the revenue from the merchandise sales goes back to these businesses.
Our Process:
Project Goals:
From the kickoff call, we learned that the goal of this project was to honor the Chinatown businesses involved in the MiC program through the storytelling and the organization of content on the MiC website. Hence, we asked ourselves: how might we redesign the MiC website such that it drives merchandise sales through an enhanced storytelling approach?
User Research:
Before starting the redesign process, we conducted several rounds of research:
- We started by creating an ecosystem map of the organization to learn more about who all the key stakeholders are for MiC and how they interact with each other and the website.
- We then conducted a technical analysis of the MiC website to audit its current information architecture, visual design, and key workflows.
- The technical analysis helped us identify key potential issues we wanted to investigate further, which we did with the help of user interviews and usability tests.
The key findings from our research were:
- 100% of our users mentioned adding images/video/social media to draw more attention to the storytelling aspect of the website.
- There is opportunity to drive the storytelling and make it the focal point of the website through visual design elements such as colorful text, bigger fonts, large banners with visuals and catchy headings etc.
- MiC is missing out on opportunities to highlight Chinatown business’ stories since it’s unintuitive at the moment how the “Collections” drop-down menu is organized, and users rarely click on it in the top navigation bar.
Guiding Principles:
Once we completed our research analysis, we had a good idea of where to start with the website redesign. Based on our findings, we laid out the guiding principles we wanted to keep top of mind throughout the redesign process which were:
- Design an information architecture that matches users’ mental models
- Ensure that key e-commerce workflows (e.g. “Add to Cart”/”Checkout”) are intuitive and seamless experiences
- Design an information architecture that puts the stories of the Chinatown businesses first
- Integrate storytelling with the e-commerce functions of the website and the e-commerce functions with the storytelling
MVP Walkthrough:
This next section will provide an overview of the redesign in terms of the information architecture, the key workflows, and the content.
Information Architecture that Puts Storytelling First:
Since sharing the stories of local Chinatown businesses is one of MiC’s main goals, we designed an information architecture that prioritizes the storytelling. We displayed pages such as “MiC’s Story” (aka the About page) and “Brands of Chinatown” earlier on in the top navigation bar so that users can first learn more about the organization and the Chinatown businesses, before moving on to the e-commerce aspects of the website such as the product pages, the “What’s New” page, and “Special Collections” page. Moreover, the links in the navigation bar are also given more descriptive names e.g., instead of just calling a page “About MiC” or “About Us”, we named the page as “MiC’s Story”, and the brands page “Brands of Chinatown”, again, in an effort to highlight the storytelling aspect.
We also created a secondary navigation for the product category pages aka, the “Apparel”, “Accessories”, and “Home Goods” pages, and created a new link for “Special Collections” to house all the different collections instead of grouping them with the brands page as it is on the current website.
Key Workflows:
Secondary Navigation Menu to Make Browsing More Efficient:
Our redesign proposes a creative solution for browsing different product categories within one page, the “All Products” page. On the redesigned “All Products” page, users have the ability to toggle between product categories by clicking on the links for “Apparel”, “Accessories”, and “Home Decor”. These links function as a secondary navigation bar for the product categories. The redesigned version has the ability to filter by specific businesses as well as the ability to sort products.
Encouraging Return Visits With a Favorites List:
Based on what we heard during our usability tests, we decided to include the ability to add products to a favorites list in our website redesign. Users can favorite products by clicking on the heart icon next to the product name, and they can view their favorite products by clicking on the heart icon in the page header. This added functionality will also hopefully encourage users to return to the MiC website more frequently, driving sales.
Showcasing Chinatown Business’ Stories Through ‘Brand Stories’:
In our website redesign, all the participating brands are showcased on the “Brands of Chinatown” page. Users who are interested in learning more about the brands can click through a gallery view of all the participating brands. Clicking on an image takes users to a page dedicated to a specific brand. Each brand page is designed to help users learn more about the brand’s mission, history and founders through a blurb (which can be extended) as well as pictures. As users scroll down the page, they can look through pictures of all the people who work for the business under the “Team” section. We believe seeing pictures of all the team members will help users connect with the brand more. We also included a map in an effort to increase visibility for brands’ physical stores and to support the in-person commerce aspect of the business.
Improved Website Accessibility with a Translation Functionality :
The translation feature is especially important for MiC since the organization caters to a community who speaks languages other than English. Hence, a multi-language website will make the website accessible to a much wider audience. Considering the suggestion to add a translation function made by 6/7 users, we added a button that will allow users to change the language of the whole website.
Integrated Storytelling on the Product Detail Pages:
Since storytelling is one of the major aspects of the redesigned website, we created a section to highlight the brand story on the product detail page, as well as included a link to allow users to go to the specific brand’s page if they want to learn more. We also added a reviews section to facilitate a sense of community by enabling Chinatown shoppers to read and/or leave feedback. These design changes ensure that storytelling is still highlighted even on an ecommerce-specific page like the product details page.
Spotlighting MiC’s Vision and Key Players:
Since one of the main goals for this project is to drive MiC’s story through the website redesign, we added an about page titled “MiC’s Story” so that users can learn more about the organization, as well as get a behind-the-scenes look into the key plays involved in the organization. Some suggestions for content include showing MiC’s history and growth over time through a visual timeline, dedicating a section to the organization’s vision for the future, as well as integrating MiC’s instagram feed into the website so that users can stay connected on social media.
The website redesign also has a sub-page within the “MiC’s Story” page titled “The Team” where users can put a face to all the people who make MiC what it is. We also suggest adding a section to highlight the designers who design all the merchandise sold on the website, to celebrate their work as well as provide them with some additional visibility. We think that dedicating a page to show users all the key players in the organization is a nice way to add a personal touch to the website and appeal to users through a more emotional level.
Next Steps:
- MiC will work with a brand designer to finalize the organization’s brand identity and implement our recommendations in Shopify.
- Follow-up user research will be necessary to understand whether the redesigned website performs better than the current website in terms of usability and concept.
- MiC will also evaluate the following metrics to assess the success of the website redesign:
- Number of products purchased
- Page views and bounce rates of “Brand Stories” and “Product” pages
- Conversion rate from “Brand Stories” page >> “Product” pages >> purchase
- Conversion rate from “Favorites” or “Add to Cart” to purchase
- Number of returning visitors