Case Study

Website Designer

Once we decided to move forward with this idea for our Capstone Project, we decided to do our version of a sprint. Our ideation began with competitor analysis. We researched an array of recipe websites, noting our favorite features and suggested improvements. We instantly recalled our disdain for how ad-riddled these sites were. We noticed that many sites had the same layout and the market seemed bland. Only a few of them offered hands-free cooking elements (ex: visual/audio aids). We shared admiration of the recipes that included reviews, prices, and customizable serving sizes. Overall, the market lacked personalization beyond search filters.

At the same time, we thought about everything we wanted our site to accomplish and brainstormed offerings that we could include to hit all of them.

We gathered key principles: innovative technology & integration, community, diversity, personalization, accessibility, and UX. These would center much of our thinking from this point forward.

Once we agreed on the site’s features, we shared style inspiration to begin visualizing these elements. What would we want our site navigation to look like? What would we want our recipe categorization to look like? What layouts did we like? How did we want to design our recipes?

Now that we had an understanding of design expectations, we tackled the components of our project: our prototype and our paper. In our previous brainstorming sessions, we determined our target audience. We also discussed the market’s needs and how we planned to fulfill those needs with our platform in our market research stage. McKenzie and Vincent took the reigns on articulating our idea while Nina & I got to work on building it.

I created a Figma file for our prototype and mapped out the various pages: Homepage, Profile, About, Shop/Cart, Recipe Directions, and Recipe Categorization/Search. I designed the header and footer, stitching everything together as I went to ensure the prototype was clickable and modeled a real website experience. I referred to Vincent’s brand guide to decipher colors and fonts for each page. This gave Nina & I a clean canvas to style the main page content however we preferred while guaranteeing uniformity.

I was responsible for building the Recipe Directions page (which would serve as a template for all recipes depending on how many we decided we needed to build) and Profile page. I created components to emulate checking boxes (users can keep track of the ingredients and cooking equipment they have and do not have) and number selectors (users can click on the number line to select their answers to profile questions). I also created real buttons and a checked marker so anyone testing the prototype can actually see the changes to certain elements when they are clicked.

I later built the About page, mapped out the Shop page for Vincent to plug in the merchandise mock-ups, and added simple animations to the Cart & Kitchen pages. On the About page, I created a slideshow that oscillates between photos of diverse families cooking to further communicate our brand’s commitment to community & culture.

Knowable Kitchen aims to revolutionize the online recipe experience by combining the strengths of existing platforms and addressing their weaknesses. We used an innovative, user-centric approach to tackle common pain points. We accomplished our goal of designing a community-driven platform with a multicultural recipe database and a simple yet engaging interface. We focused on improving the user’s experience through personalization: recipe customization, allergy & dietary restriction filters, price filters, etc.

Completing this stage in my Capstone strengthened my ideation skills. My group & I were able to test our knowledge of project management methods, especially sprint.

What I am most proud of is my expanded understanding of Figma. I learned so much about components while working on this project which has improved the realism of my prototyping. The design aspect of projects continues to be my favorite, and I look forward to growing my understanding of technology so my creativity can come to life in new ways.