Don’t Forget Your Pants // UX Prototyping
Imagine effortless style and comfort for your daily home-wear delivered in a box, personally curated and customized just for you — and you don’t even have to leave the house!
Sweats are great and all, and most of us have embraced them fully once we realized that WFHs and virtual schools weren’t temporary but rather the new norm. As is often the case, social media has proven that there is a new alternative home-wear — pajamas and loungewear.
They’re no longer just for sleeping or lounging around. So many pajamas and loungewear these days are perfectly suitable as “presentable” home-wear, hence the rise of the trend as we enter year 2 of this pandemic — stylish home-wear has become increasingly popular over the years, especially last year.
WHAT DOES IT DO?
DON’T FORGET YOUR PANTS is a company that offers a subscription service that you can have curated to fit your own style with dressy tops paired with comfy bottoms for men, women, and children — catering to all levels of price ranges, delivering comfortable yet effortlessly stylish home-wear in a box that is personally customized for each customer.
We all know, or heard the story of, that person who got up in the middle of the virtual meeting or online class, forgetting that they only got dressed from the waist up for the camera. Stress no more. DON’T FORGET YOUR PANTS is here to save the day!
WHO IS IT FOR?
This concept is inspired by so many of us juggling the new stay-at-home-life with the agony of changing into real clothes for the inevitable virtual meetings and schools, while wanting to stay comfortable — as we can all relate. If you are working from home, if you are in a virtual school, if you are too busy to go shopping, if you are not feeling too safe being out and about, or if you are just looking to update your wardrobe, DON’T FORGET YOUR PANTS couldn’t have made it any easier for you to look your best even when at home, without the expense of comfort.
1. Proto-Personas
Creating pseudo users is always fun. Initially working as a team, we came up with 3 distinctive users — every age, background, and budget. Creating these personas representing the company’s customer base helped refine the general direction for this digital product.
2. Architecture of Prototype
LOW FIDELITY PROTOTYPE: DESKTOP
The initial wireframe was built for the desktop browsers based on the proto-personas and market research on profile customization experience. From there, a handful of pages were created to help start the onboarding process for DON’T FORGET YOUR PANTS.
HIGH FIDELITY PROTOTYPE: DESKTOP
A big leap was made rather quickly, going from low fidelity prototype to high fidelity along with the creation of the DON’T FORGET YOUR PANTS brand identity. Several more pages were added for a better flow, as well.
HIGH FIDELITY PROTOTYPE: MOBILE
Shortly after creating high fidelity desktop prototype, the entire website got switched over to the mobile version. Everything was practically rebuilt to fit into the mobile browser size. Many pages were split into 2 or 3 screens and many changes were made. The orientation of the CTAs and selections were readjusted as well. This was particularly challenging for me as it was my first time creating something solely for mobile.
3. Usability Tests/Interviews
USABILITY TEST PLAN
I created a quick dashboard of the test plan for myself to follow. I reached out using social media and digital bulletin boards to recruit the participants. The requirements to qualify for this interview were very basic. I was looking for all types of users with or without subscription service experiences. With clear test objectives, the interviews were conducted using Teams, Zoom, and Google Hangout.
UNDERSTANDING THE USERS
I conducted 3 rounds of usability tests which resulted in a total of 14 interviews with 11 participants. Three of the participants from round 1 and 2 requested to be interviewed again, wanting to see the progression of the prototype. I find it interesting that all the participants wanted this company to be real.
The participants were between the ages of 23 and 52 with various backgrounds. Four participants had used subscription services for various things — food, clothes, skincare, makeup, flowers, household goods, and etc.. Five participants had used subscription services once or twice. Surprisingly, only 2 had no subscription experiences.
The main focus of the testing was to see if people could easily navigate through the customization process before committing to the annual subscription. After each round, the prototype was adjusted accordingly.
4. Key Findings & Pain Points
- Most of the users with previous subscription experience had gone through the onboarding processed on their phone. That was great to know and I was glad I had made that leap from desktop to mobile prior to these interviews.
- Most of them wanted more information before creating an account. They stopped at the sign-up page and hesitated moving forward. This was a big revelation and had greatly helped the rearrangement of the onboarding process. The sign-up page will now come after they have taken the profile quizzes about their shopping habits and style preferences.
- Some of the users wanted access to the previous screen during the customization to freely go back and forth between pages to check/change their answers. The back button has been added to all pages.
- Having the users select what they like for some items and dislike for other ones was a bit confusing to some users. To minimize the confusion and to keep consistency, all the preference pages are now asking the users to select what they don’t want to see in their subscription boxes. Also, if a user is allergic to certain fabrics, they can easily eliminate that particular fabrics. This was based on a research done in the past that people tend to know right away what they don’t want vs what they want.
- Many of the users found the customization pages not detailed enough but overwhelming with so many buttons. The size/fit page has been split into two with additional selections and the size/fit buttons are now on a side-way-scroll.
- Not knowing what the different box prices were was a big problem to the users. Having to come out of the check out page to pull up the box descriptions on the homepage was also a big problem. I have now incorporated the box descriptions into the box selection page so when the users click on one price, the list of store drops down below it — no more jumping from check out page to box description page.
5. User Flow
The user flow was adjusted drastically with the data gathered from the usability test results. The sign-up page was pushed towards the middle of the process, the preference pages were separated into 2 different sections — profile quizzes and customization pages. The box description was no longer its own page. With many more screens added and shuffled around, I felt confident about the new order of onboarding process and moved forward with updating my prototype.
6. Validation of Design Decision
Based on the refined business model and the adjusted user flow, I updated the prototype one last time.
Check out the live prototype here. (Password: 1234)
ONBOARDING EXPERIENCE
Browse style section has been bumped up as the second item on the homepage based on the users wanting to see the example ensembles before moving forward. There are 3 different ways to get started and they are very clearly displayed. The users can browse through the style cards to see what the price is and from what stores the outfits come from.
Profile quiz pages have been added to help the users define their preferences better. The styling pages are moved up from the last section based on the feedback given by almost all users — many of the users simply refused to sign up before seeing the examples of what they were getting. They can now look through the styles and sign up for the subscriptions with confidence.
SIGN UP OR SIGN IN
Halfway through the onboarding process, the users will face the sign-up page will pop up. They will have to sign up or sign in to continue.
CUSTOMIZATION
The sizing pages and dislike pages were a big hit among the users. The back button has been added to all pages, as mentioned. All the sizes and fit options are offered without cluttering the page overwhelming the users with a screen full of buttons. With detailed feedback from the users, I was able to make all the necessary changes to make the process smoother.
SUBSCRIPTION CHECK OUT
The box description is no longer on its own page. As the users click through the box price, the selected price will have a dropdown showing a list of stores where the outfit will be coming from. The order review and check out page now include all details such as subtotal, payment options, auto payment features, auto renewal, and etc.. The order confirmation page will guide the users either back to the homepage or to the browse style page where they can select from the style cards and create a favorites folder to better customize theur profiles for the curators.
7. Possibilities
RETAIL
Potentially the retail side will be added to this company where the users can choose additional items to be included in their boxes or purchase additional items individually. That idea had always been there from the beginning of the project but I had decided to focus on the subscription part first.
CHATBOT
One way to accommodate the customers needs is to use the Chatbot on the website. The Chatbot will be able to answer general questions or direct the customers to the customer services representatives.
8. Final Thoughts
The main challenge in this project was to create a UX journey for a company that didn’t exist. Along with the business models and overview, I also had to create the branding in order to build the prototype. There were many other challenges along the way but having to do all the work in a short period of time was the greatest challenge. I had not pulled so many all nighters since I was in school 20 years ago!
One of the lessons I have learned is that when you interview the same participants the second time around, it gets difficult to keep them focused like the first time. The 3 returning users I had wanted to see the changes that were made based on their feedback, which I thought was very interesting.
Coming from years of designing pieces as a marketing designer, UX design has really given me a fresh perspective and opened up my eyes to see the products from user’s perspective. Even as a designer, I don’t think I will ever be able to create anything not from the users’ perspective anymore. I cannot unlearn what I learned!
