The Problem

Candy-loving Redditors struggled to reunite with lost products.

I regularly visit Candy subreddits (like r/candy and r/chocolate). When I do, I witness people asking for help finding their favorite candies again.

My Role

Competitive analysis, UI design, and usability testing.

Although my involvement was constant, I focused on competitive analysis and UI design influenced by my teammate’s research findings. One of my favorite moments of the project was conducting a few usability testing sessions when my teammate wasn’t present.

User Research

Surveys were conducted to understand the scale of candy forgetfulness.

I sent surveys to both the r/candy and r/chocolate subreddits to understand the scale of the problem.

The survey yielded 9 redditors who were open to becoming interviewees.

All interviews were through messages. Nevertheless, I arrived at the cause of candy forgetfulness, the motive for reuniting with candy, and what people would do after they find the product.

Market Research

A new lead: interviewees regularly use candy news sites.

I conducted a SWOT analysis on three products my interviewees use. Key findings include having loyal followings facilitated by newsletters and simple website layouts. Unfortunately, these products don’t help people find forgotten products.

Solutions Ideation

Include industry news for convenience.

My teammate and I brainstormed features based on our research and filtered them through the feasibility and practicality lenses. The most surprising addition was the “news” feature. People liked having easy access to new candy and industry information.

The Solution

A news website with search functionality.

In addition to a search that would interpret vague user descriptions, the solution would also give Candy-loving Redditors relevant information through diverse mediums like articles, top-five lists, and videos about their favorite candies and the industry.

Sketching & Wireframing

Sketched individually. Discussed. Wireframed together.

Using mockflow for quick idea visualization, I sketched separately from my teammate to avoid group thinking. After sharing our ideas and reaching a consensus, I collaborated on a cohesive wireframe with my teammate.

Usability Testing

Presented wireframes to 5 Candy-lovers to ensure needs were met.

They thought we were on the right track and suggested minor changes. However, two comments stood out.

Search page: “it’s like filling out a medical form.”

All 5 individuals pointed out the form’s 3-column layout and how bland it is. Frustration was caused by the lack of essential input UI elements like text placeholders.

Home page: “top five list doesn’t look good.”

4 individuals felt using an accordion for the top five list was wrong because if all dropdowns were closed, it would be a useless block on the screen. Yet, revealing all dropdowns would be overwhelming because of the many words and buttons.

The Challenge

Addressing the list led to the designer’s block and doubt.

After considering the feedback, I began to implement the changes. Redesigning the search page was straightforward. However, the top five list was complicated.

Stage 1: Remove the unnecessary.

There were too many variables. So, I removed the accordion and simplified the content. The following content needed to go.

Stage 2: Experiment with what’s left.

I experimented with the UI using the product name, rank, and image.

Stage 3: Need more ideas.

After getting stuck on the layout, I wondered whether it was worth having a top-five list in the first place. Yet, after talking to my teammate, I decided to keep it. A top-five list will give the product an up-to-date atmosphere and build authenticity.

Stage 4: Discover inspiration from Billboard.com.

I explored products that had a ranking list UI. Eventually, I landed on Billboard.com and their HOT 100 list and drew connections between it and my situation.

Prototype

The homepage with the list and resulting design decisions.

I took a note from other candy news sites and used a newsletter CTA in the carousel. Below that is the Billboard-inspired list design. Although I widened the list to give information more breathing room, there was still leftover space. So, I added a blurb that gave credibility to the list.

A search page that removes the burden from users.

If users don’t know the type of candy they are looking for, they can use the filters to explore. If they are looking for a specific candy product, they can use the optional advanced filters to take in bits of information.

The product details page fulfills Candy-lovers’ needs.

As unearthed in the research, people want information about a candy product’s history, the nearest and cheapest places to buy it from, and relevant articles/videos. So, if an individual is interested in a particular product found in areas like the list, search results, or articles, they will be linked to this page.

Testimonials

7 candy-loving acquaintances interacted with the prototype and loved it!

Here are two prototype reviews.

Reflections

Designer’s block? Don’t be afraid to try skeptical ideas!

Thinking back, embedding images into the list was familiar to me. Yet, I thought it wouldn’t work. In my mind, the visuals appeared too small. I had exhausted all my other ideas and didn’t attempt uncertain ones. In the future, nothing is off the table during my ideation.