Method Meals makes finding recipes swift and convenient.
Method Meals is a recipe website made for younger adults who wish to efficiently cook meals during the week while maintaining a flexible schedule. This website was designed and developed through research, persona development, brand identity design, and prototyping.
The younger adult demographic has a need for quick and efficient recipes due to their crowded schedules, but can find it difficult to connect with existing options due to their lack of energy and convenience.
Method Meals goal is to provide an easygoing but energetic experience for a user to rely on for timely recipes.
To begin my research I conducted a competitive analysis between popular recipe sites. The two direct competitor's I chose to compare were EatingWell and Simply Recipes. My research revealed that both website's share a frequent use of a grid format that keeps information straight to the point. These insight's revealed what a user may anticipate from a typical recipe website.
To better understand the identity of Method Meals I created a brand overview. This included the brand strategy, brand traits, brand voice, and potential brand copy.
From my research I was able to identify one major group of users who would benefit from the website, that being younger adult's.
Using the group of users identified from my research, I developed a user persona to help characterize their identity while also capturing the goals and pain points they might possess.
To begin the ideation process, I wanted to get a feel of what the potential user flow could be. This lead me to generate a site map to visually layout the information architecture. I used my findings from my research and competitive analysis as basis for the user flow.
To test out early renders of potential brand identities and UI elements I developed three unique style tiles. The style tiles were inspired by my findings in the competitive analysis and the traits laid out in the overview.
The initial wireframes were developed within the context of the IA diagram and user needs. A strong focus was put onto grid formatting to keep as many recipe's on screen as possible while keeping necessary info accessible. This information included recipe titles, meal type, time to cook, and the meal rating.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
I started my initial coding process by writing out the barebones HTML for each page. I then added Bootstrap classes to each element to match it to the grid laid out in the wireframes. I held out on adding any CSS until a mockup was made that clearly defined any styles or UI elements.
The brand identity of Method Meals was based off the positive reception of one of the style tiles approach. With some adjustments made to enhance the UX/UI elements, the core color palette and logo from the style tile remained the same.
The mockups were built in Adobe XD on the fully responsive framework of the wireframes and help to visualize UI elements with the new brand identity. The mockups showcase how the hierarchy of text and color palette act in unison within the context of the website. The finished mockups also provided enough evidence to begin coding the CSS for the website.
The final version of the website has three operating pages—the homepage, the recipes page, and a single recipe page. The website runs through a WordPress template, allowing content to be updated though custom fields. This works flawlessly with the implemented grid used throughout the website
This was my first experience with PHP and theme development so there were some hurdles learning how to get pages to interact with each other. Throughout this project the importance of developing clean code and including accessibility into a website became apparent.
