ABLO

Ablo prides itself in their mission: Design for all. To kickstart their goals, they needed a fresh and innovative AI-driven product that could allow users to generate custom designs with a simple tap.

Brightscout partnered with Ablo to lead a six-week MVP design sprint, clarifying touch points in all areas from UX through UI and visual designs, allowing Ablo to hit the ground running to change the way we approach fashion design.

Unifying ideas through collaborative workshops

To begin the sprint, I hosted two UX workshops with the Ablo team aimed at clarifying and solidifying the core experience of their envisioned product. Taking a collaborative approach, we created and grouped ideation cards into concrete user journey points, allowing the flow of the product to naturally create itself.

We worked with Ablo to define and solidify user flows, cementing the journey through the design generation tool. We also performed rapid user interviews to understand how best to tailor our experience. Using the information gained, we defined three core sections of the Ablo experience to design for:

Selection

How might we create an efficient and informative process of selecting an item to design on?

Generation

How might we utilize the capabilities of AI to support boundless creativity and creation?

Output

How might we create artifacts both intangible and tangible- allowing users to bookmark their experience however they choose?

A bold yet inviting approach to fashion design

The Ablo product presents a clear opportunity for fashion design generation. Starting from the home screen users can easily launch into the trial generator process, which begins by selecting a product.

The material catalog can be looked through by multiple different filters or sorting options, and can easily view the details of their chosen product before proceeding.

As the most crucial part of the experience, the AI design generation was created to be as seamless as possible. Once a product is selected, users are taken into a full-scale design creation space that puts creativity at their fingertips.

Users can freely control the view of their chosen product through the control bar at the top of the screen, and can adjust the coloring, view, and design area to their exact liking.

Design generation is divided into three sub-stages: style, mood, and subject. At each stage, users are provided visual cues as to how they are building their customized design, with the subject section being the most open of the stages to allow for user creativity to fluorish.

Once inputted, the AI generator creates three different designs for a user to choose from. Alternatively, users can generate an entirely new design, similar designs to what they're shown, or start over, allowing openness in the design creation process.

After generating and placing a design, users have the option of sharing their new creation to socials or ordering it directly to themselves. The process allows for the addition of multiple colorings of the product, allowing orders to span from individual to bulk seamlessly.

Battle tested. User approved (well...mostly)

A crucial part of the process was being able to test with real potential users, aggregating feedback and utilizing it to update and tweak our designs. Designs were tested through unmoderated sessions, with two groups of participants: one knowledgeable in fashion design, and the secondary group outside the world of fashion. Though feedback was majority positive, there were a couple key points of potential improvement noted as a result:

Clarifying design generation

All participants were able to complete the desired tasks set up during the test. However, feedback during the design generation section of the flow was less than optimal. Participants felt that the experience was trying to balance too many things in one consolidated group, leading to a lack of hierarchy and clarity in how to proceed.

We took this feedback and discussed it directly with the Ablo team, utilizing collaborative improvements to tweak our UI to have a more solidified hierarchy that focuses more on freeform input supported by trending keywords, rather than trying to do a million things in one.

Tightening design editing

Though the initial designs accomplished the task of allowing users to add additional graphics such as text and images to their generated images, feedback from participants noted that the latter half of the design generator felt clunky and hard-to-use. UI elements were spaced out oddly, causing the interaction design of the product to suffer.

Utilizing direct feedback as well as thumb mapping and interaction points, we restructured the UI to provide a clearer hierarchy to the design generator, allowing users to add to their designs in a manner that felt more intuitive and seamless.

Expanding towards a B2C environment.

In addition to the initial B2B experience, Ablo expressed a desire to connect directly to consumers by expanding design generation out towards an individual creation process. Though much of the core product remained the same, several features for individual creators were designed out and packaged along with the final Ablo product:

Listing a design

Once individual creators design their product, they have the opportunity to list it within the Ablo marketplace. Users have control over the pricing, buying options, and more.

Reviewing ordered products

Collecting and hosting feedback was a crucial part to the B2C experience, especially as users bought and experienced the tangible products of the brand. Feedback collection is simple and concise, allowing users to easily contribute their thoughts.

Results

By the end of the project, Ablo had a fully designed experience for both their B2B and B2C initiatives, allowing them to move forward with potential investors as well as custom fashion brands interested in partnering with them to create exclusive experiences for their customers.