Bohemia - An e-commerce app for a Ladies’ Boutique
Designing a mobile app for BOHEMIA, a local ladies’ boutique with a niche and loyal customer base.
A solo project by Gopa Shahane. It was made as a part of Google's UX Design Certificate from March 2022 - June 2022.
(BOHEMIA is a fictional boutique.)
Bohemia boutique's goal is to create a delightful & convenient online shopping experience for users.
They want to build trust and loyalty by providing great quality products and efficient, easy deliveries and returns, along with a rewards program.
As the sole UX designer, my role included :
User research
Ideation
Prototyping
Usability testing
Design iterations
Tools -
Zoom
Video/Audio recorder on Iphone
Figma
Mural
Maze
Useberry
THE PROBLEM
Shopping online gained extreme momentum during the pandemic. Shoppers who wanted to buy from their favorite local stores could not do that if those stores did not have an online shopping website or app.
This also has a significant impact on the business front.
Users have evolved into loving shopping online, but they still need the experience to be convenient and delightful.
THE RESEARCH
After some foundational research in the form of one on one interviews with open-ended questions, I had a better idea of how the online shopping experience is for different people ( depending on their preferences, abilities, and limitations). I received a lot of useful suggestions, and also learned a lot from observing the participants’ expressions and tone of voice. I used empathy mapping to help me develop user personas and continue the ideation process with user stories, user journeys, storyboarding, and more.
This process enabled me to empathize better with the users and understand their pain points.
Here is a quick glimpse into the detailed presentation of the Research conducted during this project along with the key deliverables and insights -
QUOTES FROM THE FOUNDATIONAL RESEARCH INTERVIEWS -
“When the product arrives, sometimes it’s completely different than what is shown, and that is very frustrating.”
“I don’t feel like shopping in person anymore, I want reliable and amazing online shopping experiences.”
“Most apps make it very difficult to navigate returns.”
Although this was a fictional boutique, it was important to identify the target user segment, potential competitors, market gaps, and market trends. I started with secondary research, finding out more about other small boutiques here in Houston.
I conducted a competitive audit, focusing on the online shopping experience of the competitors’ platforms.
One might ask why this was important if this was a fictional project ? I think this was imperative, especially in this case of starting a fictional project. The data from this audit created a base for me to start working on, enabling me to build a better more realistic project as I progressed.
THE DESIGN PROCESS
It was time to sketch the first paper wireframes. This was a fun and interesting part for me. After a few iterations (a full bin of wasted paper), it was time to create the digital wireframes.
Below are some of the digital wireframes. (Click on the homepage wireframe to view the lo-fi prototype)
Home page wireframe
Search results page wireframe
Shopping bag page wireframe
User account page wireframe
I used Maze and Zoom calls to conduct an unmoderated usability study and follow-up interviews. This first usability study sparked a number of new ideas and also identified some new pain points. I used affinity mapping to obtain the final insights and patterns.
INSIGHTS FROM THE FIRST USABILITY STUDY -
“I knew to look for the hamburger symbol but I felt like it was in the wrong place...I guess because I’m used to it being on the left side.”
“It was easy. All worked well. I was just a little confused on where to find the sign up button. Then I noticed it, it is quite small and surrounded by a lot of distraction.”
“I initially did not know where to click to access all of the products, the home page had too many items.”
The most delightful insight from the study was the task of completing the main user flow- shopping for an item and completing the checkout process.
100% participants reported that this flow was easy and simple to complete, they felt delighted!
initial Home page wireframe
80% of participants said they found the home page too busy and the signup button hard to notice.
75% could not find the hamburger menu
The iterations needed were very clear—
Make the sign-up button pop!!
Change the location of the hamburger menu to the upper left
Clean up the layout of the homepage
As you can see the screen on the right with the revisions includes all of the above—
The bright color and larger size of the button make it easy to notice.
The hamburger menu is easy to locate because of its predictable location.
The home page is more streamlined with less clutter.
Iterated version of Homepage after usability study 1
I was very motivated by all these insights and kept them in mind when making the necessary revision while moving from lo-fidelity to hi-fidelity designs.
I struggled a bit with color schemes, but WCAG was very helpful. Understanding the need for compliance with the WCAG guidelines was important and I made sure all my color schemes passed that test in order to be accessible.
The learning here was– Everything that just looks pretty, or has too much information isn’t necessarily what the users need.
Once the initial mockups were ready, it was time for the second usability test. Honestly, it was pretty stressful but it is absolutely essential. This time I used Useberry for the test. The main user flow was completely validated in the results but it also revealed a few necessary changes to be made to some other parts of the app to make it even more usable. There were also valuable insights about what additional features the users would like to see.
INSIGHTS FROM THE SECOND USABILITY STUDY -
“I liked the colors and big images. Sometimes e-commerce apps have really small text and pics. So this was refreshing.”
“Shopping for the dress was easy, I saw they had some size and color options too which is great.”
“I liked that I could shop as a guest. Login/signup was clean and simple. The user account page was a little confusing.”
“I wish they had more reviews or something where I could see the clothes tried on by real-sized women.”
I was already thinking about including a live-selling option during my foundational research. However, I hadn’t noticed a lot of interest in that feature from half of the participants. But the last insight from my second usability study gave me a clear indication that 70% of users wanted the feature of being able to view the clothes on real people.
Therefore, I included an informative banner about weekly live-sale events on the social media channels of BOHEMIA, giving the interested users an option of viewing the same, making sure to not integrate it into the app thus not forcing that information on the users who did not prefer it.
80% of users found the user account page a little overwhelming and confusing, again an issue of too much information at first glance.
I edited it and converted all the different sections into collapsible cards, therefore keeping the first impression a clean and organized one. This gave the users the ability to decide which section they wanted to view and edit.
VIEW THE FINAL PROTOTYPE BELOW
My thoughts
When I began this process, I focused on treating it as a real-world project rather than just a fictional prompt. My marketing background instinctively compels me to think from the stakeholder and business point of view. I believe UX has to create a favorable environment for every stakeholder, be it the users or the business/company.
I always considered myself an empathetic person, but this whole learning process has helped me further develop my empathy and listening/observing abilities. Understanding the behavioral aspect of the user is very essential in order to realize their needs, desires and motivations. Empathy truly helps define the problems that we as UX designers need to provide the solution to.
Learnings
Design thinking truly is a non-linear process. There is constant back and forth between the various steps.
Iteration never ends. This product BOHEMIA could be further tested and iterated upon multiple times, I’m sure I will be updating versions and making more additions as I progress.
Although as a fictional project it all started with a hypothesis, in reality, assumptions do not work in UX. I made a conscious effort to keep it real, by doing the initial competitive audit and getting an idea of similar businesses out there, their products, users, and the market scenario.
Research is the foundation of the product. Thorough, regular research before, during, and after this entire process helped me overcome impostor syndrome and boosted my confidence with each step.
Writing a case study, and designing a portfolio is the toughest UX project of all, and this will forever be an ongoing iteration for me. (The ideas and the possibillites are endless.)
What I would do differently & next steps
I would try to have more participants with different abilities in my usability tests to ensure the app was as accessible as I wanted it to be. Accessibility is something I want to learn more about and implement better in the future.
I would make an entire different case study for the Research part, I believe it is essential to have that. I am working on that and will be adding it to this project soon. (Update, I already added the detailed presentation above).
Please feel free to reach out and connect, or leave a comment on email or LinkedIn.
