UX/UI Designer
as part of Brandable
Ecommerce Site on Shopify
2019 - 2020
Sketch, Invision, Zeplin
Queen V is a feminine wellness brand that empowers females of all ages and aims to reduce the stigma surrounding vaginal health and feminine products. With cheeky brand positioning and fresh colors, this brand is not afraid to push the envelope in delivering high-quality products made from better-for-you ingredients.
Although the site had been live for almost two years, the manage account feature through Shopify had only recently been activated and utilized by our team. Based on the preloaded styling of Bootstrap, the manage account interface and functionality left a lot to be desired and often frustrated users, as was evident by our customer service calls logging the highest issues with the account section of the site. I was tasked with analyzing the user journey, improving the flow, including new helpful features, and ultimately reducing user friction when accessing their account information.
This case highlights the product design of an account dashboard for an ecommerce site, allowing users the ability to easily manage their subscriptions and personal account information.
Immediately upon becoming familiar with the Queen V brand, website, and user offerings, I started questioning the manage account user flow and design. Was it helpful to users? Was it giving them the information they were looking for? Was it comparable to other ecommerce account dashboards? Before I really analyzed the actual feedback from users, I wanted to audit the screens for myself. The errors and inconsistencies I found are outlined below:
1. Personal Information - There was no way to edit the account holder's personal information and the drop down would display duplicate addresses, one for each time an order was processed.
2. Cancel Subscription - This wasn't the type of subscription that would require up-front costs to sign up or maintain a membership, so would Cancel AND Delete both be necessary?
3. Order History - While this information seemed straight forward, there was no way to see the invoice in full or order again as many other manage account experiences used.
4. Billing Info - While all the correct information was present, the center-align display of type was hard to read and inconsistent other site styling.
5. Delivery Schedule - The subscription frequency or next order date was completely absent on this screen, despite appearing in several places of the Subscriptions screen.
6. Add Items - The "I Want More" tab title wasn't the most intuitive name for adding new items to a subscription, and the filter column to the left was unfamiliar and unclear.
In order to get a better idea of how account details were typically managed, I logged into several of my own subscription-based accounts and started finding commonalities in the dashboard layouts and UI elements. Analyzing subscription-based ecommerce sites beyond my own accounts presented challenges – either I would have to make a purchase and sign up for ongoing orders or not many competitive sites operated under a subscription-based business model.
While the account dashboard was a newer feature to the Queen V website, users and their purchase history were not. I met with our analysts and customer service reps to understand the shopping habits of our users and what issues they were most commonly reporting. The information I gathered is described below:
Too much of one product – Although the sizes of each product were ideal for the recommended two-month order frequency, many users often reported not going through each product at the same rate as others, especially in the Essentials Kit.
Confusion about their account – Prior to the account dashboard, users were calling into the customer service reps to ask questions about, make changes to or cancel their account. This was costing the company greatly in returns, refunds, and a misuse of the rep's time and energy.
Additional insights gathered include:
Feature Prioritization - After compiling the user data that I had access to, I was able to start the concept for what a new dashboard experience would include and how it would be structured. I prioritized the features to include using the MoSCoW method, with integral features represented in the Must and Should Have columns, some coming from the Could Have column as well, while the remaining features would be moved to our backlog and tackled during future design iterations and dashboard launches.
With a general idea of what problems to solve for the user and what features to include for doing so, I started working out some initial ideas in low fidelity wireframes. Two completely different design directions, these wireframes both arrange the relevant content for the user, while giving a different level of control over their account information and subscription contents.
While these initial layouts were helpful in considering all user information and controls, they introduced too many features at once and didn't alleviate user confusion.
In order to allow the user more control over their account information, while not overwhelming them or cluttering the screen with unnecessary elements, the dashboard flow had to be well-organized, easy to navigate, and introduced controls similar to those that may appear in other areas of the site. With this in mind, as well as the features I outlined above and initial wireframes, I took a closer look at the information architecture of the dashboard. I came up with this initial flow diagram, including three main dashboard tabs for users to navigate.
Manage Subscriptions – With the bulk of the user interaction and controls, this tab features all of the key information regarding the subscription, including status, subscribed products, and order details. From there, users are also able to fine-tune the details of their order, by adding or editing products and changing the date to better suit their usage.
Order History – If the need arose to ever refer back to previous orders, this tab allows the user a complete overview of their past transactions, subscription-based or not. The user can view old invoices, which contain not only the product listing, but also billing information, and shipping and tracking details.
Account Details – Likely the most valuable tab to the Queen V subscribed users, this tab allows editing personal details, shipping information, payment methods, and account login credentials.
The final dashboard design is a robust, carefully considered, and visually appealing product. Going above the simple text buttons and invoice layout of the former manage account interface, this dashboard infuses modern iconography, smart controls and clean organization to a complex user experience.
Data from the site's analytics and customer service tickets will continue to be analyzed and will drive future design iterations and UX fixes.
While this dashboard is in development, the next iterations of the design and experience have already been thought about and include the following:
