Gluten Free With Me
What is Gluten Free with me?
What started out as an instagram account to aimed to show that living with food allergies doesn't mean you have to miss out on exciting meals has turned into a successful platform with over 2,600 followers. GFWM offers homemade recipes, restaurant praising, and product reviews that sparks meal inspiration.
Client: Gluten Free With Me
Product: Blog
Time Frame: 1 month
Platform: Website
Deliverables: Research, wireframes, and Mock Design
Role: UX Designer
Challenge
GFWM does a great job of capturing how to turn any meal that is constricted by a food allergy and turn it into an exciting meal that you will want to share with your friends, but it's hard to share a full story when you are limited to hashtags and a character count. Because GFWM has only existed on instagram they have been unable to tell the full story behind each experience. My goal for this design was to give GFWM a platform that would bring their stories to life and be able to share full recipes.
Online Survey
I like to start my projects off with a competitive/comparative analysis but I am not in touch with the food blogging world and I figured the best place to start would be with the followers of GFWM. I had a hunch that they would point me in the right direction for my comparative analysis. With that in mind I put together an online survey that would help me determine who our viewers are, which blogs they view, and what they are looking for in a food blog. I was able to determine the following information about our viewers.
"In general, I use food blogs to find new recipes, ... I rarely read the actual blog because I don't really care about the stories behind why they are making what they are making and find them tedious."
-Participant
Comparative analysis
From the online survey I was able to explore 16 different food blogs that were labeled as each participants favorites. The three above were the ones I found to have the best experiences. Although a fan favorite was the color red, I noticed that several these sites had adopted red as their main color. It was this reason that I chose to go with the runner up color and explore shades of green for my designs color scheme. My client later requested that they wanted to see either sea foam or a dark mint green in the design. I took note of the following features and content found within these sites.
Sketches
landing page
1
2
3
4
Before I began sketching I already had an idea of what I wanted the landing page to look like ( 1 ). I wanted to give each feature it's own section that would update as frequently as GFWM would post. I designed areas that would highlight a weekly post, featured product, events, and the GFWM Instagram feed. To me this was a no brainer and I was excited to share with my client, However, my client reminded me that they wanted a simple food blog. After a few minutes of reflection, I realized that while designing to make the experience easier for viewers I had taken away the feel of the food blog they wanted. I quickly sketched up more landing pages and presented them to my client. They were able to tell me which features they liked and wanted to see in the w!?!?!?!?!!?!
Recipe index/ product list
I sketched the layout for the recipe index and the featured products list to to mirror each other for consistency. They both feature a simple design with three medium sized images in each row. I found this format to be easy on the eyes and to be less overwhelming for the user. Each item is one image, a title, and will feature the amount of “likes” or views depending on which the client would prefer. This feature will encourage viewers to click into the recipe or product.
Individual recipe
The results from the online survey indicate that our viewers are more focused on the recipe and less on the personal story behind it. For this reason I have designed the layout to feature a small section for the right up and I have centered the recipe to be the main point of focus. The format for the layout out is a recipe title, date published, Medium sized image of final product, small write up, and the full recipe.
Contact
From here the viewer can find the GFWM email for direct contact. The shipping address can also be found here for companies who would like to have their products featured on GFWM. This page will consist of one short message that informs the viewer the available methods of contact and one medium sized image of the face behind GFWM.
Product feature
The layout for the featured product page is very similar to the Individual recipe feature, it follows the same format. The only difference is there is no recipe list because it is not necessary. This will be a great place for GFWM review the product sent to her and/ or discuss what how they plan to use it.
WireFrames
With the exception of the home page the wireframes serve as a higher fidelity visual representation of the entirety of the website for the client. For the home page I took all the features my client liked from the original four sketches and included some content that they requested.
HOme
About Page
Recipe Archive
Featured Products
contact
Individual Recipe Page
Individual Product
home page mock up
I used Sketch to create the mock up design and I was able to have some fun with it by including my very own salsa recipe and photos of the process. I wanted to give my client an idea of how consistency in photos could help keep the site clean. This allowed me to put myself in their shoes and get an idea of how easy or difficult it will be to add new content to the page. I also pulled images from her Instagram page to help fill out the home page. The main content of landing page is the blog portion. It features medium sized images and brief writing about the item featured. The design also features a balanced global navigation and a side navigation as requested by the client. The footer contains contact information, subscription area, and copy right information along with the GFWM logo.
Squarespace Template: Five
I needed a template that would be easy to use for my client and it needed to allow the functionality that my design promises. The Five template allows the landing page to have the bulk of the content to be an easy to manage blog. It also allows the user to customize a sidebar on the landing page. Those two reasons alone were why I decided that the Five template would be a perfect fit for the website. The only downside to this template is that it does not allow the global navigation to have a logo sit in the middle of it. This does not break the design it just requires a quick adjustment.
Site title and Global Navigation
In the Five template there is a customizable global navigation bar and site title area that sits above the hero image. It does not however allow for the site title or logo to be placed in the middle of the navigation bar like my original design calls for. I had attempted to go into the source code to try and fix this issue but the syntax of the code was difficult to follow. For this reason I followed the templates design and left it as is.
Customizable Side bar
Upon my clients request I have included a side navigation bar that grants the viewer access to the search bar, about section, social media icons and instagram feed, events, and a news letter subscription feature.
Blog Entries on landing page
The blog entry area is the bulk of the page and the most important content. Each entry will sit on top of the previous post and feature a medium sized image and a quick write up about it. A button will take the viewer to the full recipe page in the archive section.
Mobile friendly
Because the majority of GFWM’s initial viewers will be directed from instagram I anticipate that they will be viewing the site on a mobile platform. Five does a great job of breaking the design down for the mobile experience.
what's next
The final step in the GFWM project is to collect high resolution photos and blog content from my client, once received I can add the finishing touches to the site and walk my client through managing the page on their own. I will also set up analytics and keep track of where the views are coming from and use that data along with data collected from future surveys to adjust the sites design accordingly.