Fashion Empowerment through User-Centric Design: A Case Study on Building a Blogs and Articles Section in AJIO for Seamless Fashion Choices

Problem Statement for the 48-hour Product Design Challenge

The following case study is my attempt as part of a 48-hour product design challenge.

The app that was given to me to work on was AJIO (an online fashion brand).

Problem Statement: “Add a feature where users can find blogs and articles about the latest and trending topics related to the product or brands.”

Final Solution:

FInal solution Developed within the 48 hour timeline

Decoding the Problem Statement: When I was assigned this problem statement, I thought about what I would do if I were a product designer at AJIO. With my previous learnings, I was sure that I had kept the user first in mind before I pondered ways to implement the solution.

To understand more about the problem, I looked into various aspects of how other fashion-oriented platforms were helping users decide using various methods like influencer marketing, suggestions, and curated content by experts in the field by using community features within the app.

I also went on to understand how these features helped the user and the business.

The user experience would improve in the following ways:

1. Articles and blogs provide up-to-date styles in the fashion industry.
2. Users could find inspiration for their looks.
3. Users can discover new brands through articles.
4. They can get curated content based on their likes and also get guidance from their fashion icons on the platform.
5. They can experience an enhanced shopping experience.

The business metrics that would improve by introducing features like blogs and articles related to the products were:

1. 👥 Increased user engagement.
2. 📈 Higher Retention Rate
3. 💹 Improved Conversion Rate
4. 🧲 Attracting New Users
5. 💰 Monetization Opportunities.
6. ⇈ Higher average order value.
7. ⏳ Increased session lengths.
8. 💵Upselling higher token items.

With the above sketched out, I proceeded to think about how I could incorporate a feature into AJIO. To understand how other businesses in the same domain were utilizing the same or similar features, I went ahead and identified the following apps:

Competitive Research

1. Myntra:

After a bit of discovery and navigation, I came across Myntra Studio, a dedicated section of the app where users' favorite influencers add content related to fashion and accessories. The users benefit from the tailored content as they can relate better to their idols endorsing a particular brand. This helped users with social proof and upselling the brands that the influencers recommended. The business would have a large impact as it also involved live sessions by the influencers, thereby increasing the session length of the users. I made the following notes based on the observations I could make on the screen:

1. The UI looked similar to Instagram, helping any user adapt easily.
2. The page also had multiple CTA buttons, which were persuasive for the user to take the necessary action.
3. The user could visit an influencer's profile and see his or her recommended products.
4. The product page would be an overlay and not a full page, thereby keeping the user within the flow and allowing them to add the product to the shopping cart.

2. Nykaa Fashion:

The second app that I referred to for inspiration was Nykaa Fashion. It did not have anything in terms of curated content for users that could help them make informed decisions about their shopping experience. Although Nykaa had a full page dedicated to brands explaining the brand story and having a dedicated product category for that brand,

3. Meesho:

The Meesho app had a dedicated section for a community where users could look for inspiration, see product showcases, and also post their own content, allowing them to share their wardrobe suggestions more freely. Things I took inspiration from for my solution from the app were:

1. The UI was again similar to Instagram's.
2. The users could post their own content.
3. The user has the option to like, share, and comment on the posts made by community members.
4. Users have the option to filter content based on categories.

With all these points noted down, I proceeded to identify the ways in which I could introduce long-form content on the platform, which was not the same as other apps.

Things I had to keep in mind while I worked out a solution were:

The solution should be engaging.

It has to be helpful to the users.

It should be placed in a manner that has the highest click-through rate and visibility for the user.

The solution should facilitate the business metrics identified earlier.

The solution should give freedom to the users in terms of liking, saving, and sharing the articles.

The addition of the feature should not disturb the existing user flow.

The critical decisions I took during this product design challenge are:

Decision: placement of the banner for the articles.

The thought process: The aim of the banners was to have high discoverability by users, which would encourage more users to use this feature to buy products on AJIO.

Options:

I had the following options to place the banner or card for the articles.

Option 1:

HOME SCREEN/LANDING PAGE: The most obvious option to introduce a new feature would be on the home screen.

Did it work?

I did not choose to have the article placed on the homescreen as it had many other campaigns running and placing it on the homescreen would not have the targeted impact that I anticipated.

Option 2:

My next option was to add the article option to the bottom navigation bar.

Did it work?

The AJIO app already had five options in the bottom navigation bar; hence, I could not integrate the article or blog section.

Option 3:

Upon much deliberation and thought process( the idea I was looking for was where I could have the largest impact on the user by using the feature), I placed the article card on the product listing page.

My Assumptions while choosing this option was

1. The user is on the product listing page and needs some guidance in terms of choosing a particular product or help with the trending styles.
2. The placement of the banner after a few listings will help break the monotony of scrolling.
3. The product listing page has the highest discoverability, as the card can break the screen configuration and offer some variety.

Did it work?

Well, according to my hypothesis, it did work, although the usability tests would need me to tweak the design to catch the attention of the user.

Once I decided to place the card on the product listing page, I then had the challenge of creating a whole new screen to accommodate the articles and blogs. With the time in hand, after I had spent some time understanding the problem, I took one use case for the article, and that was to show an article for trending weekend looks for men.

While designing the article page, I started to wireframe a few possibilities of how the page should be designed, as I knew this had to be for long-form content and I wanted the user to read through the whole article.

A few of my wireframes are shown below.

When it was time to decide which configuration to choose, I quickly connected with a few of my peers, and by showing them the possible layouts, I quickly gained opinions that helped me decide on the layout.

Learning: I learned that using low-fidelity designs helped me gain clarity and understand perspectives before I developed a high-fidelity design.

Critical Decision 2:

Configuration of the screen for the article feature.

I had a few layouts in consideration:

Option 1: Have the product pictures on the top of the screen and have a tab configuration for the article and the product details.

Did it work?

This option would not be ideal as the user might just directly reach out to the products tab, and the article might not be read or seen by users.

Option 2:

The other option I came up with was to have distribution between the product pictures and the content; this way the user would not have to be overwhelmed by the long-form content, and with breaks in between the text by having product pictures, it would be visually balanced and help the user to read the long-form content in chunks!

Did it work?

Users in usability testing did not find the article too long or overwhelming to read.

UI :

I kept very clear on my decision to follow the existing design system through all the new screens I planned to introduce to the user flow.

I identified the elements on the screen that could be designed as components and variants in Figma so that I could make the most of my available time.

I used component sets of the product images to be used in product cards.

I made components of the product card description, and by adding content properties, I could easily modify any instance of that card as required.

The above video shows the first cut of the UI I created within the first half of the PDC.

The same UI was used for usability testing with users who were chosen at random with no prior interaction before this test.

The observations that were made during the testing are as follows:

Screen 1 (Product Listing Page):

1. The banner was clearly identified by the users.
2. The banner could have had better wording to catch the user’s attention.
3. The banner broke the monotonous grid on the product listing page.
4. The user felt there was a difference before and after the banner was introduced on the page.

Screen 2 ( All New Article Screen):

1. The users really liked the layout of the page.
2. They did not feel overwhelmed by the long-form content, as the reading was interwoven with product pictures and suggestions.
3. The option to wishlist the products was liked by the users.
4. Users did mention that they would appreciate the details of the author and the options to share, like, and save the article.
5. Users felt that if there was an estimated time to read option, it would help the user decide.

Screen 3 (Recommended Products Page):

1. Users really liked that the screen was pop-up and not full-screen.
2. They really liked that they could get back to reading the article once they had explored the recommended products.
3. Users said they lacked the wishlist option, unlike Myntra.
4. Users also expressed they would like to see a rating and bought number proof on the product card as it would help them choose better.

Screen 4 ( Existing Product page)

1. Users were familiar with the product details page.
2. There was no intervention from my end on this screen.

Post Usability Testing:

I learned a lot after the usability testing was complete. I realized how important it is to do usability testing to gain perspective on the designs that I have made. I realized that even when the design made sense to me, it was not the same for the user.

The realization was that the designer in me had taken over the thought process rather than being user-centric and keeping the user in mind.

With the suggestions received, I decided to take up only a few of the lists. Following were the changes that were made:

1. Introduced animation and used better text for the banner on the product listing page.

Article Page:

1. Introduced fields like author, the time required to read, like, share, and save buttons for the article.
2. Highlighted the "trending products section to promote better discoverability.
3. At the end of the article, I added links to similar content if the user wished to explore more of the section.
4. I introduced the "back to top floating button to help the user reach the top of the article.

Recommended product page:

1. Added a wishlist option derived from the existing design system of AJIO.
2. Added social proof with the help of a star rating and a recent number of purchases made on the page.
3. Created dedicated headings indicating that the products shown were recommended by the author/influencer.

UI Post Usability Testing

Future Scope:

Overall the feature I worked on introducing has great potential in helping users to make informed choices and also empowering them by keeping them informed about the latest trends and styles in the fashion industry!

1. Develop full-fledged features with sections such as live feed, articles, and curated content by users' favorite influencers.
2. This feature can also benefit the business of AJIO by increasing user session lengths, Average order value and also cross-selling high token products based on recommendations.