EXPRESS: PREORDER FEATURE
A new feature that would allow shoppers to preorder clothing, thus alleviating company under-stocking issues and delivery delays while also boosting customer satisfaction.
ROLE​
E-commerce UX & Interaction Design Intern
TIMELINE​
June 2022 - Aug 2022
SKILLS​
UI/UX Design
Design Systems
Cross platform
TOOLS​
Adobe Sketch
PROJECT OVERVIEW
During my internship with Express as an E-commerce User Experience and Interaction Design Intern, I was tasked by my supervisor to spearhead the wireframe design process for a new preorder feature that would span the entire shopping journey.
This feature was to be designed across all platforms including desktop, mobile desktop, and app.
PROBLEM SPACE
The lack of a preorder feature on an E-commerce retail clothing website presents a handful of challenges and missed opportunities such as lost sale opportunities, inventory management challenges, customer dissatisfaction, and inefficient cash flow management. More specifically, the option to preorder products allows for early revenue generation and prevents customers from losing interest and/or turning to competitors if they cannot secure their purchase in advance. In addition, without preorders, it's more difficult to gauge demand for new products, which can lead to overstocking or understocking issues.
​
Additionally, many of Express's competitors have a preorder feature on their websites. If Express doesn't keep up with this industry standard and best practice that many competing brands already possess, the company will fall behind, potentially losing customers and sales.
SOLUTION
A preorder feature benefits all parties when it comes to online shopping at a retail clothing store. This feature provides both the retailer and supplier a better understanding of what the demand for a certain product is while generating more revenue for the business. Meanwhile, customers are able to secure their item of interest ahead of time, boosting customer satisfaction and loyalty.
PROJECT GOALS
-
Gauge product demand
-
Increase sales and revenue, improving cash flow
-
Streamline inventory management
-
Improve customer satisfaction and loyalty
-
Competitive benchmarking
​
FEATURES
-
Clear 'preorder' labels presented throughout the entire shopping process
-
Informative copy outlining a product's preorder feature and its estimated shipping time
RESPECTING MY NDA, VISUAL ASSETS ARE NOT PUBLICLY AVAILABLE YET...
Feel free to email me if you'd like to view the visual assets of this project with me.
BEFORE DESIGNING
AUDITING OUR COMPETITORS
Before designing, I looked into the current market and conducted a competitive audit of 10 of Express's major competitors in order to better understand the existing landscape. This competitive analysis allowed me to 1.) explore which companies have a preorder feature, and 2.) browse how these fashion companies implement their preorder feature in order to gain inspiration and receive insight into this industry best practice.
​
I audited as much of these companies' products' existing UI and UX across platforms on desktop, mobile web, and app in order to digest how preorder features typically work. I made sure to take note of common design practices while also identifying areas where certain companies' shopping journey could be improved upon.
After gathering research, I organized this information by creating a visual that I could use to both present to the rest of my design team and guide the start of my design process.
RESPECTING MY NDA, THIS VISUAL IS NOT PUBLICLY AVAILABLE YET...
Feel free to email me if you'd like to view the visual assets of this project with me.
MARKET RESEARCH
In addition to conducting competitive analysis, I also used Baymard, a premium research database with hundreds of UX articles, UX benchmarks, and page designs to gain as much information regarding preorder features as possible. I took notes along the way, capturing key concepts and visuals.
Then, I created a Miro board to organize this information so that I could easily present my findings to the rest of my design team while also letting the research guide the start of my design process.
RESPECTING MY NDA, THIS VISUAL IS NOT PUBLICLY AVAILABLE YET...
Feel free to email me if you'd like to view the visual assets of this project with me.
DESIGN GOALS
Taking the insights gathered from both our competitive audit and user research, we were able to outline our design goals for the preorder feature, keeping in mind our desired project goals and features outlined above.
​
I would refer back to these design goals throughout the entire process, from ideation to wireframing to prototyping. They served as the foundation of the design solution.
1. CREATE AWARENESS OF THE FEATURE
Make this preorder feature known through clear labeling throughout the website and user shopping journey
2. MAINTAIN DESIGN SYSTEM COMPONENTS
Refer back to the Express design system, ensuring consistency and compatability
3. PROVIDE A SIMPLE AND DELIGHTFUL USER EXPERIENCE THROUGHOUT THE ENTIRE SHOPPING JOURNEY
Make sure users are aware of any item available for preorder
Provide information regarding the item for preorder throughout every step of the user journey (label, shipping time, etc.)
MAPPING THE SHOPPING JOURNEY
Another important step I took before diving into wireframing was mapping the entire user shopping journey for desktop, mobile web, and app. I accomplished this by visiting the Express site on each platform, noting each step of the user flow from landing page to purchase and capturing these screens.
​
Doing so allowed me to better visualize and ideate where a user would want to see preorder labels and other preorder information. For instance, it was important to label a product's preorder option on the product listing page, product detail page, in cart, throughout the payment process, and finally on the order confirmation page.
​
Documenting such touchpoints and user interactions allowed me to gain a strong understanding of the Express shopping experience and how a preorder feature could successfully be integrated within it.
RESPECTING MY NDA, THIS VISUAL IS NOT PUBLICLY AVAILABLE YET...
Feel free to email me if you'd like to view the visual assets of this project with me.
IDEATION
PREORDER LABEL
First and foremost, I experimented with how the preorder label might look like on different steps of the user shopping journey. I explored different font sizes, font weights, colors, container boxes, underlines, and more.
PREORDER INFORMATION COPY
Next, I explored different ways to represent the necessary information that would be provided to the user regarding a preorder item. From shipping time to estimated arrival dates, it was important to find the right copy to include within these wireframes.
WIREFRAMING
LOW-FIDELITY WIREFRAMES
After ideating on preorder label and preorder information copy options, I designed some low-fidelity wireframes on Adobe Sketch so that I could better visualize how they'd look like with the rest of the website/app's components such as images, copy, etc.
​
Then, I presented these options to the rest of my design team in order to gain feedback. After discussion, we gained alignment and agreed upon final designs to move forward with.
HIGH-FIDELITY WIREFRAMES
Once the final designs were validated, I went ahead and created high-fidelity wireframes on Adobe Sketch for the entire user shopping journey, including the product listing page, product detail page, in cart, payment, and order confirmation. I designed wireframes for desktop, mobile web, and app.
RESPECTING MY NDA, VISUAL ASSETS ARE NOT PUBLICLY AVAILABLE YET...
Feel free to email me if you'd like to view the visual assets of this project with me.
IMPACT
PRODUCT SUCCESS
This feature has not been shipped yet... stay tuned!
MY THOUGHTS
This project was definitely challenging, as it required an abundance of research, iteration, and wireframing. However, it was definitely rewarding to see my research findings and design explorations manifest themselves within the Express shopping platforms. Better yet, it feels good to know that my design work will alleviate a multitude of business problems while also helping customers reap benefits.
​
As an avid online shopper myself, this project provided a great amount of insight into mechanics and features that go into a successful and delightful user shopping experience. Knowing that I'll impact both a company in addition to millions of shoppers like myself puts a smile on my face and is just another reason why I love design.
WHAT I LEARNED
-
How to conduct competitive audits
-
How to conduct research based on UX articles and UX benchmarks, utilizing best practices
-
How to wireframe across platforms
-
How to successfully use a design system
-
How important it is to keep up with industry standards