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.
We also found while building the web app that our problem scope was too wide and it would be difficult for our small team to deal with both restaurant environments and grocery store environments, as well as providing a social forum for our users.
In the redesign I chose to focus only on the restaurant finding experience. If the app becomes successful when we will be able to expand into the other areas we had originally envisioned.
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.
One of our interviewees happened to keep a blog so I was able to read through an archive of the first several years of her dealing with her newly discovered condition.
I found myself retelling interviewees’ stories to my classmates because the stories were so shocking, frustrating, and ridiculous. I found myself much more determined to do a great job on the project and create something that would genuinely help people.
Creating personas was fairly straightforward, however it was difficult for me to make generalizations about potential users when I had heard such specific and personal stories from our interviewees.
Developing a storyboard was a useful step because it helped to clarify that we should only focus on one aspect of our overall plan at a time. Our original storyboard dealt with the grocery shopping experience, and this revealed that we would have a better minimum viable product if we first focused on developing an app to find safe restaurants.
The easiest part of creating our story board was most certainly the fun illustrations!
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.
From that point I chose a specific series of tasks and drew out more detailed wire frames to describe the visual layout of each page within the user’s task flow.
All of the drawing was done with a thick-tip marker on dot grid paper. I intentionally chose a thick marker so that I would not be able to add too much detail to a given wireframe and waste time or effort.
The difficulty I ran into with using paper was that I could not copy and paste my drawings if I decided the task flow should proceed in a different order. This resulted in a lot of arrows flying between the various boxes.
However sticking with low fidelity tools allowed me to draw more quickly and not worry too much about small details that should be saved for a mock up.
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.
At first I created black and white wireframes to give me an idea of what I would include at different screen resolutions.
The next round of higher fidelity mockups were created in Sketch with assistance from InVision’s fabulous Craft plug-in.
This was definitely the most time-consuming part of the process as I went through several different variations on each screen’s layout and began to develop a visually consistent design system for our app.
However seeing our idea take shape as a fully formed layout was also very rewarding. Once I uploaded JPEGs of each screen into the Marvel prototyping system it was a breeze to link the pages together and resulted in a convincing prototype without using a single line of code!
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.
A surprising result of the test came from the way I phrased the testing questions. The scenario users were given was to imagine a friend with celiac disease had sent them to the site to find a restaurant where they could both eat.
Users latched onto this concept as an excellent use case, mentioning that they would like to send a link to ProFacts to friends who did not have dietary restrictions so that they would be able to choose where to eat from a list that was safe for the users themselves. This opened up new possibilities for how we can further improve the app.
I also found some improvements in features we could use such as allowing users to filter by cuisine type and not just by safety, distance, and price. In general users thought that the app had a clear and easy to understand layout.
User testing was scary for me. Because we used the UserTesting.com suite of tools I could hear recordings of our testers directly and see their interactions with the mockup. This made the experience of watching the tests quite personal and impactful. It was nerve-racking to watch testing sessions appear in my inbox, each bound to contain real feedback from strangers I had never met. It seems my initial prototype was decent and I was relieved when most of the feedback was constructive and positive. Our users had excellent points and I agree with many of the suggestions they made.
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.
