Adastria Staffboard - Revolutionizing E-commerce Styling for Increased Engagement and Sales

Project Overview:

Adastria is a leading retail brand in Japan, operating a chain of clothing stores with a strong online presence. In the wake of the COVID-19 pandemic, consumer shopping behavior dramatically shifted, with online shopping becoming the new norm. However, online shoppers face significant challenges, overwhelming choices, the inability to try on clothing, and difficulty in assessing how garments fit or look in real life.

Adastria Staffstart is an internal mobile application designed to help store staff curate and showcase personalized styling suggestions. By uploading styling images, videos, and product combinations, store staff provide valuable insights, allowing customers to visualize how products are worn and styled. This bridge between the virtual and real-world shopping experience helps customers make more informed purchasing decisions, leveraging the fashion expertise of store staff.

Challenges:

While Staffstart was functional, it had several limitations that needed addressing:

• The current version of the app was operated by a third-party vendor, which made it difficult to implement feature updates or improvements.
• Staff found the app difficult to navigate, detracting from their ability to post styling suggestions effectively.
• Given that styling posts accounted for approximately 70% of Adastria's sales, it was critical to improve the application to enhance staff engagement and streamline the posting process.

Our goal was to design a more intuitive and feature-rich mobile application that would empower Adastria’s staff to post styling content with ease, motivating them to engage more regularly with the platform and boost overall sales.

Design Process:

1. Research & Discovery

The first step in the design process was conducting extensive research to understand the users’ pain points, expectations, and the features that would enhance their experience. Since the application was already in use, we focused on analyzing the current version and gathering insights directly from the staff who used it daily.

We started by holding several rounds of meetings with the client’s team, a mix of stakeholders and actual users. The clients provided valuable insights into how the current app was structured and which features they wanted to enhance or add. These initial conversations led to a clearer understanding of the objectives, and it was evident that the staff needed a simplified, more intuitive interface.

Key Insights Gathered from Staff:

• Motivation to Post: Staff were seeking incentives or features that could motivate them to post more frequently.
• Account Management: The ability to manage multiple accounts (personal and store accounts) in a seamless manner was a common request.
• Post Preview: A preview of the post, as seen by end-users, was essential for ensuring that posts were visually appealing and correctly formatted before going live.

User Pain Points:

• Complex navigation and cumbersome posting process
• Lack of real-time feedback or preview of posts
• Difficulty in switching between personal and store accounts

We also explored other fashion apps and e-commerce platforms to identify best practices in the industry and gain inspiration from successful solutions.

2. Feature Refinement & User Flow Creation

With the gathered insights, we refined the core features and designed an optimal user flow. Since posting content—whether it be a styling suggestion, seasonal collection (cumulation), or customer satisfaction (CS) video—was the most frequent task, we centered the app around a streamlined process for creating and managing these posts.

User Flow:

The user flow outlined the various tasks a staff member would need to complete, from logging in and selecting content types to editing posts and publishing them. This was crucial in understanding the steps involved and optimizing the number of actions a user would need to take to complete their task.

The flow also highlighted the various user scenarios, ensuring we accounted for edge cases like switching between multiple accounts or dealing with media uploads. We mapped this out to ensure every interaction was as intuitive and efficient as possible.

3. Iterative Design Process

The design process was iterative, with multiple rounds of sketching, wireframing, and feedback collection. We began by sketching out ideas to quickly visualize potential solutions, focusing on key features like easy account switching, content creation, and post-preview capabilities.

Sketching & Wireframes:

We started with low-fidelity sketches to explore layout and interaction possibilities. These were then translated into medium-fidelity wireframes in Axure RP, which served as the blueprint for the application’s structure and flow. The wireframes were initially created in English, discussed internally, and then translated into Japanese by a bilingual business analyst for the client’s review.

The wireframes focused on:

• Simplified user flows for content posting
• A post-preview feature to ensure posts appear as intended
• Account management tools for switching between personal and store accounts
• An achievement-based gamification feature to motivate regular posting

Mid-Fidelity Wireframes:

After sketching some ideas to figure out what the interface will look like, I started creating the medium fidelity wireframes in Axure RP. Wireframes were initially created in English, which were internally discussed with the development and the design team. Then the wireframes were converted to Japanese with the help of a bilingual Business Analyst and those were the client deliverables. Below are some medium fidelity wireframes that were created.

4. User Testing & Feedback

After finalizing the wireframes, we conducted usability testing with a sample group of Adastria staff. Task scenarios were created to evaluate the usability and effectiveness of the design. These tasks included:

1. Creating a new styling post
2. Editing a list of products used in the styling
3. Unpublishing a previously published post
4. Recording and uploading a CS video within a 15-second time limit

Staff members were observed performing these tasks, and their feedback was recorded to identify any friction points or areas for improvement.

5. Visual Design & Final Refinements

Once the wire-frames and user flow were validated, we moved to the visual design phase. The goal was to create a visually appealing and easy-to-navigate interface that would resonate with the Japanese market and Adastria’s brand identity. The design was minimalist, focusing on clean, simple navigation with high-quality imagery and intuitive controls.

Key Visual Design Features:

• Clear, easy-to-read typography and color schemes that aligned with the brand’s aesthetic.
• Responsive layouts for different device sizes to ensure a consistent experience across platforms.
• Incorporation of gamification features, such as badges and achievements, to encourage staff engagement and regular posting.

6. Conclusion & Results

The redesign of Adastria Staffstart was a significant success. By addressing the core pain points of the original application and streamlining the user experience, we created an app that not only met but exceeded expectations.

Key outcomes:

• Increased Staff Engagement: With a more intuitive and user-friendly interface, staff were motivated to create and upload content more regularly. The gamification elements, such as achievements for frequent posting, contributed to this.
• Higher Conversion Rates: The enhanced styling posts led to an increase in customer engagement, allowing users to better visualize the products and make informed purchase decisions.
• Improved Sales: After the relaunch, Adastria reported a significant increase in sales, attributing it to the improved user experience and higher-quality styling content.

The application has since become a key driver in Adastria’s e-commerce strategy, helping them establish a stronger presence in the competitive Japanese market.

Key Takeaways:

• Iterative Design Process: Constant feedback and iteration were critical in fine-tuning the app's usability and ensuring that it met both user and business needs.
• Cross-functional Collaboration: Working closely with the client, development teams, and stakeholders helped us deliver a solution that was both technically feasible and user-friendly.
• Cultural Sensitivity: Understanding the cultural context and language nuances of the Japanese market was vital for ensuring the app resonated with its intended users.

This project was a valuable learning experience, demonstrating the importance of user-centric design, collaboration, and flexibility in the face of evolving requirements.