USER EXPERIENCE RESEARCHER/DESIGNER

Backstory

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.

Development - 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 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:

• They had run out of options and were desperate for health
• They felt they peaked in their healing and wanted to reach the next level

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:

• Learning about alternative treatments
• Getting organized and creating an individual healing plan using the 5R Framework
• Being held accountable for following that plan

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.

During the focus group, I let them create their own 5R 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 (CS 2015). 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:

• What needs to change, either with you, the healthcare system, or the support system you have?
• What are the greatest challenges (frustration, pain points) you face with your IBD?
• If you could build a personalized healing plan for yourself, would you? Can you?
• Do you see yourself using the 5R Healing IBD Framework to create a personalized healing plan?
• Would you use a web application to create your personalized 5R Healing plan?

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 very clear well defined path towards creating a useful app.

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.

Design (in Photoshop)

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.

Conclusion

In my previous career as a Video Game Designer, I enjoyed talking with the playtesters, figuring out how to solve their struggles with playing a game. The Doom 3[CC] mod is one of my best examples in the field of video games that used a UX Design approach to development. It added closed captioning for the hard of hearing and deaf to the video game, DOOM 3 by id Software.

The UX Research and Design conducted for the 5R IBD Framework app was very similar. I enjoyed learning about the needs IBD patients have and designing solutions for them using UX Research and Design tools.

I am eagerly seeking new projects to use the UX Design process in order to help others.

Check out my resume or go back to the top of this page.