A one-week prototype challenge focused on ethical shopping.
When proposed with a problem I like to take the simplest route. Work smarter not harder, right? Supporting anti-cruel and socially conscious brands has become a top priority in my own purchasing habits over the last few years. Oftentimes though, it’s hard to find the information needed to make a confident decision quickly. Why should I buy this oat milk over another? What am I investing in beyond the product itself? How do I know this product meets my moral and ethical values? How do I know which oat milk is created by a company that is reducing waste or limiting their carbon footprint? So how do we work smarter in making these decisions?
Through research and ideation, I created an app to help in the quest to consciously consume based on what you value. Support anti-cruelty? Seeking a more sustainable lifestyle? Support a living-wage for all? I’ve got you covered with, CoCo — the conscious consumer app.
CoCo Logo
Discover
Truthfully, I started with a much more specific prompt “how might we advocate for animal rights?” I started thinking, how do I advocate for animal rights? What are animal rights? And writing down my thoughts which I then made into a mind map. A lot of ideas and questions came up, but what I kept thinking about the most was the products we buy and use everyday in our homes. What is my dollar actually buying?
I then wondered, what do other people think about? And started a list of questions to ask a group of five millennials about their buying habits. What prompted them to buy household items and why? Did animal rights play into their decision making? And with each interview I was told… “no, not really” and “I don’t want to hurt animals” and “like PETA?” but animal rights were not at the front of people’s minds. So what was? Convenience? Need? Yep. But also sustainability. All of my interviewees mentioned the environment or some form of sustainability in answering my questions. Ah ha! A pivot.
In addition to the environment, some users raised concerns about buying clean or thoughts about the workers making their products. All of these factors together made me think an app that answered all of these questions about where our products come from and how our money is used after we spend it would work. I gathered my interview notes and created an affinity map. Three themes presented themselves: users only had a few places to look for information; users are interested in ethical shopping; and users buying habits don’t involve their ethics.
During the same time frame I was conducting user interviews, I also looked at what other apps existed in this sphere in competitive analysis. I found apps that focused on cruelty-free spending, on buying by your politics. Ethical shopping websites focused on gifts and clothing. But the most comprehensive app I found shut down last year. Knowing there wasn’t a perfect solution out in the world at the moment, I started creating mine.
Define
I believe that the average consumer needs a better way to learn about what they purchase because of lack of transparent information. So how might we create an app that makes it easy for users to learn about the products they need to purchase?
I started thinking, how can users easily learn about products … scan them right in the store! So a barcode scanner was a must. But what about if they weren’t at the store but were making their shopping list or shopping online — of course, a search feature. And! Create an account so you can save all your favorite products.
Develop
Then, I started drawing user flows.
And next, my favorite part. Deciding on a layout and what the app would actually look like. Using design conventions, I knew a search bar should go at the top of the screen (shown in 1 &2). Then in simplifying my design, I added a navigational menu at the bottom (shown in 3 & 4) and housed both the search and favorites there alongside a home button on the lower left. I moved the account feature to the upper right and, because of feedback, plan to include instructional tips for users who don’t use a lot of apps (hi, Mom!) to make it easier to use. I started the favorites icon as a shopping bag, realized it would look like the app had a shopping feature and switched it to the heart to convey liked items.
After the third round of sketches, I started creating a paper prototype — the home screen is shown above, 4. For my paper prototype, I showed the flows between each feature: barcode scanner, search, browse, & favorites and I conducted user testing via Zoom. This was challenging since the users couldn’t actually touch the prototype, so it really was more of a demonstration which led to some amazing ideas for the future of this app. The users wanted to know more about the research in CoCo reports and how that can be trustworthy, they suggested adding: a FAQ to show what different labels mean; a blog to educate users on the different aspects of why ethical shopping is important; tutorials for helping new users navigate the app; comparing products; and localization — highlighting local stores and products.
Deliver
Finally, I moved to Balsamiq taking the input I’d received and incorporating it into my design. I changed the home screen to put the user requested blog front and center and moved the barcode scanner to the bottom navigation. Below you’ll find the flow thru the barcode scanner and search feature —
Tripping with excitement because it's so easy to shop ethically with CoCo.
Final Thoughts
Creating a clickable prototype was incredibly fun and taught me a lot about the design process — there are so many details and it can be easy to leave something out! I especially enjoyed thinking about navigating throughout the app — “does this need to go back home or back to the previous screen?” “will users appreciate seeing their recent searches” “is the browse feature too overwhelming?” I look forward to answering these questions with continued user testing.
Just as with ethical shopping, there are many things to consider throughout the design thinking process. There were ups and downs to every step of the project but the most valuable take aways were: document everything! take a picture of your work! and jump in, things are easier once you start. And yes, creating easily navigable apps for users can help us consciously consume.
Editor's Note:
After completing this project to low-fidelity in Balsamiq in January 2021, I revisited it in April 2021 to do some high-fidelity polishing in Figma. The high-fidelity project took me several days to complete because this was my first UX project and there was a lot more to consider than I had initially thought during the original project week. A lot of that revolved around decisions like "how do I succinctly show an items rating? is an image enough or does it need a label?" and "do I need to show a scroll bar?". It really proved to myself how much I learned during the course of my 12-week bootcamp with General Assembly and made me excited for the continued process of learning in the UX community.
Comments