Culinary Care is a non-profit organisation that sources complimentary meals from local restaurants under the mantra of ‘one less worry’ which it then delivers to cancer patients and their families on their specified chemotherapy treatment days.

Nicole Fermie
Jul 27, 2017 · 21 min read

Role: UX Researcher, Interaction Designer

Timeframe: 3 weeks

Project Type: Client

Client: Culinary Care, Courtney White (CEO)

Deliverables: Competitive Analysis, Personas, Journey Mapping, Task Analysis, Sketch and InVision Prototypes, App Map, Annotated Wireframes for Developers, UI and UX designers, Future Considerations

Tools: Sketch and Invision

Number of users tested: 13 (7 patients, 3 Caregivers, 3 Medical Professionals)

The brief

Our brief centred itself around identifying and understanding how current and prospective users perceived the function and value of Culinary Care as a business/non-profit service. We were also asked to identify how we might be able to improve a user’s interaction with the service from referral through to food delivery by minimising the administrative processing time for patients and caregivers as well as through making the enrolment process, clear, clean and easy to use within the context of a chemotherapy treatment environment.

The value of our user research was found in unearthing that the service was largely perceived by users as a ‘luxury’ and ‘treat’ rather than a way of combatting chemotherapy-related malnutrition, which is what our client had initially assumed. Our work also helped to pinpoint parts of our client’s processing methods that were causing users to become frustrated or confused with the service.

The overview

Culinary Care’s homepage was predominantly donor-facing. We were initially hired to design both a medical professional-facing and patient-facing portal as our client felt that users were confused about how to sign up and manage their service. We were asked to find ways of making the enrolment process more seamless, frictionless and tailored to the specific needs of patients and medical professionals.

After interviewing patients, caregivers and medical professionals at hospitals across Chicago, our team proposed making an entirely patient and caregiver-facing portal and enrolment form, as our research identified them as the primary users of the service. We also proposed various high–level redesign concepts of the homepage in order to make it more patient–facing and transparent in terms of explaining Culinary Care’s value to both patients and donors. However, there were many hurdles and challenges that we had to address ahead of talking to the users and putting pen to paper.

Rising to the challenge

This is was a perfect UX design project. We had a client who’s needs and back end structure had obvious impacts on the user who’s experience she wanted to improve. Our 20 user interviews were more pivotal than any competitive analysis. We conducted an extensive amount of domain research in order to properly engage with our prospective interviewees by learning about chemotherapy and its effects on appetite, patient relationships with medical professionals and the effects of social isolation on cancer-related fatalities. As UX designers we wanted to create what we always seek to create: a system that is attractive to humans by being easy and desirable to use. This meant making every effort to truly understand patients, caregivers and medical professionals and their needs in context. We wanted to know how Culinary Care currently fit into their lives and what their mental models and expectations were of the service provided.

Usability testing session with a returning patient allowed us to validate changes made to the way users enrolled in Culinary Care’s service

We interviewed patients, caregivers and medical professionals from various hospitals in and around Chicago who were either diagnosed, survivors, new and return users of the service. We carefully shaped personas that captured all the nuances of life as a patient or caregiver and the complex feelings, desires, fears and frustrations associated with being diagnosed and engaging with a service like Culinary Care’s on treatment days. We found users such as Cynthia (a caregiver) talking about the small things that impacted their day such as the simple use of ‘patient’ when referring to her diagnosed mother.

“The word ‘Patient’ takes you back to the fact that you’re sick. It would be nice to use something [that] gives her VIP status. Something more along those lines.”

We also created customer journey maps that more acutely summarised the frustrations and desires of our users. However, we didn’t stop there. We wanted our solution to actually work concurrently with our client’s existing backend capabilities. We took matters a step further by creating journeys to explore the current interplay between the client and their users, as seen here:

The solution

We began synthesising all of these insights into prototypes using Sketch and InVision as we weren’t in need of too many micro-interactions, which meant opting against using Axure. We had a much deeper understanding, after our extensive user interviews, of the physical hospital settings that our users often found themselves in. We also learned about more delicate issues such as ‘chemo–brain’ for example, which is the phenomenon of chemotherapy–related changes to memory, concentration and the ability to be able to think clearly. We used all of these insights to create mobile prototypes, as users expressed that they more often used their mobiles when interacting with Culinary Care.

We created an adaptive portal for patients and caregivers in order to help our client retain their donor-facing tone on the website, as they were reluctant to lose it as a source of income. that were easy and desirable to use in hospital settings and ones that comfortably engaged the incredibly wide demographic that our product would be catering to such as this ‘Location Selection’ wireframe screen. We used large, clear buttons to accommodate for those with poorer eye sight or users suffering from chemo–brain:

The final MVP that we presented to our client incorporated all of the changes from both the concept and prototyping stages. We created an enrolment form (which you can click through here) as well as a portal for return users, which can be viewed here.

Our final hand off included:

  1. an improved and iterated enrollment form, formerly known as the request a meal form
  2. a new patient and caregiver-facing portal for amending and adding orders
  3. untested concepts for the homepage

We created annotated wireframes to capture the UX design decisions made prior to handing of to the UI designers who turned our work into a beautiful reality, and with whom I was very privileged to have worked closely with throughout their process — particularly with regards to content strategy.

Annotated wireframe of the first screen in our onboarding process with UX justification for each element

Of course there’s more — but before you commit…

If you would like to know more about this project then please do get in touch so that I can talk you through it over my favourite beverage: coffee. However, if you feel up to the challenge of reading about this particular piece in all its detailed glory then indulge that desire and scroll down for the full write-up.


Culinary Care is three years old. At present, the company is small and runs almost entirely on donations and volunteer work. The challenge within this project that set it apart from others that I’ve worked on was the fact that our efforts were not going to be used to improve the company’s market conversion but to improve on the existing experience, as the company was already almost reaching its maximum in terms of patients they were able to cater to. It was setting itself up to be the perfect UX project — putting the users first without having to fret over business goals.

It is important to mention that Culinary Care’s back end and content management was still very labour-intensive and involved a lot of physical touch–points such as email and telephone that our client wanted to retain. This meant that we had to develop an onboarding experience that explained this unique process effectively and welcomingly. Our initial meeting with our client introduced more challenges and interesting assumptions about the world the company was operating in.

Our kickoff meeting taught us a lot about our client’s assumptions about her own business. She spoke to us about her experience with the existing user base:

“There is no transparency. Today what happens is you fill out that form, it goes to me, I see everything, but the patient cannot.”

Some of the key assumptions that we gathered from this initial meeting can be seen here:

These assumptions were incredibly useful for lending us direction ahead of speaking to the users themselves. We decided to explore some of the major assumptions in literature ahead of conducting interviews in order to better understand the specific environment and users that this service was catering to.

We learned that patients who lacked a support network were generally more at fatal risk than those who did have one:

“socially isolated women have an elevated risk of mortality after a diagnosis of breast cancer, likely because of access to care, specifically beneficial caregiving from friends, relatives and adult children” .

We found less evidence for chemotherapy uniformly affecting patient relationships with food, because of the vast amount of variation pertaining to tumour types and chemotherapy regimens. This insight shifted the focus slightly away from the assumed priority for food customisation.

Exploring the content strategy employed by other non-profits such as charity:water

Lastly we looked into how other non-profits use content strategy to make their sites speak to their intended audience. We explored how these charities acquire donations by turning ‘donor guilt’ into ‘donor opportunities’, such as charity:water. This last aspect that we researched greatly informed our content development on our website concepts later on.

The research phase for this project was more relevant than ever. It truly helped us empathise with the various aspects of the very specific world that we were stepping into. Reading more about chemotherapy and the effects it can have on patients not only helped infer assumptions but also sensitised us to the struggles and frustrations faced by Culinary Care’s users.

Interviewing Rach, a patient, as she walked us through the existing website and her experiences with it–and my flummoxed face

We felt better equipped to talk to the users after understanding our client’s back end capabilities and the chemotherapy-specific world we were about to start researching. To this end, we interviewed 2 caregivers, 5 cancer survivors and 2 medical professionals.

The interview experience was unlike any other that I’d known in my brief time as a UX researcher. We become increasingly aware of how differently people speak about a free charity service. The rhetoric was almost always hugely positive and grateful. We encountered an unexpected challenge of having to communicate to the users that their honesty was critical in order to help us effectively improve Culinary Care’s service in the future.

As always with user interviews, the insights that we gained were surprising and eye-opening. The key findings highlighted a need for us to:

We set about synthesising all of these findings into personas as a way of ensuring that all trends in needs, frustrations and motivations were captured in a tangible and centralised format. We created Will our caregiver and Diane our patient persona. A shortened version of their needs, frustrations and preferred devices can be seen here:

We synthesised all the various goals, needs, motivations and frustrations from our two personas into a tangible problem that we could solve for. We expressed this as:

With this articulated problem and clear idea of our users, we set about creating design principles. These greatly informed and facilitated our concept phase particularly with regards to content, tone and onboarding ideas:

Lastly, we mapped out the user’s journey while using Culinary Care in order to pinpoint exactly when in the process they felt frustrated or weren’t able to successfully complete their tasks.

Using our research insights to map out a customer’s current journey with Culinary Care’s service to develop a proper understanding of what we needed to design for in order to improve their overall experience

It was from these mapped journeys that we decided to build mobile web-based variations on the following two primary concepts:

We presented these concept ideas to our client and asked her to clarify a few aspects of the company’s service that patients and caregivers were particularly struggling with that our research had identified. We wanted to develop concepts that were actually feasible and capable of working concurrently with Culinary Care’s back end. Our client meeting uncovered some more challenges that our future product would eventually have to address.

Our client wanted to maintain very physical touch–points such as telephone calls and emails with patients during the process. These touch points were separated by specific time intervals of up to 48 hours. The service itself was also limited by the restaurant partners that our client worked with who needed 24 hours notice for what meals to prepare. The challenge was going to be in finding ways to clearly communicate these intervals to the user without making them feel frustrated with the service. We were going to have to work hard to find ways of appealing to mental models around food delivery being an instantaneous and highly customisable service.

We began to realise that the content we were going to create for the both the patient/caregiver portals and enrollment form were going to be a huge departure from the content on the current donor-facing website.

We initially thought of proposing the design of a native app in order to provide solutions to the time interval constraints. Integrating Culinary Care with a phone’s operating system would enable automated reminders and seamlessly provide a solution to scheduling issues experienced by users that we interviewed. However, given the size of the company and its reliance on donations, we felt that designing a native app, despite all of its strengths, was going to be too financially burdensome for Culinary Care. We decided to take an adaptive approach in our web-based concepts in order to overcome this hurdle. This meant that we were able to tailor the content to specifically suit patients or caregivers within highly stressful hospital settings on mobile. Creating an adaptive portal and enrollment form also meant that Culinary Care would have the chance to experiment with new patient and caregiver-facing interfaces before committing to building an app.

After a series of paper sketches, 6–8–5s and paper prototypes we took all of our ideas into Sketch in order to create low–fidelity concepts that didn’t bias the user with any sort of UI variations.

Low–fidelity concept screen for the first page of the patient-facing enrolment form

Here is an example of a low–fidelity concept screen showing the start page of the caregiver-facing enrolment form. The simple and uniform UI throughout all concepts helped users focus more on content and hierarchy during tests.

Using Sketch at this stage also allowed us to make changes much quicker between testing sprints. Placing these concepts in InVision lent us the ability to test basic interaction concepts quickly, easily and effectively.

My InVision concept prototype can be accessed here.

My colleague’s InVision concept prototype can be accessed here.

We tested concepts with return users, 3 patients and 1 medical professional. We came away with the following avenues for further iterations:

1) Improve system visibility within the enrollment form and portal

2) Improve the processes of ordering and managing of Culinary Care meals

Users we tested wanted more transparency in terms of understanding how many meals they were entitled to. We designed our concepts to be ‘with the users at every turn’ and tried our best to stay sensitive to their highly changeable treatment schedules. We learned from this concept that users generally enjoyed having the ability to add and edit dates, times and locations for meals through a mobile portal. We also created a separate page to remind patients of how many meals they were still eligible for.

3) Tweak the content strategy for the website, enrollment form and portal

Our initial research with users revealed that some were left confused by the ‘Request a Meal’ call to action on Culinary Care’s website and saw it as hospital admin-related. We therefore experimented with changing the expression ‘request a meal’ to ‘enrollment form’. We also used different types of language and tone, such as referring to patients as ‘diagnosed with cancer’ after our week 1 research revealing how:

“The word ‘Patient’ takes you back to the fact that you’re sick. It would be nice to use something [that] gives her VIP status. Something more along those lines.” (Cynthia, a caregiver)

We adopted a friendlier, service-related tone by explicitly asking ‘What’s your name and how can we best reach you?’ in order to make our concepts truly reflect that we were “with the user at every turn” and that “we’re in this together”. Users reacted positively to a more simple enrollment form that was divided up into sizeable steps.

We attempted to be more delicate with questions regarding a patient’s income as a few users expressed discomfort over them. Cynthia, a caregiver summarised her feelings regarding income and her feelings of eligibility well:

“I struggled with the income section — because I initially thought my mother wouldn’t get it — because she doesn’t fit in these income brackets.”

However, our usability tests with both numbers and word descriptions of income brackets revealed that users were much hardier and didn’t need to have the money question dressed up as much as we thought. We decided to continue using numbers but in much wider brackets.

4) Improving transparency through onboarding

We experimented with a number of different onboarding iterations to more clearly explain how Culinary Care’s process works, complete with all the various physical touch points. Users were receptive to our step-by-step explanations.

5) Expanding on Culinary Care’s community

Lastly, we tested concepts that expanded on the community aspect of Culinary Care. We wanted to shift the company’s nutritional connotations towards community in order to make it more accessible to socially isolated members.

This whole aspect of community was largely unexplored by Culinary Care which meant that we had a lot of creative freedom. We experimented with a posting concept in which users could add pictures and quick messages. Users found value in being able to share their experience with others but also emphasised the need for privacy. Laura, a person diagnosed with cancer, when presented with our community concepts said:

“I would definitely do that, to know that I’m not the only one, to know that other people are with you. Having a community is important.”

We took all of these insights from our initial concept testing phase and iterated even further to generate another set of more refined concepts to put in front of the users ahead of creating an MVP.

We conducted 6 task-oriented usability tests with both new and return patients and caregivers. The insights we gathered led us to make the following iterations:

1) Changes to the feature prioritisation, language and hierarchy

One of our many portal dashboard iterations during our quest to find the best hierarchy of elements and features

We created a dashboard within our portal to house what users expressed as the most important features that they needed and wanted control over. These included their scheduled meals, their upcoming meals and access to the community.

Examples of the changes we made to language included losing clever expressions such as ‘My Story’ for the community section of the portal in favour of ‘My Community’ in an attempt to make them more self explanatory. Caitlyn Busche, an oncological dietician, is an example of one these users who expressed confusion over ‘My Story’ and even over the fact that ‘My Culinary Care’ was the primary scheduling section of the site:

“My Story — is this my treatment history?”

and

“My Culinary Care — is this my history of orders, contact info and preferences?”

We were clearly overcompensating in our attempt to use more ‘real-world’ language rather than system language. As is often the case in UX design, we went with the simple addition of ‘schedule’ which immediately alleviated all confusion.

2) Overhauling the layout and interaction design of the portal

Our initial attempt to simplify the portal by having each section laid out screen by screen was not received well. We scrapped the initial idea and decided to test a concept that allows all changes to be made on one scrolling page.

Caitlyn Busche, an oncological dietician said:

“Making changes all on one page is really easy. I like seeing it all on one page.”

Lauren, a person diagnosed with cancer also remarked:

“I don’t like having to go somewhere separate each time to edit my meal.”

From these insights we experimented with different interaction designs to improve the user experience. Our creative director mentioned potentially losing the multi–screen grid layout, in favour of horizontal scrollers. The larger button sizes were maintained as these tested well particularly with the older recipients of the service. But this change in design allowed us to fit all the key elements of food ordering onto one horizontally and vertically scrolling screen.

Our initial concept for a multi-screen grid layout which required each section to be filled out before leading the user to the next section
We combined all the elements onto one page after users expressed a desire for a more centralized layout. We used horizontal scrollers to make better use of the limited real estate

This new layout provided users with more of an overview as well as the ability to enjoy more interactions without having to dive deeper and deeper into the portal to get to the particular section that they wanted to amend.

3) Reducing cognitive load

A few of the users that we tested our iterated concepts with experienced moments of cognitive load as a consequence of the amount of text and steps required in both the form and portal. Some screens contained more than one CTA on each screen which confused some users as well. In addition, our efforts to provide error prevention were perceived as too tedious and tiring:

One of our usability test interviewees, Brad said:

“A two step confirmation is arduous — no need for the two step process. I want less steps and to be straight in the next section rather than having too many confirmation steps along the way.”

Our initial concept with two-step error prevention/confirmation pop-ups were deemed too arduous by users

We decided to iterate based on similar feedback from other to not include pop-ups at all. We hoped that this design decision would reduce the friction and feature bloat that users were perceiving.

We decided to replace text where possible with an icon, in an attempt to reduce cognitive load even more. Using icons also reduced the amount of text-based calls to action on the same page.

4) Reinventing the income question

We created a variety of concepts for expressing that tricky income question by finding more inventive ways of asking people about their income levels with as little interaction friction as possible. We experimented with a sliding scale versus buttons. However, we found that using a slider did not match up with the mental model of how users wanted to express their income levels as each user had their own interpretation of the sliding scale increments, and decided to scrap the idea in favour of more tangible buttons.

5) Improving the onboarding experience

We iterated on the onboarding experience in order to address frustrations over a lack of understanding of how Culinary Care works. Brad, one of our interviewees expressed that he wanted us to:

“Change the wording to reflect the process more.”

Brad was a new user who helped us to resensitize with users who’d never heard of Culinary Care before. We were so immersed in the research that we needed to be reminded of catering to the least common denominator.

We made greater use of obvious iconography and reduced the amount of text on each page as our tests highlighted that users were more inclined to simply swipe through an onboarding process if they were presented with too much text.

6) Understanding ways to express nutritional requirements

Lastly, we tweaked the ‘nutritional requirements’ section in response to the testing feedback we received:

“maybe add a text box to give users an ‘other’ option or phone call option in the dietary requirements section.” (Melissa Tang, a cancer survivor).

The final MVP that we presented to our client incorporated all of the final changes from both the concept and prototyping stages. We presented:

1) an improved and iterated enrollment form, formerly known as the request a meal form

Annotated wireframe of the first screen in our onboarding process with UX justification for each element

2) a new patient and caregiver-facing portal for amending and adding orders

Annotated wireframe of the dashboard for our patient/caregiver portal with UX justifications

3) untested concepts for the homepage

Untested wireframe mock-ups of a homepage that aimed to strike more of a balance between being both patient– and donor–facing

The concepts for the Culinary Care homepage remained largely untested as we would have needed to test with an entirely different set of users. Our client expressed wanting to retain a donor-facing tone as her website was her primary source of income for the charity. Trying to develop the right content strategy for the website would have required us to conduct interviews with donors as well, however due to time constraints and the client’s desire for improved patient and caregiver experiences, this fell out of scope for our current project.

We left our client with annotated wireframes for the UI designers and developers that our research was to be passed on to. These explained and justified with UX research takeaways, every possible state of the delivered products and how these would impact future interactions with her service.

Creating a native app for the user’s mobile operating system

We recommended that our client use our adaptive mobile approach to test whether the user experience and flow of service genuinely improved over time ahead of investing in creating a native app. The app would come with many helpful features, such as push notifications to remind users of when they can make changes to their order, and when their next order is due to be delivered. Culinary Care’s service is hugely dependent on scheduling and organisation. Having a native app allows for reminders to be generated automatically even in instances when the user has limited connectivity or data allowance.

Developing a strong Culinary Care community

Users by and large expressed wanting to connect with others in their hospital who were simultaneously receiving the service. We recommended that Culinary Care capitalise on their social value to patients and caregivers using some of the avenues that we explored and potentially A/B testing these concepts to find the perfect solution to improve their experience of the service.

I was very fortunate to be able to work closely with the UI designers who took on our wireframes and developed style guides and interaction solutions based off the research we had done.

I had the opportunity of being able to defend UX design decisions using user insights and to help them with all things content and interaction design. It was lovely to see the wireframes come to life and be present at their final hand off to the client a few weeks later.

The UI concepts displayed here have been provided by courtesy of the incredibly talented Romain Allemann.

UX website concepts with content and information architecture that I helped our UI designers create

This project taught me the true value of UX research. Being diagnosed with cancer comes with innumerable variables as no two experiences are the same. I learned the value of domain research as way of building empathy with an incredibly diverse user base. I was able to engage users to feel more comfortable when talking about sensitive issues thanks to the reading I had done into areas such as chemo-related taste changes, fatigue and social isolation. This also gave our insights and design decisions a lot of weight when seeking buy-in from our client over key aspects of the design.

Working with a charity also gave me the unique opportunity to work outside of improving conversions and to focus purely on enhancing the user’s experience of the service. This point alone made this project my closest experience to truly human–centred design to date.


My next project was an exciting exploration into the world of travel planning for the creators of a site called Tripidee.

Click on the image below to read more about it!

Or click on this image to skip back to my experience with designing a family app!

nicolefermie

the same thing we do every night Pinky, design to take over the world.

Nicole Fermie

Written by

Playful human in training

nicolefermie

the same thing we do every night Pinky, design to take over the world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade