Connecting Consumers With the Global Impact of Their Purchases

Because a major part of the Citizenry’s mission is creating an impact in artisan communities around the globe, each product includes in depth information on how and where it was made, and by whom.

Yeti has teamed up with the Citizenry for a redesign project that includes updating and improving the site's UI, aesthetics, and usability. Additionally, we’ll be creating a new feature that will provide consumers with a greater understanding of the global impact of their purchases.

Challenge

Our goal in this Citizenry redesign project is to enhance and streamline the users experience with the Citizenry’s Accounts pages through UI, UX and styling improvements, as well as through ADA compliance. The challenges for this project cover three separate areas:

1: Aesthetic and UX Updates:

The Citizenry has recently gone through a redesign process and has a new style guide. While some minor styling adjustments have been applied to the account experience, it is still largely an out-of-the-box Shopify implementation.

Beyond styling, the Citizenry would like to improve the overall UX of their Account page, as well as ensuring that it is fully ADA compliant.

Our challenge here will be to enhance the overall user experience for this portion of the site while aligning with the brand’s new style guide and accessibility best practices.

2: Order Tracking

The Citizenry would like to improve the styling and usability of the order history and order details pages. Here, our challenge will be streamlining the presentation of tracking information within the order history view as well as providing users with the ability to see all of their recent order details. Additionally, we will be creating a way for users to more easily initiate a return.

3: Highlighting the Impact of Purchases

A major part of The Citizenry’s mission is creating an impact in local artisan communities across the globe. Our challenge will be to connect consumers with the impact of their purchases from the Citizenry by providing them with information on the artisan group that has created the products they have purchased.

Solution

1: Aesthetic and UX Updates

We redesigned the Citizenry’s Account Pages in accordance with their new brand guidelines as well as ADA requirements. To do so we ensured that all fonts and color selections were not only in line with the company's new style guide, but that they also met ADA requirements.

As an example of ADA requirements in regards to color and font, it was important for us to ensure that there was adequate contrast between the text and background, that red/ black, red/green, and blue yellow combinations were not used, and that color alone was not used to convey meaning.

We additionally ensured that each page would function properly with screen readers, is operable using keyboard shortcuts, and that the hierarchy of page code aligns with visual output so as to streamline the experience for impaired users.

To make it simpler for customers to know what functionality is available within the account experience, we created a Dashboard view with icons and quick links to the various sections of the account, including icons/links to:

My Orders - Users can view all of their orders, as well as initiate a return.
My Addresses - Users are able to view and change address information.
My Impact - Users can track how their purchases have made a difference in the world.

This Dashboard view also includes a top banner for promotional messaging that is customizable without development work, allowing the Citizenry team to easily change the messaging as needed.

We improved the styling and usability of the address book functionality. Initially, users had difficulty differentiating between each of the addresses in their address book - and the page was not responsive across screen sizes. We enhanced the users experience by improving the UI of the address book, as well as ensuring it’s ADA compliance.

To allow the Citizenry team to track engagement with the various elements in the account experience, we added click tracking page elements. As an example of click tracking usage, Citizenry team members can now track the number of sessions with clicks on the Login Button vs. the Account Creation button for a specific time period,

2: Order Tracking

In order to increase the usability of the Citizenry’s Order Tracking features, we made improvements to the UI and styling of the order history and order details pages, ensuring that all information is streamlined and easy to read across devices.

When viewing their Order History, users now have the ability to see all of their recent orders including details such as order number, order date, status etc.

For example, users who have just placed an order will see the details of the items ordered, a “received” order status, and the addresses the orders will be shipped to. Once the order has been shipped that status will change to “Headed Your Way”, and will include a FedEx tracking number link.

Users are also able to easily initiate the return of a product by simply clicking a “Return Item” button in the order details. For ease of use, the status of the return and refund will also be tracked here.

3: Highlighting the Impact of Purchases

In order to connect consumers with the impact of their purchases from The Citizenry, we created a “Your Impact” tab to the Account experience.

This tab allows customers to visualize the locations from which they’ve purchased with a world map that includes pins representing each artisan group that the Citizenry works with. Upon hover, the user is able to see information about the artisan group they have purchased from.

Additionally, users are shown the total number of artisans impacted through their purchases over time.

Outcome

The redesign on the Citizenry's Accounts experience has successfully launched and is receiving positive feedback. Stay tuned for updates on our ongoing work with the Citizenry team!

‍