REDESIGNING PLUI'S WEBSITE
Children's Clothing E-commerce
Lead the UX Design and UI Design Process
E-COMMERCE REDESIGN
PLUI is currently experiencing production and product return challenges due to limitations with its website. The existing site prioritizes information over functionality, leading to a higher reliance on phone orders for purchases. The redesign of the e-commerce platform aims to streamline online purchases and eliminate the need for phone orders.
My Role
I was responsible for overseeing and guiding every aspect of user experience and interface design.
Tools
Illustrator, Figma, Balsamiq, WIX
ABOUT THE BRAND
PLUI's vision is for children to learn about nature, align with current trends in children's education and environmental awareness, and develop empathy and love for it through everyday items like clothing, backpacks, and toys. The brand has created more than 20 animal characters, each with a range of related products. Children adore these characters, which have gained widespread popularity, boosting the brand's appeal. Parents value PLUI for its outstanding product quality, which includes durability, unique designs, and market differentiation.
Timeline
14 weeks (2022)
PROJECT OBJECTIVES
-
One of the brand's primary goals is to educate through the use of their characters. Therefore, it is crucial that the website effectively showcases the different characters and their associated products.
-
Simplify the e-commerce layout and organize content to facilitate user exploration and understanding of the product range in the catalog. Implement interactive and user-friendly navigation features to enhance user engagement and ease of browsing.
-
Ensure clear indication of product availability to manage user expectations regarding stock availability.
-
Create a user interface that reflects Plui's playful brand identity to enhance user interaction and browsing experience.
WHAT IS?
Understanding the Current State of the PLUI Website
Interviewing Stakeholders
To understand the objectives of the brand's website redesign, I interviewed the owner, 3 clients and 2 distributors of the products, to inquire about the specific goals, the current website situation, and any issues the brand was experiencing.
Key Findings
Children are familiar with the brand characters and want their parents to buy items featuring their favorites. However, parents often find it challenging to identify and choose the characters their children prefer. They feel overwhelmed when browsing through the product catalog.
Some customers have difficulty determining the correct size to buy, leading to a high number of returns.
Because the brand accepts phone-based orders, it frequently faces issues with out-of-stock items. This directly impacts its ability to ensure timely production leading to inconsistent product availability.
USABILITY STUDY
I conducted in-depth usability testing with four real customers to evaluate PLUI's e-commerce website. The objective was to assess how easily users could find products, complete purchases, and navigate the site.
A think-aloud protocol was implemented throughout the sessions, encouraging participants to verbalize their thoughts while completing the task of purchasing a rain cape for a child.
What Works:
-
The color scheme is bright and vibrant. The website has a playful vibe that aligns well with the children's audience.
-
Icons for navigation (e.g., language flags, contact, store) are recognizable and intuitive.
-
The product images effectively showcase the products by category.
What Doesn't Work:
-
The website does not effectively showcases the different characters and their associated products.
-
Text are hard to read due to the font style and color contrast.
-
The layout is quite busy, with many elements competing for attention.
-
There are no clear call-to-action (CTA) buttons.
-
The landing page is purely informational, lacking an inviting call-to-action for online purchases, and fails to specify available products, causing confusion.
-
Important elements like detailed product information, usage instructions, prices, and key features are missing, which are essential for inviting users to purchase the products.
-
The layout for category listings can appear boring and monotonous, and it may prioritize products that are better positioned within the layout, potentially overshadowing other items.
-
The available products do not match those shown in the category photographs, which can confuse users between similar items (for example, buying a towel instead of a rain cape).
-
The product information does not provide any guidance on sizing.
WHAT IF?
Developing the website concept, and brainstorming features possibilities.
PERSONAS
EMPATHY MAP
HMW incorporate visual aids to help Camila understand the size and fit of products better?
VALUE PROPOSITION CANVAS
How Might We (HMW) create kid-friendly navigation with parental approval features that allow Olive to easily find and show his parents the products he likes?
VALUE PROPOSITION CANVAS
HMW ensure the website provides real-time inventory data to help Beatriz manage her stock levels effectively?
GOAL STATEMENT
To develop an innovative and user-friendly e-commerce platform for children's clothing that:
Offer intuitive, engaging, and visually appealing navigation features designed specifically for children, empowering them to independently find and share with their parents the products they love.
Provide accurate size information and trustworthy fit recommendations to help users confidently find the correct sizes for their children.
Streamline easy bulk purchasing and implement efficient inventory management for store owners, ensuring they can keep their store stocked on time.
BRAINSTORMING
Engaging Navigation:
-
Enable users to search and browse by the brands characters, facilitating an easier discovery of the products
Bento Boxes Layout
-
Allow users to see multiple categories at once without any interaction.
-
The grid layout can take up a lot of space, potentially requiring users to scroll down significantly to view all categories.
-
The uniform layout might highlight or prioritize specific categories.
-
Highlight specific categories one at a time, making each category stand out but not competing with each other.
-
Add a dynamic Interaction.
-
Useful for space efficiency.
Carousel Layout
Streamlined Bulk Purchasing:
-
Clearly outline the benefits of bulk purchasing
-
Incorporate inventory management features with real-time stock-level updates.
-
Easy Reordering:button for frequently purchased items and utilizing past order templates for quick and easy reordering.
WHAT WOWS?
This phase encompassed explaining the prototype's solutions to specific problems, highlighting key features and interactions, and detailing the reasoning behind their design.
LO-FI PROTOTYPE
To ensure equal visibility for all the brand characters, I chose to present them in a wheel carousel format, enhancing user engagement and interaction with the characters. This layout prevents any bias towards specific characters, allowing equal access to all characters in a balanced presentation.
PROTOTYPE
Kid-Friendly Navigation
-
The clean, minimalist design with a black and white color scheme reduces visual clutter and focuses the user's attention on the product categories.
-
The navigation elements are clearly labeled with intuitive titles and recognizable Icons.
-
The presence of clickable navigation arrows for browsing suggest interactive elements.
-
The prominently displayed "Title" prompt at the top center guides users on the expected action.
-
Implement a "Share with mom" button, enables Kids to save and share his favorite products easily.
-
The UI prominently displays product categories such as "Jacket," "Towel," "Rain Cape," and "Bib," making it easy for users to identify and select the type of product they are interested in.
Size Information Chart
-
Provides a clear and direct context about the page's purpose, helping users immediately understand what they need to do.
-
Visual icons facilitate quick identification of the type of garment the user is looking for. This improves navigation and reduces the time needed to find the desired information.
-
Provides a visual reference to help parents visualize how the garment will look on their children.
-
The buttons are clearly visible and easy to interact with offering a simple and quick way to select different sizes.
-
Provides all necessary measurements of each size in an organized and easy-to-read manner. This helps parents compare their children's measurements with the garment measurements to find the perfect fit.
Distributor Portal
-
Provides clear and direct context about the page's purpose, helping distributors immediately understand that they need to select a product to continue.
-
Offers a personalized experience, making users feel valued and recognized.
-
High-quality visual images help distributors quickly identify products, facilitating navigation and decision-making.
-
Provides essential information at a glance, helping distributors quickly evaluate products without needing to click on each one for more details.
-
Left and right arrows allow users to explore product details seamlessly without reloading the page, enhancing navigation efficiency.
-
The My Account link enables users to manage their personal information effortlessly, track orders, view purchase history, and update preferences.
-
Provides users with immediate support, answers to their questions, and assistance with any issues they may encounter.
-
Allows users to quickly access their shopping cart, facilitating the review and adjustment of their orders before the final purchase.
-
Provides clear context about the product being viewed, helping distributors confirm they are looking at the correct item.
-
The product's price is prominently displayed and highlighted, enabling distributors to quickly assess the cost. This interactive text updates based on the selected quantity, showing users how the price changes with different quantities of products.
-
Visual icons facilitate quick identification of the different product variants, improving navigation and selection.
-
Provides essential information that helps distributors better understand the product and its characteristics.
-
High-quality images allow distributors to see the product in detail, facilitating informed decision-making.
-
Enable distributors to add the product to favorites or share it easily, facilitating management and collaboration.
-
Allows distributors to access a detailed measurement chart, helping ensure they select the correct size for their needs.
-
Provides a clear and visible way to select the desired size. The highlighted button indicates the currently selected size, helping to avoid confusion and errors.
-
Allows distributors to easily adjust the quantity of products they wish to purchase. The increment and decrement buttons provide precise control, while the numeric input field displays the selected quantity.
-
Provides essential information about the product's availability in the selected size. This helps distributors plan their orders and ensures they do not attempt to order more units than are available.
USABILITY TESTING
I developed a Hi-fi prototype using Figma and subsequently conducted a user test involving three participants.
In order to guide them through the tasks and assess the interface's usability and effectiveness, I interacted with each participant individually through Zoom video calls, during which calls they shared their screens with me.
TEST #1
TASK: Purchase a raccoon rain cape.
USER: Working mom of 2 kids
1. Feels overwhelmed by not knowing how many characters she needs to browse through.
2. Mentions that the product labels are not sufficiently visible.
3. After searching different products, the participant would like a way to remember which product is currently chosen.
CORRECTIONS
1. I implemented the use of a scrollbar that provides a visual cue indicating how much content has been viewed and how much remains.
2. I relocated the product labels to a more prominent and clear position.
3. I've placed a button that links to the product selection page, which also displays the currently selected product.
TEST #2
TASK: Purchase a raccoon rain cape, verify which is the correct size for a four year old kid.
USER: Woman looking for a gift
Although the title of the page aims to outline the effective use of the size measurement tool, it failed to grab attention as intended. Subsequently, the user attempted to navigate through the tool by clicking randomly across the interface.
CORRECTIONS
The interface is designed to lead users through a step-by-step process for easy tool comprehension. Initially, features will be disabled to simplify the user experience and will be enabled gradually as each step is completed.
TEST #3
TASK: Purchase 10 Armadillo Jackets through the distribution portal, verify the discount and pay for them.
USER: Owner of a children store
The reseller was able to complete the task.
The biggest issue with the user interface was that the check out button was hidden, and it wasn't clear in the prototype that the page could be scrolled down.
CORRECTIONS
1. Relocate the price display closer to the product quantity section to clearly indicate price changes when the quantity of products is increased.
2. Utilize more white space to create a cleaner and more organized look.
3. Move the stock information closer to the quantity selection button on the interface and highlight it with a distinct color to make it more noticeable.
WHAT WORKS?
This phase detailed how the prototype evolved to meet project goals and user needs by incorporating feedback from the testing phase.
PROTOTYPE
The interface is simple, with clear, large buttons and straightforward instructions that are easy for children to follow. This reduces the chances of confusion and ensures that the checkout process is smooth.
The feature includes comprehensive size charts, measurement guides, and a virtual view tool. These resources are designed to assist parents in making informed choices when selecting product sizes, ensuring a more accurate fit for their children.
The feature showcases cost savings for bulk purchases by displaying decreasing unit prices based on the quantity ordered. It also provides real-time stock information, ensuring product availability. This enables store owners to make informed purchasing decisions and helps PLUI avoid issues with out-of-stock products.
EXPECTED OUTCOME
The expected outcome for the PLUI e-commerce is to enhanced Customer Satisfaction:
-
Precise Size Information: Parents can confidently purchase the correct sizes for their children, reducing returns and increasing satisfaction. This accuracy also boosts sales as customers are more likely to make repeat purchases.
-
Bulk Purchasing Efficiency: Store owners can easily manage their inventory and make bulk purchases, leading to more efficient operations. This efficiency attracts more wholesale buyers, increasing order volumes and revenue.
-
Kid-Friendly Interaction: A user-friendly and efficient checkout process designed with children in mind ensures easy navigation and a pleasant shopping experience.
-
Competitive Advantage: Offering a tailored shopping experience for parents, store owners, and children sets the platform apart from competitors, attracting a wider audience and building a strong market presence.
REFLECTION
Engaging with the PLUI e-commerce platform project has been a rewarding and multifaceted journey. Tailoring solutions meticulously has been crucial in creating a personalized shopping experience for a diverse range of user personas. As a result, my understanding of user-centered design has deepened, challenging me to think creatively and empathetically, prompting consideration of user emotions and preferences in each design choice.
The project’s complexity required a holistic design approach. Navigating the unique requirements of diverse user groups presented challenges and infused excitement into the project, fostering a dynamic and engaging environment where collaboration and idea exchange thrived. This challenge propelled me to think about comprehensive solutions such as personalized features based on user preferences and tailor the interface with intuitive navigation to meet diverse needs. For instance, adjusting design strategies in response to user feedback refined my problem-solving abilities and underscored the importance of flexibility and adaptability in crafting user-centric solutions.