Background
Opportunity
Torrid has seen significant success and growth recently, so they need to enhance their My Account experience and refresh some product pages.
Solution
The best approach to this was to take 16 weeks and redesign their website first over their mobile app.
My Role
I was hired to be the Lead Designer as I not only enhanced their webpages, but I also guided their Junior Designer as she followed the new format and style I established.
Final Results
The Process
Design
- Redesign My Account
Enhancement
Website Current State
Torrid usually begins enhancements and redesigns over summer, then they use the rest of the year for testing and validation. Currently they have a designer, but their experience was more of a junior. Torrid knew that they needed to improve their My Account experience as they began thinking about the future of the company. Their current design was made hastily, so they wanted me to click through the website and do a light audit before I began redesigning anything.
.png)
My Account
After I gave my initial thoughts on how to improve the overall user experience of their Shopping Bag and Product Landing Page sections, I began making my own versions of My Account. The Before screens that will be shown as comparison were the initially V1 redesign that they started with. I would take those early versions and give it a new style while also incorporating new requirements during this enhancement project. Below you will see the before and after screens of the various parts of My Account that I worked on. I'll stick to the mobile screens for this section since Torrid instructed me to focus on this version of the website being that it gets the most traffic compared to desktop.
Home Page
Initially, this page existed but was going to be scrapped until I did a quick new version on mobile to show how it can be a useful tool. You will see the first redesigned version that existed before me on the left, and I will show my high fidelity screen on the right. The Product Manager asked me to explore an alternative navigation versus the horizontal scroll that you will see in the previous version. I decided to utilize breadcrumbs and I showed a preview of each section of My Account represented on the homepage. A user will be able to navigate to the section by clicking the top half of the card.
.png)
This page proved to be the most intricate to align on due to how it sets the tone for the rest of the subsequent pages. A landing page can help orient a user to all the positives that a website can offer a registered user. The major challenge during this redesign was walking the thin line of maintaining their current branding, but also enhancing new additions while organizing a design system.
Torrid Rewards
After the homescreen, this page is very important to recognizing the benefits of Torrid's reward program, and incentivizing users to continue their loyalty progression. The original V1 redesign was given to me as a general direction that Torrid wanted me to initially lean towards. I added the rewards level progression graphics as a strong visual cue so that a user could understand where they are in the journey, but they can also see the benefits offered at their current level.
Orders
This section can be divided into two main parts: Order History (landing page) and the Order Details. The Order History is to check up on orders that are either in-progress or completed by whichever year is selected.
Here are the Order History screens, the second page that happens if a user clicks on one of the Order cards on the landing page. This page was unique to design since there was no V1 version to redesign. Instead I used Torrid's current state page as inspiration for my enhancement, along with an excel sheet with the new requirements I would have to be mindful of.
Account Settings
Account Settings initially titled My Account, which led to some confusion during update discussions. We decided as a team to update the name for contextual purposes to Account Settings, since most of the actions are centered around changing parts of a user's account settings.
My favorite personal additions are the little pink icons for the Primary Address and Primary Credit Card!
File Organization
As we were finishing the final high fidelity screens, we realized that we would need to organize the Torrid owned figma file so that it would be easier for our developer technical reviews. I organized the pages by the different phases, and organized my files similar to Torrid's current handoff process. I did keep the previous iterations on the last page incase we decided to explore any features that didn't make the MVP release.
.png)
Design System
Once the screens for my section were approved and passed technical reviews, I shifted my focus from My Account to doing some design system organizing because their current system needed some extra work. The images below show how barebones the file was, and it didn't have an updated list of component styles at the ready.
.png)
.png)
Adding Styles
I know how having a flexible, and detailed design system can help streamline work while reducing the amount of inconsistencies across all screens. So my first order of business for this part was to work with Torrid's junior designer to agree on style rules for typography. By setting consistent rules now, we can create styles that won't need much variation. Once I gave my instructions to my junior, I went into the Figma and added the styles for both the typography and the brand colors.
.png)
Design System Formatting
As we agreed on rules for Torrid's typography, I began ideating around how to make their design system easier to read and match Torrid's clear branding. Being that I was an outside contractor, I knew that Torrid would be on-boarding designers again and they would need a crash course on how their design system works. So I took it into my on hands to create a template for each section, and I started with typography because it was the section I had worked on so far. The client was excited to see that I enhanced their current system, and added a bit more style to the actual presentation itself.
.png)
I added some imagery to make the design system seem more cohesive, and book like in case these would be printed in the future. Having that with some visual hierarchy and accompanying contextual information made a world of difference when it came to communicating design rules to non-designers. This part may have been my favorite part because creating or organizing a style guide or design system make me feel like I'm reinforcing the visual structure of a brand/company. The rest of their component pages followed the structure of the layout above, just to be consistent.
Conclusion
I led a team that redesigned the user interface for an e-commerce platform known as Torrid, resulting in a 30% increase in loyalty enrollment and a significant boost in loyalty point redemption compared to this time last year. This project was a good exercise to show my commitment to crafting designs that not only meet business objectives but also prioritize the needs of users. My work with Torrid has been a great practice for not only designing high-fidelity UI, but also was an excellent exercise for refining a style guide. I had a lot of fun designing an e-commerce experience for both mobile and desktop since it kept my mind thinking about how to make my design updates more flexible or dynamic.