Building brand narratives of recent and upcoming products in AJIO: a design solution
The current version of the AJIO fashion mobile app lacks a compelling platform for businesses to showcase their recent and upcoming products through brand stories. Eventually, resulting in limited user engagement and lower retention rates. This absence of an engaging brand story feature hinders the app’s ability to improve brand metrics, user engagement, and retention, creating a need for a solution that enhances the overall user experience.
🎯Solution: designing a story feature for the app
A stories feature tailored specifically for the AJIO fashion app, showcasing their latest/upcoming products through brand stories.
- About AJIO: an Indian fashion and lifestyle e-commerce platform that offers a wide range of fashion and lifestyle products from various categories such as clothing, footwear, accessories, and more.
- Assumed user group: Daily users of the AJIO app.
- Assumed user needs: a user wants to view recent and upcoming products from a newly added stories feature of a particular brand of their liking, hence experiencing richer engagement.
By incorporating this solution feature, the e-commerce landscape is transformed, offering users a more personalized and exciting shopping experience. I am thrilled to present this case study, highlighting the detailed process and the positive outcomes achieved. This not only helps the user but will also elevate the brand recognition amongst the users.
☮️TL; DR. Here’s a glimpse of the final solution
The newly introduced feature is located on the landing page, below the first fold, and guides users to view recent and upcoming products via brand stories.
❇️User interface breakdown
Let’s have a quick go-through of the final solution built for the given problem statement.
Link to final prototype: click here
❇️Experience the captivating transformation from original to pre and post-iteration designs!
Let’s establish clarity over what was originally present, the face of the first solution, and what all went under iteration for the outcome. Things of importance are emphasized below.
The Original Design
Analyzing the original design made me understand how users were lacking the ability to see upcoming products, and hence all other actions proceeding with it such as prebooking, adding to wishlist, etc. were missing.
The First Design
The first design solution post-wireframing was done keeping in mind the user needs. I tried to fill in the gaps in the original design of the app concerning the stories feature. Focus was on bringing visibility to this newly introduced feature and making it easy to understand among users.
The Final Design
Usability testing made me realize areas of needed attention and unnoticed user needs. Therefore, the improvements done post-iteration are mentioned below.
❇️3 Critical decisions that shaped my design journey
1️⃣ My first critical decision was to decide on the placement of the new story feature.
Why is placement important?
1. Help users discover the newly introduced feature.
2. It is an attempt to add to brand metrics, therefore a correct spot will help increase brand recognition.
Use Case 1:
Placement of the feature on the first fold of the screen.Hypothesis 1:
Add a new feature at the top of the first fold of the screen
• familiar location for users
• higher visibility to users
Any other possible placements on the first fold?
I evaluated the second use case since hypothesis 1 didn’t work out.
Use Case 2:
Placement of the feature in-between first-fold and bottomHypothesis 2.1:
Vertically rearrange some elements to create real estate
• create space by removing a few brands
• re-use those brands in the new featureHypothesis 2.2:
Move the feature to the next page
Here’s a sneak peek of the placement done for the final design.
Use case 2 holds a possibility, but I had to evaluate the third use case as well.
Use Case 3:
Placement of the feature at the bottomHypothesis 3:
Vertically place the feature somewhere here at the bottom
• in the upper half
• or, in the lower half
Now that use case 3 could work out, I had to evaluate the discoverability of the feature if added here in this bottom region.
Will putting the feature here aid its discovery?
Therefore, the new feature will be introduced in the second fold of the screen, moving forward with hypothesis 2.1.
2️⃣ My second critical decision was to design the story page for users to view the story.
Why is design from scratch important?
1. AJIO deosn’t have any story page right now.
2. Already existing familiarity with the stories feature demands a new story page.
3. Adding a completely new page to the already existing design has to be done
carefully.
Use needs:
View and swipe/tap through different storiesDesign requirements:
Create a story page that has four elements
• story viewport
• story progress bar
• brand profile section
• user engagement section
After careful selection of the story viewport, I had to decide the type and placement of the story progress bar. It helps the user get the real-time status of the stories.
Once the story progress bars placement and type got finalized, I had to decide on where to place the brand profile section. Similar to a person’s profile, a brand profile is introduced to preserve the mental model of users concerning viewing or interacting with a story.
Now, I had to decide where to place the user engagement section. By this I mean a section where users can engage with the story via comment, like, save, or similar activities.
3️⃣ My third critical decision was to design changes in the already existing product listing page.
Why are changes required wrt recent and upcoming products?
1. Adding both products in same listing can cause confusion amongst users.
2. Upcoming products are not available yet, therefore keeping them separate.
3. Showcase two separate listings for recent and upcoming products.
Hypothesis:
Two separate product listings will reduce confusionDesign requirements:
Create two separate product listings
• recent products
• upcoming products
Once, the decision to introduce a separate listing was done, deciding the placement to add these new tabs was the next task.
Simply adding two tabs in the free header space might disturb the visual hierarchy of information within the product listing page. Therefore, to maintain the flow of information and create an uncluttered design, I had to decide whether the tabs stay on the right side or go to the left in horizontal placement.
Before adding new tabs, I had to decide what type of tabs will maintain the design language and consistency of the AJIO app. For that, I analyzed the existing elements on the page.
After going through the original design elements, I had to decide the type of tab design that matches the overall look of the product listing page.
❇️Simplifying the route, introducing components, and adding properties
Once working on the high-fidelity prototyping began, the importance of introducing a few components and related properties to simplify future complications became a must.
This decision was driven by the need to ensure consistency, efficiency, and scalability throughout the development and maintenance of the product.
Components added on Homescreen
Components added on Brand Story Page
Components added on Product List Page
❇️Let’s explore all the steps from start to finish
Phase 1
1️⃣ Understanding problem statement:
- Limited Product Visibility: Businesses face challenges in effectively promoting their upcoming products within the app, resulting in reduced visibility and potential missed sales opportunities.
- User Engagement and Discovery: Users are currently unable to conveniently access and explore brand stories showcasing recent and upcoming fashion products. This lack of an engaging and interactive feature restricts their ability to stay updated on the latest trends, discover new brands, and engage with visually appealing content that enhances their shopping experience.
- Competitor Advantage: Other fashion apps in the market already offer similar brand story features, providing businesses with a competitive advantage in terms of product promotion and user engagement. The absence of this feature in the AJIO app puts it at a disadvantage, potentially leading to decreased user retention and lower market share.
Before starting to design the solution, I assumed the user group and their needs regarding the new feature.
I asked ChatGPT to present a user flow for the given feature for more clarity. Here’s below the snippet from the conversation.
I thought of implementing the idea as mentioned below:
Initially thought of selecting a few brands from the AJIO app to add to the new brand story section. I started filtering out a few brands from the landing page.
So AJIO right now has various brands showcased on the landing page starting from the first fold. The brands I chose are the ones that are showcased in the upper half of the landing page.
2️⃣ Competitive analysis for needs:
After this, I did the competitive analysis to understand more about:
- Competitor's strengths, weaknesses, and unique features. This information helped me to develop compelling features for the AJIO app.
- This enabled me to stay updated on the latest market trends, customer preferences, and industry developments.
- Helped me identify unmet customer needs or areas where competitors have overlooked opportunities.
- Studying competitors’ user interfaces, features, and overall user experience inspired me with ideas for improving my product.
I chose Myntra and Decathlon for direct competitor analysis.
I chose Instagram and Youtube to understand more about stories and reels feature in general.
3️⃣ Structured information flow:
A structured information flow ensures that information is presented in a logical and organized manner, making it easier for users to comprehend and navigate through the content.
4️⃣ Wireframes to visualize:
Wireframing allowed me to visualize and outline the structure, layout, and interface of the product before moving into the detailed design phase.
5️⃣ Pre-iteration design solution:
High-fidelity design from the wireframing was to be done once the design consistency and design language of the AJIO fashion app was well understood.
UI elements and design requirements for the new feature:
• Icons
• Typography
• Colour palette
Selected Icons that can go with the current design of the app.
Declaring typography was important because it helps establish a consistent and cohesive visual identity for the design.
Declaring a color style was essential to establish a consistent and harmonious visual identity for the design.
Images of the final design before iteration.
Phase 2
1️⃣ User testing for validation:
The most crucial step was now to put the first design solution to the test. The outcome of conducting user testing:
- Identify Usability Issues: User testing helped me identify usability issues and challenges that users encountered while interacting with the product.
- Validate Design Decisions: I validated my design decisions by gathering feedback directly from users. It helped me determine whether the design met the needs and expectations of the target audience.
- Gather Actionable Feedback: Generated actionable feedback that called for design iterations. It provided specific insights into what worked well and what needed improvement.
I tested the design with two users.
2️⃣ Iteration was a must:
Post iteration I received a handful of insights. Some subtle underlying issues got highlighted after the iteration, alongside the issues outlined by the two users.
Iteration is crucial in the design process as it allows designers to refine, validate, and adapt their designs based on feedback and changing requirements.
❇️Exploring the future scope
- Focus on more engagement The future holds a dedicated brand page where users can engage and show their interest and excitement with the recent and upcoming products.
- Incorporate the ideas I had While working on the problem statement, I realized other possible ways of introducing brand stories. Therefore, future work can include the exploration of other possibilities.
- Another round of user feedback I wanted to conduct another round of user testing alongside some peer reviews to get deeper insights into usability, accessibility, and design.
❇️More and more learnings
This project was packed with a lot of learning. The time crunch of 48 hours let me evolve my ways of conducting the same old tactics in a new way and quickly saved me a lot of time to take care of other required work.
- Planning the journey before starting anything played well for me. Therefore, making a rough plan before beginning the design process is something fruitful.
- Time crunch demanded my keen focus on whatever I was doing at the moment because I might not get another attempt to get my hands on the specific work later on.
- I waited for user testing to be conducted before I got tempted to make any changes on my own. This resulted in discovering other areas to which I didn’t pay attention, and some areas which I thought had issues got validated after the test, they needed no changes.
- Iteration is where I realized all the areas where my product got improved a lot from the previous solution. Iterating with solutions has taken me closer to solving some major usability issues with the product, and realizing that not everything can be solved and hence should be limited to finite changes.
This section brings you to the end of the case study.
Regards to my mentor Anudeep Ayyagari for guiding me through, and helping me unlearn to learn better, and heartfelt thanks to my group members who took out their precious time to stay awake late at night and keep up the motivation. This journey is a cherishable memory.
❇️ Your feedback will be highly appreciated, and I am grateful for the time you took out to read this. To connect kindly reach out on LinkedIn.
#studentforlife
Email: sharan.kushagra@gmail.com
LinkedIn: https://www.linkedin.com/in/kushagra-sharan-185a4514b
