Cookies For You

The Challenge

After considerable focus on interaction design in my graduate-level class, I was tasked with creating a clickable prototype using Figma. The idea was to explore Figma’s tools and create visual feedback when a user interacts with a digital product. We needed to create a wireframe that gives an interactive and engaging experience to its users.

Problem Space

When choosing a problem space, I was given a handful of examples I could choose from. I decided on a website for a non-profit organization, since I was curious about their operations and sustainability. I contemplated how to engage users with its charity and services. As a lover of stories, I considered using them to appeal to consumers on an emotional level. An intriguing story would attract users to be more curious and engaged about the product.

Concept Development

Charities will often sell products or services to sustain their business. I decided to make this the main focus of the charity’s activities, to focus the website on one topic. I was inspired to use cookies as the main product by other organizations like Girl Scouts. While they are not a non-profit, the cookies they sell greatly contribute to their goals and services. Their nationwide appeal comes from the delicious taste, variety of flavors, limited availability, and supporting you Girl Scouts. Another factor in this decision is the psychology of sharing food. Sharing stories and feelings while eating food encourages positive bonding and engagement with one another.

“Cookies For You” is a non-profit organization that sells cookie dough for charity. Each cookie dough comes with its own story that you can read on the website or the package. The stories are usually about or inspired by the creator of the cookie or someone important to the organization. It adds sentimental value to each cookie dough that customers can sympathize with and reflect on when buying or baking the cookies. These stories can be read both on the website and on the packaging.

Outcome

I created a high-fidelity prototype for mobile screens. My instructor highlighted my use of hierarchy and clarity of elements in my wireframe. I incorporated some visual feedback that would translate to a desktop version (i.e., hovering), and while they were engaging, I received a critique that they wouldn’t be seen on a mobile screen. Some elements could be visually bigger to improve mobile usage, but overall, the design was received positively. I learned to be a little more generous in sizing, considering how small phones can be. It’s important that users can both see, understand, and easily interact with buttons and inputs.