HOLLAR KP FELLOWS DESIGN CHALLENGE
UX / UI / USER RESEARCH
Recreating the online dollar store experience
What is Hollar?
Hollar is an online dollar store targeting millennial mom by offering dollar cheap baby products. Having 1 million sales per month, Hollar is now one of the hottest online store for all kinds of mom who want to purchase cheap products with several discounts in this cheap, Pinterest friendly like store.
As an online shopper for more than 6+ experiences, I strive to seek for online products in sites such as Ebay that are exotic, cheap and accompanied with a smooth, transparent buying experience. In this particular redesign project, my goal is to explore and foster the interaction between millenial customers and Hollar.
Overview
My Role
User Experience Design, Interaction Design, Product Thinking, Psychology
Methods
Goals
1. Create a better filter system for the homepage and categories
2. Enhance the overall transparency of customers' wanted items and promo code
3. Make the interface ergonomics by rearranging the main page's elements
4. implement functions that enhance the trust for first time shoppers and the native app platform
Design Methods: Storyboarding, User Journey, Rapid Prototyping, Sketching
Research Methods: User interviews, Market Research, Usability testings
Tools: Sketch, Framer
Timeline
Jan 2019
A case study that strives to create better customer experiences in Hollar, exploring how the site can optimize its platform by improving and adding on core functionalities, bridging the experiences for shoppers online that potentially mimics real like shopping experiences, establishing design principles and designing the trust between buyers and customers.
Overview of my Design Process
Before I started my own redesign of Hollar, I established a flow so that I could use those principles to break it down into concise goals to solve each problem clearly and effectively. Here is my flow chart.
Personas
Main Problems
Solutions/
Goals
Ideation
Current
Experiences
Research
Synthesis
Qualitative User Research
Competitive
Analysis
Wireframe+
Iteration
Challenge
How do I enhance the experience for users of Hollars while illuminating its advantage as an one dollar marketplace and creating new solutions that address both the users and the business goals ?
My direction
In this particular redesign challenge, I focused on refining the user experience of the users going to a one dollar virtual shop and how the store can mirror and even leverage the physical experience of that store and transforms it into a better experience. With my strong user research and IOS background, I want to challenge myself to use the psychology theories I learnt in class and incorporated in the process of making UI changes. To clarify, my ideas will consist not only making improvement on current features but adding new functions that helps to improve the experience.
Even though I do not get direct access to any data from Hollar on which functions are most useful with methods like retention rate or installation per downloads, I tried my best to incorporate data I get from surveys and one to one interviews to understand what problems users may face when going through the app. Also with the React Native knowledge I obtained before, I can make good use of knowing what kind of technical difficulties I will face and compare with different solutions to find the right solution.
Current Experience
By understanding what current experiences user may face in interacting with Hollar, I can highlight those points to formulate problems with what Hollar users are facing and improve from that. But before starting any user research, I formulate some hypothesis tailored towards Hollar that are useful to guide my thinking process and tackling the problem.
-
1. Does the app address the goals of the users? Do the functions offer a concise and sufficient solution that assists Hollar's users to achieve their buying of cheap products?
-
2. How does the app differentiate from current physical buying experience in one dollar shops like Dollar Tree or 99 cents$ only store? Can I leverage that experience into Hollar?
-
3. Are all the functions in the app represented in a nice way that no require the users to think through?
-
4. Is there rooms for implementing new functions that make the app more valuable to the niche of the users who are using it?
Understanding what Hollar do
(differentiate from other marketplace)
If I have a brief understanding of what is the main purpose of Hollar as a marketplace and how it differs from other marketplaces will guide and form my user research in a better way that address the problems of the users.
Hollar has both a customer app that offers very cheap 1 dollar items ranging from toys, decoration to kitchen and baby. It differentiates from other marketplaces because it offers such cheap products that target to a specific niche of people which are millennial moms and teenagers who are more affordable to this cheap products than other general marketplaces like Amazon or selling and auditioning places Ebay and Esty. Instead, the focus of Hollar competition should be both online 1 dollar marketplace like Wish, Shop Miss A and Dollar1.com and physical store like Dollar Tree and 99cents$.
Competitive Analysis
4 of the stores share a lot of similarities in terms of function and UI. They all provide search bar, categories for filters, favourites, carts and featured products. But each serves different functions. For example, ShopMissA only focuses on selling cosmetics to women, while ThredUp serves as more of a clothing platform. Wish, however, looks very similar to the overall purpose of Hollar and that with similar UI, I want to delve deeper to understand its advantages and disadvantages and how Hollar can do better than Wish in terms of functionalities, layout and color.
Wish may have implemented functions that are easier to navigate items than Hollar.
-
the categories are better filtered by showing more options at one time while Hollar show all categories separately which might obscure the users to go further down to search for other things.
-
Also, Wish offers various ratings and discount such as time left and price reduction to induce the drive for users to buy the items. These are psychological incentives that can serve as an inspiration for the new functions to be implemented in Hollar.
-
Lastly, the recently viewed items that do not show in Hollar is also good function that can be new functions that reduce the search process time and find items faster.
Qualitative User Research
Identifying what problems I am solving for Hollar users?
Because Hollar has a confidential data base for all the data it gathers on what users might favour what functions and the returning rate per customer on the app, I unfortunately cannot focus on the quantitative part of the user research. However, I can still focus on generating valuable user insights from the one on one interviews with existing Hollar users and customers who are first time using Hollar. I will also videotape them using Hollar to figure out what problems they face to get feedback for the improvement of UI of the app later on.
I then decide to onboard 10 people for my research, which included my moms' friends who asre actively using the app to purchase stuffs for her child, my college friends who are first time users of the app and also some of the high school students beside my school in UCLA.
Here are just a glimpse of some of the questions I have been asking the users on their journey with interacting with Hollar.
-
How do you land yourself into the Hollar app in the first place?
-
What are they trying to achieve through the app?
-
After some initial interaction, what are they feeling about the app, other positive or negative experiences?
-
What things I will want to leverage in the experience in the app compare to other marketplaces and physical experiences? How do I make them wanna use it again
Here is some key points I generate from the persona for the development of UI later on.
Research Synthesis
After a long process of interacting with those users, I generated four main insights that are later on implemented as part of the redesign of the Hollar UI. I divided their conversations into four specific highlights that help me to set goals and corresponding solutions corresponding it.
-
1) "While I am using the app to find party preparation items, I always have some trouble with the filter system since it is placed later at the list. I often has to scroll very down to see it! Also, I hate the sort filter. It is useless since the relevance filter does not correspond to what I need and the prices just be messily filtered."
-
2) "Sometimes, I have rainbow pony with accessories I want to buy it to my daughter in a monthly basis. However, every time, I have to manually go back to find that specific toy my daughter like by doing a long search process. I wish it shows me what I have bought before. The promo code is hard to apply as well, just not very clear where they put it."
-
3) "I struggle with placing my hands back and forth to click the account to see what I am buying while going to the search bar in the lower bottom. It is just places not what I expect and like."
-
4) "I am a new user first time using Hollar, even though I see some cool stuff like Flirt Beauty Bag but should I buy it? It only shows one photo and so cheap as well."
Main problems
With the questions users have in mind, I generate the research into four main design problems so thst I can follow the lists to solve each goal respectively.
-
1. Poor representation of the filter system: There is currently two ways to filter in the app. The first one is through a small rounded icon in the homepage that offers filters by relevance, new items, price from low to high and high to low. The other filter is placed at the footer which is a filter that addresses choices separately. However, the problem with the first filter is that the relevance does not correspond to the users' favourite items and the filter with high and low does not show price concisely since it is just a basic ranking. The problems in the categories filter is that the list will expand permanently and obstruct users to scroll down to view the items in the list.
-
2. Lack of transparency of the items customers want to buy and promo code: The problem with the homepage is that the first and second card lists both shows the new items and an advertisement for new items. However, these items placement does not resonate with what users need. Just as what Aunite Clara talk about in his conversation, she is coming back to buy something her daughter need but not some completely random stuff from the advertisements.
-
3. Options panel awkwardly placed: Because of the poor placement of the different functions, the users need to go back on top and bottom to find items they are buying which greatly slow down the search process and decrease the efficiency. I pointed out four problems with the current homepage design that needed improvement on.
-
4. Lack of trust between new users and the Hollar app: For the first time users to Hollar, it may be hard to trust the use of the app with the very limited options provided to them. For example, when clicking into the item, only a few photos are shown. This immediately triggers my psychology thinking. Do I know if the product is popular? Do I know if the product is trustworthy with ensured quality since it is so cheap. How can I, in a business standpoint, propel the users buy the product? These are all opportunities to implement new functions to enhance the existing problem for the lack of trust which is especially very important to build credibility in a marketplace.
Addressing Problem 1: Poor representation of filter
Solution 1:
Enhanced filter systems at the homepage and categories
As the users navigate through the filter, they have to undergo a lot of decision choices until they reach their final items. While going through the filter for example, after they have targeted one specific category, they are only prompted to even more categories, which greatly increase their cognitive loads for processing and making the right choice. My job as a designer is to increase the cognitive load by providing just the right choices for them while limiting the option considering their mental constraints.
Mirroring the physical instore experience
Imagine if you are walking into the supermarket and seeing that there are different aisles. Which one should I go with? There are so many choices, like 20 of them. Where should I go to? However, if there are clear instructions of what each of the category represents which are divided into smaller subparts, I can easily navigate between them and find my target items. Maybe I want to shop for kitchen and grocery? They can then be grouped into the same parts of a wider category and filtering all at once.
By leveraging this opportunity of physical experience, there is one more extra option we can add on. With the flexibility of the searching filter, what if users are targeting both Kitchen and pet, let's make this happen with two more options presented to them.
High Fidelity Design for the two filter system
With the function of sorting by category, the users right now are not affected by so much choices presented to them, but can filter by first seeing what categories that might interest them, also multiple options also leverage the experience of cross shopping compare to real life shopping experience.
Also, by filter by range, it truly illuminates the use of price range that exactly shows what users may want in that price instead of the high to low price confusing filter. The discount alert serves as an useful way to show the users by making them more likely to buy once the toggling circle goes beyond 20 USD. Other filters taken from the main page are useful to give a glimpse to users what might interest them.
Addressing Problem 2 : Lack of transparency
Solution 2.1:
Enhanced transparency and rearranging the content in the homepage
The only way for users to know about what they have bought before is by accessing My Account under the full width button called Order History. However, this whole process is non-intuitive and tedious since users need to take multiple steps to go to the my account page and searching the row for the order history. In addition, there is no suggestion of what to buy for the customers in Hollars as they are only accessing two large card rows of some specials like Copper Cool advertisement and valentine's day shop.
Imagine if a user goes to a physical store Dollar Tree, and he likes to buy some really cheap snacks for his own while studying. However, if he realizes that instead of showing what snacks he might want to get, he is instead be promoted with various advertisement such as Copper Cool utensils or Valentine days' special offers, will he still feel the shop is offering what he needs? Probably not. Thus, I believe that the first instore experience is very important to really help the users to find what they need by tailoring their products to them. In the same vain, if Hollar does not want to drive users away, Hollar should provide more specific items that they want through functions like "Recently Viewed Items", "Buy it again" and "You might like" to customerize the experience for each user so that users can easily find what they want.
Now with this main interface, it greatly bridges the gap between the users trying to buy the items they want and actually getting them in a seamless, efficient flow. Firstly, the horizontally scrollable interface allows for cross-shopping between both 4 categories, from Recently to popular. Therefore this reduces the cognitive load on the users of having to actually searching the items he or she likes in this vast marketplace. Secondly, the users can easily click to see more with the arrow icon to find items they are potentially interested without having to click the right arrow icon on the top to reorient back to the original homepage.
Solution 2.2:
Enhanced transparency for promo code
Users in the Hollar app really likes discount. Thus, I think leveraging the promo code and making it visible easily to the users are important. However, the current experiences only allow to see code that are hidden at the bottom sticky footer that shows Offers. But still, the users need to take at least 4 steps to find the code and then memorize it until he gets back to the cart to apply for payment. Same as the physical experience, I doubt anyone will want to get all their items into the cart, wait for the queuing line to proceed payment until they find out they can apply their coupon but it is left at one of the aisle.
However, with "promo code notification", applying promo code will not be a headache anymore. As users proceed to their payment, a notification will pop up reminding them they can use the coupon to pay to get a 80% off. How awesome will this be especially for people who want to save money.
Addressing Problem 3 : Options' Panel Misplacement
Solution 3:
Make the interface ergonomics
When I mean ergonomics, I mean making the user experience better by changing and rearranging the existing positions of these various functions. The older app design had actions at both the top and bottom of the screen, which made it harder to use because your fingers had to cross the screen back and forth. What about the new design? All important menu actions are now at the bottom of the app, where you can select your account at the bottom, see favourite things and the cart as well. The UI for further actions of buying items in the flow are now also located in the same spot, resulting in a seamless experience.
The reason for placing all the important things at the bottom is to make it more reachable to the hand distance and organzied for the eye of the users. In medium article about Why Behavior won't change Apps Don't Work, it talks about how we will quit apps when we reach a psychological state called "Reactance", basically a stage when our autonomy is threatened. In the same vein, the users need to feel that they are somehow in control with the situation, not feel that they have to. In the Hollar example, as the functions are not presented in what users can possibly think of, they will think that they are not in control, alleviating their reactance and ultimately quitting the app.
Thus by taking all the important information at the bottom and adding a search bar to replace the Hollar logo will allow users to navigate what they want and possibly something that they truly need. It is now divided into two parts of experiences: the upper part focuses on helping users to find their items with the search and filter button, the lower part with the sticky whole width footer that consists of 5 icons focuses on refining the buying and purchasing experiences. It is hard to imagine that the first thing is a big logo users need to face when they enter the app which is meaningless to their buying experience except for familiarizing with the brand.
Addressing Problem 4 : Lack of trust between new users and Hollar
Solution 4:
Make Hollar a credible and trustworthy app with functions authenticating the items sold
How can I make people trust Hollar products since it is so cheap? Easy, make it popular and actually authenticated by real people. Thus, I set off to change the new icon that is coloured in orange from new to how people getting it. With other functions like how many people are currently viewing and the total comments all increase trust of the users and bridging the gap between the new users of the app to familiarizing themselves with the products it displays. All the bottom things are essentially the same, so I do not make any change on it.
Revisiting my hypothesis
Nicely represented filter system to enhance your shopping experience of cheap products
Worrying about too much items in your shopping list? No worry! We all sort it out for you. Find all the possible categories that interest you and we can start from there to find the right, cheap item for you. Click more than one categories to cross shop for different options.
1. Does the app address the goals of the users? Do the functions offer a concise and sufficient solution that assists Hollar's users to achieve their buying of cheap products?
2. How does the app differentiate from current physical buying experience in one dollar shops like Dollar Tree or 99 cents$ only store? Can I leverage that experience into Hollar?
Leveraging the power of discount
Navigate the cart with ease and don't worry about where to find the coupons. It is just presented nicely to you when you buy. Just sit there and get the free money.
3. Are all the functions in the app represented in a nice way that no require the users to think through?
Shopping what actually you like but not finding something that you need to recall and uninteresting
Still struggle to find something that you want it again? It is just as easy as one click. With the home page showing all the items that you have bought before and recommending something you will like, it reduces your cognitive load to remember what you have bought. No need to think. Just buy it.
4. Is there rooms for implementing new functions that make the app more valuable to the niche of the users who are using it?
Shopping cheap items that are popular and authentic
Still scare about the quality of the products if you are a first time user? Not any more, because Hollar provides you with all the needed information to know about how popular and real the item is. You will find out how many people have bought the items, how many people are viewing the item and actual comments and ratings about it!
Conclusion
Although I do not get any actual quantitative research from the Hollar's engineering, business or design team, but implementing certain design process and undergoing extensive user research like competitive analysis and face to face user interviews and walkthrough are very helpful when developing solutions surrounding the problem statements.
I initially doubted that the physical buying experience in a one dollar may differ drastically from just pure interaction with a 2436x1125 pixel screen, but I was way wrong about how important is the physical experience that helps me to improve my UI of Hollar. There are subtle things that the users have taught me about the physical space such as the father's need to rediscover the one dollar toy for the son in a store and how I can possibly leverage that functions with the redesign I made with Hollar.
It is also important to keep in mind that there are certain advantages of the Hollar marketplace that the real experiences and other apps may never mimic, and I tried my best to illuminate that throughout my redesign. Empowering users the ability to cross shop with various stores and categories is a privilege in Hollar but never in real life experiences. You can click two categories in the same time but never split into two person in real life to go to two different aisles.
Many designers tend to be very satisfied with their final products after the whole design process. But I always strive to criticize myself on what aspects of the app I can improve on and how might things be different if I take that UI function away. It is that constant self asking and answering process that helps me to come up with innovative solutions to tackle the problem but at the same time never settle for a so called "PERFECT" design solution.
Important takeaway
-
I realized the importance of user research. It is the foundation of the whole user experience design and the ultimate destination for a good redesign. From researching both physical and virtual places like OneDollar Tree to online marketplace like Wish and even one on one interviews, I cannot stress the importance of these research because they are what ultimately guide me to frame the right problem and corresponding solution.
-
Being empathetic is another skillset that I develop throughout this redesign process and continuously carry throughout my life as a good trait. My own experience of interacting with the Hollar app proved very different from how other people interact with it. But with user research, I understand I have to be way more that just a good designer who can make pixel perfect visual design. The ability to consider and carry the feelings of Hollar's users and reimagining them how they will want to experience with the real buying and Hollar experience are something that I have learnt and consistently improving throughout this project.
-
Although there is not room for me to do prototyping because most of the things are essentially just the same as other animations, I wish I can put that into Framer and understand more advanced technological barrier it will face if I implement those functions.
-
Applying some of the psychological learnings prove extremely useful when I am taking the consideration of social psychology and reframing them into specific questions. The process is just very interesting and practical at the same time.
Things to consider in the future
-
1) Conducting real user testings on the product: It does not matter how I offer persuasive evidence of the user research and killer visual design for the improvement of UI if the actual solution is not likable by the general users of Hollar. Thus, by carrying real user testings like rentention rates, average screen per visits and installation and uninstallation will practically help me to evaluate my design decisions and technical abilities
-
2) Boarding the diversity of my users' base: Even though I onboarded college students, friends and my mom's friends for the app. Though it shows some level of diversity, I would love to see more on how I can possibly collaborate with other user experience researcher to expand the complexity and the diversity of the user research base. How about places like New York, Singapore and even my hometown Hong Kong. By gaining more insights from people of different cultural and societal background is a very useful way to find more generalized solutions for the improvement of the app.
-
3) Holding a strong disbelief system: As I continuously move forward with my design career, it is important that I don't fall into the trap of an experience designer: the lack of self-criticizing trait. It is such an important quality for a designer because it shows that every design decision are not made perfect and can be improved on. Even though sometimes I may be satisfied with my design work, but if I delve deeper into one particular aspect like visual design of screens, I know that there are still a lot of things to improve on.
-
4) Understanding some real technical difficulties and constraints: Even though I have some experiences with coding like HTML, CSS and React, I admit that I cannot produce an app that is actually be official on App store. Thus, by continuously refining my skills as a designer and programmer will be my challenge and something that I need to conquer in order to understand my own design decision more throughly.