Personal Project Website

Avery & The Allergies

Design

Code

All my life, I’ve had tons of food allergies. I like to have a sense of humor about it, and because it’s always hard been hard for my friends to keep straight, I created a brief website for people to refer to if they had any questions.

View Site

Project Goals

1. Help my friends remember my allergies: This website serves a simple purpose—to inform my friends (and whoever else might be interested) about my allergies in a clear way. For that reason, I designed my site in the style of an infographic, with plenty of white space and clean text. Since site visitors already know who I am, there’s no need for a contact page. Every element that appears on the page should serve a clear function.

2. Reflect my own tastes: Since this site deals with my own personal allergies, I want the site to reflect my own taste in design. Since this site isn’t meant to look like a traditional website, I could play with some of the web design rules I’ve learned and change things up.

3. Exhibit playfulness: Finally, I want the site to be fun! From the color choices to the fonts to the language, I hope to convey that it shouldn’t be taken too seriously.

Research

I consulted with several of my friends/potential site users to gather some preliminary data:

First, I established that remembering the allergies was, in fact, a problem that needed solving:

“Yeah I can’t keep track of your allergies.”

“I always forget at least one when we’re choosing a restaurant to eat at.”

“I know eggs and seafood but can’t remember the rest”

Then, I asked what information would be most useful for a user:

“A list of the allergies”

“Common foods that the allergens appear in”

“How severe each allergies are”

“What happens when you eat the allergen”

Equipped with assurance that at least someone would use the site, I set off to create it.

Wireframes

I created my wireframes using Figma. The pink bars are a cool feature of Figma, which allow me to section off the page into equal segments to ensure the spacing is consistent across all pages. I was also able to create my site prototype in Figma, which meant I could keep all my spacing consistent across the project.

Figma Prototype

My initial design was an energetic and saturated with bright colors. I toyed with two different ways of formatting the history page (see below for a comparison). The first is closer to the single column format I had originally used in the wireframes, which felt a little too much like the formatting on a Word document. The second is the version I settled on; I thought the timeline felt more dynamic and would provide opportunities to use animation to bring the site alive when I would code it.

However, when I created the prototype on Figma, I realized that the site design felt more like a poster than a web site, so I reconsidered my approach. I ended up making the following changes:

Switched to white background instead of the colorful gradient
Represented allergens with emojis instead of monochrome line art
Updated the copy

I still like some elements of the colorful site, and might experiment with a “light/colorful” mode when I code the site. View the Figma prototype for the updated version here.