How Much Oxalate?

How Much Oxalate is a site designed to help the dietary needs of kidney stone sufferers.

My role

UX/UI designer and front-end developer.

My methods

Wireframes, prototypes, visual design, UX writing, copywriting, and front-end development.

Overview

How Much Oxalate is a side project I built to help people like me who suffer from calcium oxalate kidney stones. People whose bodies create calcium oxalate kidney stones need to carefully monitor their intake of oxalates in food and drink. How Much Oxalate is a website that provides multiple pathways to help people quickly retrieve oxalate content.

Problem

Millions of people deal with calcium oxalate kidney stones and many medical professionals recommend increasing the amount of water and decreasing the amount of oxalate (a natural substance found in many types of foods and drinks) consumed. Harvard University published lab analysis results of oxalate content in over 500 different kinds of food and drink. The results are provided in a series of Excel and text files that are difficult to parse, require significant effort to sort through, especially if the patient is at a restaurant or evaluating a recipe and want to find the level of oxalates in a given meal’s ingredients quickly.

Process

My process was fairly straightforward and broken into the following phases:

  • Discovery — identified what to build, who for, and scope
  • Design — designed the UX (wireframes and simple prototype), designed the UI (high fidelity designs)
  • Content — wrote all interface labels (UX writing) and informational/help copy (copywriting)
  • Development — built the site from scratch using open-source front-end web development tools (no backend needed since I used a static site generator that uses flat files)

Discovery

I knew I wanted to make something that was fast, intuitive, and useful. I performed an initial discovery by identifying my audience, and researching the frustrations and pains they experienced while trying to navigate this health condition through posts from kidney stone patients on public social media sites (Reddit, Twitter, and Facebook Groups). I then identified three goals for this project:

  • Help calcium oxalate kidney stone sufferers easily find the oxalate content in various foods and drinks
  • Highlight oxalate content in foods based on food groups
  • Highlight oxalate content in foods based on a rating system

Design

My next step was to create some basic wireframes to help me identify how the experience would work. I had a sense of what it should be based on a heuristic evaluation of various medical and diet websites and apps that were highly rated by their users. I followed that by designing the UI, which included choosing the typography (system fonts to preserve load times and allow people to focus on the content) and color palettes (shades of blue and teal to evoke trust and calm).

How Much Oxalate mobile website wireframe

Homepage wireframe (mobile)

How Much Oxalate desktop website wireframe

Homepage wireframe (desktop)

How Much Oxalate food groups mobile website wireframe

Food groups wireframe (mobile)

How Much Oxalate desktop food groups website wireframe

Food groups wireframe (desktop)

How Much Oxalate mobile website UI

Home UI (mobile)

How Much Oxalate desktop website UI

Home UI (desktop)

How Much Oxalate food groups mobile website UI

Home UI (mobile)

How Much Oxalate food groups desktop website UI

Home UI (desktop)

Content

I wrote all of the UX writing found in the UI elements, and also wrote the copy for information and help pages. I used plain language and recognizable terms found when discussing food and drinks (though I did not rewrite any of Harvard’s data in order to preserve the data as-is).

Development

Once completed with design and content, I went to work actually building the website. Because the Harvard data would not change often, I decided to use a static site generator and a flat file structure to maximize performance. I ended up taking all of the Harvard data and building a JSON data file for all 500+ records to make it easier to parse the data programmatically. I chose Gatsby to help me build the site, which is a static site generator that builds fast sites and leverages React. I also used Tailwind CSS to save development time while also using Netlify to simplify hosting the site.

Reflection

This was a fun side project for me because it is something that I built for myself while at the same time being something that others could benefit from. On the next iteration, I’d like to do some deeper research into the medical community to see if any other analysis or data points exist regarding oxalate content in foods to make this as accurate as possible and update the data accordingly.