Redesigning the ProFacts Web App

The refinement of a successful hackathon project into a useable product

Why design, or redesign, this site?

Many people have food allergies and when our team originally developed the concept for this web app (a web app is a program that runs in a web browser) our project lead Alex had recently met several people dealing with celiac disease. So we chose to focus our hackathon project on creating a tool for people with celiac disease to more easily find foods that are safe for them to eat. However the original project was designed early on in my training as a designer and I have always been disappointed with the visual result and information organization.

An old ProFacts mockup, showing the onboarding process.

Audience research

Doing audience research allowed me to build so much more empathy for our user base. Celiac disease can be an extremely frustrating condition, with reactions resulting from even the most minute exposure to gluten proteins.

Personas: On-Trend Gabby, Busy Student Alfred, and Mid-Career Laurie
Storyboard leading to discovery of the app and our grocery filter feature.

Creating a Sitemap

To create a sitemap I first wrote a list of tasks the user might want to accomplish. I then drew a series of boxes with general page titles to develop how the different elements would connect to each other. From there I could see if certain tasks or goals were neglected within the site plan.

Three sheets of wireframes

Digital Wireframes, Mockups, and Prototype

Once I had identified some basic layout ideas and it was becoming harder not to add unnecessary detail, I moved on to creating digital wireframes and mockups.

Digital wireframes, screenshot from Sketch
I created many drafts of the home page and search results page to narrow in on a style that matched our pre-existing branding

User Testing

The feedback we got from user testing was generally very positive. One user was actually someone who avoided gluten already giving an illness that her mother had as the reason. Even though the prototype did not load quickly for her, she waited six minutes just to try out an app that might one day be useful for dining out with family and friends. Other users had a less personal connection but still thought the app would benefit them.

Clear demand: It took six minutes for our Marvel prototype to load on her machine, but this tester stuck around.

Final Mockups

To create a final mock up I implemented the user feedback of needing to explain what the app was for first-time visitors given that our product name is not immediately clear. I also added a way to search for specific kinds of restaurants for people looking for a certain type of meal.

Next Steps

My next step is to create a working HTML and CSS prototype that we can hook up to a database and live search engine. It remains to be seen how well the concept works using real, not pre-populated, data.

Unlisted

Tara Parker-Essig

Written by

Design nerd + bike mechanic. Designer, Research Consultant, & Copywriter. Previously @Tile, I’m looking for new work and graduated from @UCDavis this spring! 🎉