A couple of weeks ago, I set out to improve one of the apps I created in Juno’s Bootcamp and write an article about my experience getting it user-tested! Here it goes!
Inspired by the work of the Etsy Shop Ramble On Supply Co., I built an e-commerce app that allows a user to add and delete items from their cart using React. With the use of Firebase, the app will keep the user cart and keep track of the inventory of each item.
This app was designed for people over the age of 16 and those that are interested in the outdoors. However, it was also important for me not to discount those that would be using the app to shop for others as it is an e-commerce application.
React | Firebase | HTML 5 | CSS3 | Adobe Creative Cloud
What features are included on an e-commerce app so that a good user experience flow is maintained?
What I did
I set out to get user feedback from my peers and to get a variety of people to test my app. I reached out to my Facebook group and wrote asking if anyone could spare some time to test my app and answer a quick set of questions about it; I was really touched by how many people reached out to help me. And the array of different backgrounds: I had people of a variety of age groups, some that were from the development world, some from business and marketing.
I asked the users to move around the app, play around, click buttons, and just go through it as they would a regular app and then fill out a form to provide some feedback. The questions spanned from asking whether they encountered bugs and if there were any features that they didn’t think were valuable. From here, I would take a few of their suggestions to improve the app.
For the most part, the feedback was positive! Most people said they didn’t experience any bugs and that the app worked well! As well, they said that the features were useful and that the clean design enhanced their experience. I also really loved the suggestions for what to add to the app or what to improve on. From the ideas, I decided to make it a goal to add the following:
- A back to top button
2. Make noticeable changes for when you select different ways to browse the items and when you add something to the cart
3. Add the opportunity to choose how many of an item you wish to add
4. Add a reviews section!
This past week I was able to make the back to top button live, and in the next couple, I hope to finish the others!
Some problems …
In hindsight, I should’ve organized it a bit more. Many people tried testing the app all at once and were naturally confused when products would end up in the cart that they didn’t personally add. As a result, we had some people experience some issues with adding up the total and weird items appearing in the cart. As well, while some people were testing it, the Fontawesome server crashed resulting in many of the visual cues (such as the shopping cart icon, and the add to cart icon) not to appear. In the future, I would like to schedule or organize users to test it separately to eliminate these technical difficulties!
At the risk of sounding cliche, it was a lot of fun hearing all the different ideas of ways to improve my app. People are so creative, and it was inspiring to hear all their feedback. As someone who has an interest in getting into UI and UX, it was so cool to ask users to test the app, to see what worked and to see what would make it stronger. It really motivated me to work hard on the app and to make it better by adding different features. As well, it was very valuable to hear about user expectations when using an e-commerce app as it was something I struggled with when building it initially!
To other developers or anyone who creates any type of product for people, I highly recommend just for fun-sies getting different people to test it! It could grow into something you never could’ve dreamed it to be. And to those who tested it, THANK YOU SO MUCH FOR YOUR IDEAS AND TIME! 🙌🏼