Reid Kimball
UX Designer
img of ibd app
5R Healing IBD Framework
Backstory and Problem

My managing Crohn's disease with dietary interventions inspired me to start filming a documentary in 2010. I wanted to share stories of empowered patients who used controversial alternative treatments when nothing else worked for them.

While doing research, I discovered a framework for healing from autoimmune conditions called the 4R Framework. I learned about the four different components, Remove, Repair, Reinnoculate, and Replace.

My heart was pounding because this accurately described how I and many others were overcoming their devastating conditions. It was a roadmap, a strategic plan that gastroenterologists were not giving to their patients.

I decided to tweak the 4R Framework by adding one more component called Reconnect to make it the 5R IBD Healing Framework.

While wrapping up editing on the documentary, I started planning for my future and knew UX Design would be an excellent career for me. I love technology, I am creative, empathetic, curious, intelligent, and passionate about empowering people.

I needed to build a UX Design portfolio. I settled on developing a website to help patients with Inflammatory Bowel Diseases map out their 5R IBD Healing Framework.

Audience

I decided my target audience would be people with Inflammatory Bowel Diseases who are empowered to do their own information research and will conduct small experiments on themselves. They love using information and technology to help them make sense of what is happening in their bodies.

Naturally, making an app that lets one track health data sounds like a great idea, and it is, but those sites/apps already exist. However, nothing exists that helps users build a customized strategic plan and then holds them accountable to that plan. That's what I wanted to build for my target audience.

Team

To develop this app prototype quickly and for free, I did not recruit anyone to help me and did all of the work on my own. I did recruit interview and testing subjects to help test my assumptions and work.

Constraints

With little budget, I had to be thrifty using software I already had. I also wanted to do this within 2-3 months without having to learn new complicated software. Luckily, I am incredibly resourceful and found all the software tools needed, as well as users I paid $10 for the interviews.

Design process
Wireframing Play

I started by creating a Trello board to visualize quickly if the five components naturally fit within my mental model of five columns with treatments in each one. I then created a wireframe and both helped me imagine what the 5R IBD Framework software could be like.

While wireframing, new ideas pop up quickly, but I felt I needed more direction rather than playing.


User Stories and User Task Scenarios

To gain that direction, I wrote User Stories to clarify for myself why someone would want to use my 5R IBD Healing Framework website or mobile app. I based the User Stories on actual stories patients told me while producing my documentary.

Excerpt of User Story for John: "John has just returned home from the hospital and is frustrated with conventional treatment options. He was researching and found the website. He would like to know more about which treatment options he can use, but isn’t aware that a strategy can be helpful in choosing which treatments to use."

I decided that people would use my website or mobile app because:

Therefore, the service would need to be useful for both beginners and experienced patients.

Excerpt of User Tasks for Sarah: "To see the Reconnect phase of her Framework she taps on the hamburger menu icon and is shown a list of each component. She taps on Reconnect and is shown that column with her chosen treatments. She is reminded she wants to wake up early tomorrow and practice yoga."

The User Task Scenarios revealed that people would use my website or mobile app to accomplish:

Based on this info I refined my ideas for prototyping different web apps and returned to wireframing with more purpose.


While wireframing, I was reading Steve Krug’s Don’t Make Me Think. The Usability Testing chapter helped me realize I should do a Focus Group as a reality check. I wanted to ensure patients would actually use and benefit from the web app I had planned.

The Focus Group

I thought a focus group would be a great way to learn about the challenges IBD patients face, and to learn how they felt about the proposed website idea.

I contacted five friends of mine who lived in town, who all have IBD and asked if they’d be interested in participating. Five said yes, but three were present for the Focus Group. I introduced everyone to each other, had them sign release forms, and gave them an envelope with some money as payment for their time.

I created a card deck, one for each person that contained a version of the 5R IBD Healing Framework.

deck of cards

During the focus group, I let them create their own 5R IBD Healing Framework using the cards, and gathered their feedback on that process.


Analysis of The Focus Group

I reviewed the Focus Group video in Adobe Premiere Pro (CC). I identified which questions were most important to me and ignored watching the answers to the other questions. I focused on parsing their answers from these questions:

I added markers to the important questions and insightful things they said. I then dumped everything into a word document. I tried at first to organize all the extracted information, to categorize it in some way and discover patterns.

I can’t say I was successful reviewing their answers and having a well defined path towards creating a useful app. I would have to build it and iterate based on feedback.

My initial impressions from the Focus Group were that they had a lot of the trouble with the mental game. An app that gave them perspectives, mindsets, beliefs, might be encouraging and helpful. It could be a therapy app, to help them feel more comfortable with their healthstyle, and to give them the resolve and courage to be that weird health geek.

But my intuition told me the service could be more than a bunch of inspirational text and reminders.

One of the participants was really excited about the deck of cards and took it home with her. A few days later, she sent me a picture of her using the cards on her bathroom wall. She was using them to hold herself accountable and to track her progress in making the changes she wanted to implement. That was more along the lines of what I wanted the service to be; a personalized road map to health.


In the interest of time and design, I decided to build a barebones app a patient would use to build their 5R IBD Healing Framework, and do it on a mobile platform. I thought the constraints of creating an app on the mobile platform and which served a limited yet important function would give me the focus I needed to design and iterate quickly.

Photoshop Mockups

I downloaded a photoshop template which helped me start designing using the correct proportions and to get a better sense of how it would look on a phone.

I imagined how someone would use the app from the home screen of seeing the five components. And then went from there. Later, I researched Design Patterns for logging into apps, and searching.

This was a highly iterative phase. Often the wireframes would spark a new idea to design or to go back and refine earlier mockups.

Prototyping Using Prott App

I found a website and mobile app call Prott App that allowed me to import my wireframes and then link them together to create a rough prototype.

Quick micro-tests I had with members of my UX Design social group said it was confusing seeing the screen header say "REMOVE" and right below it a button that said "ADD ITEM".

Another person also said I needed to let users know they can swipe left and right to navigate to other categories of the 5R Framework.

User Testing with Lookback

I used software on my Android phone called Lookback to record user tests in the public Eugene Library.


Analysis of User Testing

The feedback confirmed what I heard in my micro-tests as well as revealed the major pain point that there isn’t enough information for users to understand what the 5R’s mean and how to use the app.

Revisions

I refined the screens to offer a lot more context and information so users can better understand the 5R categories and how to use the app.

Changes I made were more text to explain things, buttons have shadows to signify they are 3-dimensional and can be pressed, the "ADD ITEM" button was changed to "SELECT ITEMS", I implemented a card format to the screens to signify that users can navigate to the left and right of the current card screen.

You are welcome to play with the 5R IBD Framework prototype made with Invision. At this point in the app development cycle it is ready for programmers and artists to turn it into a beautiful, fully functioning product that continues to be improved on with each iteration.

Retrospective

The goal of this project was to practice using the entire UX Design process from concept to finished wireframe prototype. I was successful in using the process to experiment with ideas quickly and iterate towards better versions after testing.

I enjoyed learning about the needs IBD patients have and designing solutions for them using UX Research and Design tools. Conducting interviews and user tests with the target audience was immensely insightful for me. Being the designer, I got too close and couldn't see the gaps that existed in their understanding of the mobile app. I found the process to be relatively quick (compared to developing a full product), inexpensive, and valuable in improving the app.

As to the question of whether I would develop the app in full? I am not sure an app like this would be profitable for a company to make. I'm sure it could be helpful to some IBD patients, but what people with IBD really need is direct, and personalized coaching. It's better to find that out now through a cheap and quick UX Design process, rather than spend lots of development time and money on an app that won't make money, or make a profound, lasting impact on its users.