Culinary Care

Client: Culinary Care | Timeframe: 3 weeks | Team: 3 UI designers

Brief: Culinary Care needed a visual layout for their meal enrollment form and mobile portal system.

My role: UI designer

Solution: I created high-fidelity web and mobile designs for their meal enrollment form and also designed their mobile portal system for currently enrolled patients.

challenge

Culinary Care is an organization whose mission is to bring free meals to cancer patients and their families during a time when they may need an extra helping hand. They strive to bring a little bit of light and community to those who are currently undergoing treatment and fighting cancer.

Culinary Care primarily received meal enrollment requests through phone calls from interested patients looking to sign up for the program. The time and energy it took to manage these requests was overwhelming in part due to the small staff size and so they came to DESIGNATION. Their goal was to shift the current phone registration process to an online form where interested patients could sign up to receive free meals if eligible. They also sought a faster method for enrolled patients to modify meal information after having already submitted that information to Culinary Care. The UX team at DESIGNATION worked with Culinary Care to streamline the enrollment process and also constructed an online portal system that would give enrolled patients the tool to modify their meals.

Our UI team was handed the wireframes with the goal of overhauling the current brand and creating the visual style of the meal enrollment flow and the mobile portal system. I worked with a design team to deliver high-fidelity visual mockups of their current website, the meal enrollment flow, and the portal system.

 

Design journey

Establishing the design parameters

My team and I set out to gather an assortment of brands to show our client variations of styles in photography, typography, and other visual elements. We wanted to see what our clients had in mind for the website’s overall tone and mood. The styles that they liked included the following:

gut-test-all3.png
 

We learned that the website shouldn’t use a dark interface because users may have difficulty in reading the content; we also did not want to make the website look sombre, which was extremely important due to the sensitive nature of the organization. Our client showed interest in having a large headline paired with a CTA button overlaying an image on the homepage to clearly let users know where to go to donate. They were looking to shift the current website’s branding from being overly bubbly and friendly to something more high-end and hospitality-oriented without losing the warmth and personal touch of the current website.  

Following the visual gut test, my team and I compiled a list of in-category and out-of-category competitors to see where our client’s website stood among the competition. One distinct feature of Culinary Care was that it had two distinct CTAs for two of its primary users, donors and patients. Our client wanted the home page to focus on catering to donors because Culinary Care primarily runs on donations given through the main website. This was a major area that we needed to keep in mind when creating our designs and as we looked at competitors.

 

These three competitors had design elements we were looking to emulate because the combination of all three aspects reflected what we wanted the focus of Culinary Care’s homepage and their enrollment process to be. The use of attractive photography, whitespace, and clear CTAs all converge into a collective effort to compel users to either donate or enroll. After synthesizing our competitive research, my team and I progressed to creating our design principles.

Design Principles

Building off of our takeaways from the visual competitive analysis, we focused on crafting design principles that emphasized food photography and creating the feeling of a warm and inviting community for patients.

eye-principle.png

This isn't just any ordinary meal, but a special treat. The bright and professional photography used on the website will make users feel like they’re receiving a special and unique experience.

 

It’s not just about the food, it’s about the relationship we’re building. As a local organization, Culinary Care wants to create a tight-knit community. We provided friendly colors and photography of people engaging with one another to communicate the idea that Culinary Care is always here to lend a helping hand. We used fonts that are warm and welcoming to convey a supportive atmosphere to patrons entering the site but at the same time don't make the user feel like they’re asking for help.

 

Being confused and frustrated over filling out a form should be the least of our users’ concern. We implemented a design that is understandable by focusing on strong hierarchy, clear CTAs, and well-known design patterns.

 
 

Style exploration

After creating our design principles, my team and I parted ways to start creating our individual style tiles. I created three diverging style tiles that focused on implementing the design techniques seen in our competitors while also incorporating the varying moods our client was interested in conveying to our users.

 
Tile-1.png

Style Tile 1

This style tile was designed to evoke a feeling of springtime freshness and vitality through the color. Minimal use of borders create an open atmosphere and help lift up the spirits of our patients as they undergo chemotherapy treatment. I chose this serif typeface to convey a sense of sophistication that was warm and inviting to users.

Tile-2.png

Style Tile 2

This tile conveyed a soft yet positive energy through a clean aesthetic by utilizing white space. I specifically chose pastel colors that were similar to the current website to explore the option of keeping the overall tone of the brand in the joyous and friendly realm. The use of pastel colors brought the right amount of vibrance to the tile without shifting the current brand too dramatically into a different direction. The use of a sans serif font also made it simple for users to quickly digest information.

Tile-3.png

Style Tile 3

I emphasized a strong hospitality brand with this style tile through the use of stroked icons to bring a sense of elegance to the tile. This color palette utilized the rich and earthy tones of brown and red that one typically associates with high-end restaurant experiences and was paired with a soft sky blue and light salmon hue to impart a welcoming feeling. I chose a serif typeface for this style to lend an air of modern refinement to the style tile to reflect the high-end meals patients receive through the program.

 
 

After presenting my style tiles to the client I chose to create my mockups using the first style tile because of its open and atmospheric quality that our client liked. The white space used paired with a crisp CTA color made it quite simple for users to navigate as well. Additionally, the content information was laid out in a way to maximize white space while the use of the sans serif typeface as the main body copy provided clear readability for older patients.

 

Enhancing the user experience

Before creating the high-fidelity mockups, I looked over the UX wireframes to pinpoint areas of confusion.  I learned from my previous usability tests that even having 3 or 4 sub-groups of questions within one page was already considered too long by users and frustrated them in the amount of time it took for them to enter their data. Therefore, a major change that I made was to break the enrollment process from one long scrolling page into separate sections for each question.

Shown here is the shortened version of the UX wireframe for the enrollment process. All of the questions were placed onto one long, scrolling page.

Here is one key screen of the enrollment process, on its own separate page.

 

Additionally, I modified the mobile dashboard screen of the portal system and the on-boarding page of the desktop website with the help of the UX team. I was fortunate enough to work alongside UX team members Nicole and Colleen, who both conducted UX research on Culinary Care. 

 

Because the portal system was a new feature created entirely from scratch by the UX team, I frequently consulted them as I created different versions of the dashboard screen to ensure proper visual hierarchy. The page displayed the number of meals left and the upcoming meal date, which were two of the most important pieces of information users wanted to see when they jump into the dashboard.

 

For the on-boarding page, the UX team pointed out that it was critical for users to be aware of two important factors to the program and the enrollment process:

  1. This program offered free meals at no cost to patients

  2. Once the enrollment form was submitted it could take up to 48 hours for the patient to receive an email regarding their application.

I iterated upon the on-boarding screens based off feedback from the UX team and users to emphasize the necessary details of the enrollment process and meal program. 

onboarding-versions.png
 

Listening to our users

After building out our initial key screens, my team and I set out to test our designs with users comprised of caregivers and patients. For my designs I specifically asked users to give feedback on the topics below to see if the design felt on-brand to them and also to identify the target areas that caused users difficulty.

  • How the homepage made them feel (as it did not have the standard hero image)

  • Their thoughts on the on-boarding page

  • How they used the left navigation module in the enrollment pages

  • How the color palette made them feel

  • Their thoughts on the dashboard layout for the mobile portal system

original-homepage-desktop.png
 

For the home page I refrained from using a hero image and instead opted just for a bold headline. I chose to implement this atypical layout for the homepage to make it stand out from other websites that generally have a large hero image overlaid with text. Unfortunately without a hero image our users stated the homepage looked incomplete and unpolished. (Note: This is a shortened version of the homepage.)

confused-onboarding.png
 

Another area that garnered negative attention was the on-boarding screen that detailed the steps of the enrollment process and what to expect after you submit the form. Having a top navigation bar and footer on the page confused our users because they found the visual style inconsistent in comparison to the other enrollment pages. Users hesitated on this page and often didn’t know where to go next to start the enrollment process. (Note: This is a shortened version of the on-boarding page.)

 

For the enrollment process users struggled with navigating pages. The majority of them thought the left module was for them to click and move onto the next step. Many also didn’t notice the “Next” button because it was slightly below the fold and they’d have to scroll down a little to see it.

confused-dashboard.png
 

Although the meal information was placed on this dashboard page, users did not see it very well and immediately clicked on one of the navigation buttons. Our users stated it took too many clicks to reach their meal details. From observing this interaction I knew the meal tracking information and the upcoming meal date had to be a lot more prominent and I implemented this in the final design.

2.3-location-mobile-shadow.png

I also tested the mobile version of the enrollment process with our users to see if they had any difficulty entering information, especially in the section where the delivery location of the meal was to be selected. Users didn’t have difficulty in navigating each step of flow and overall found the process to be quick and simple. The delivery location section received mixed reviews—some of the users preferred having a selection list of radio buttons to choose the combined hospital and branch names from while others were fine with the separated selection choices of a drop-down menu for hospital name and radio buttons for the branch names.

 

Final Design

After receiving these insights I iterated upon them for the next round of feedback and critiques and then presented my final designs to our client.

Using a high-quality photo as the main hero image made the website look complete and well-done. Our caregivers and patients loved the photography because of its brightness and white backdrop, stating it felt “very open” and gave them a “light and airy feeling like a day at the spa.” I opted for a cheerful blue as the main CTA color instead of the green I used before because users stated green reminded them of medical scrubs. This statement didn’t necessarily carry a negative connotation, but nevertheless I chose the blue to guide users away from thoughts related to their chemotherapy treatment. View the desktop prototype here.

Clickthrough-desktop1.png
 

I also presented our client with a different option for the home page where equal weight was given to the CTAs for both donors and patients. This layout gave both parties a brief introduction up-front on how they could help or benefit from Culinary Care.

 

Replacing the left side navigation and introducing a top navigation bar made it clear to users which step they were at in the enrollment process. I also removed the numbering system and shifted the cards up so that the Next button wouldn’t fall below the fold. Based on user testing observations, this design decision helped eliminate the hesitation of what to do next once users were done filling out the current form section.

 
updated-dashboard-phone.png
 
 

In the portal system I replaced the navigation buttons that prevented users from seeing the meal information and instead made the meal tracker the most prominent element on the page. I placed the upcoming meal date underneath the meal tracker icon because I wanted users to clearly see that information and this ensured the information wouldn’t get lost among the other elements.

For the mobile screens I made sure the technical design details were all in place. Based off our meetings with the client, I learned that users often clicked the wrong branch of the hospital because they only read the hospital name and not the branch name underneath. I decided to keep the two-fold delivery location selection types. Having the hospital and branch name selections separated would compel users to slow down when choosing their hospital building and decrease the number of patients selecting the wrong branch.

final-mobile-shadows.png

View the mobile enrollment prototype (left) and the portal system (right) below.

 
 
 

I also created a style guide that laid out all UI guidelines for desktop and mobile platforms to ensure brand cohesion across pages. View the style guide here.

Animations can be viewed below.

 

Future plans

If there was more time for this project, I would have liked to explore a few other areas:

  • Provide interested patients a specific Culinary Care URL. This would bypass the donor-facing home page and lead patients straight to the enrollment form process, saving them from having to go to the homepage and search for the enrollment button. It would have been interesting to test out this method of enrollment and see if users did indeed type in the provided URL or if they would just search “Culinary Care” via a search engine.

  • A/B test with photography. Having a professional photoshoot with actual restaurant meals that are prepared specifically for patients could strengthen the website’s overall design. Testing this with other high-quality food photography that was more generic in nature would let us know what type of photography compels users to sign up for the meal program.

  • Conduct several more rounds of user testing and expand the diversity of user types. We did not have the opportunity to test with men, donors, or volunteers during our project timeline and it would’ve been helpful to test these differing user groups to see how each type of user interacts with Culinary Care’s website. This would also help future designers know how to appropriately cater to their needs.  

 

insights

For this project I was able to streamline my testing process much more efficiently by conducting A/B testing to see what versions resonated well with users. I also found it to be particularly helpful in asking very specific and pointed questions during user interviews because users tend to focus on the content and phrasing instead of the overall look and feel. Having users to test is always a great part of the design process, but sometimes there may not be enough time or budget allocated for it. Moving forward my goal is to work faster in creating various high-fidelity mockups so that I can test out many more versions in a shorter amount of time. This will give me more time to implement and iterate more often, leading to a design that is highly focused on what users need.

I was very fortunate to again have the chance to work alongside real clients for this project. I also had the experience of presenting two diverging design concepts for the first time. Engaging with our clients in this regard allowed me to see why they liked or disliked particular elements of each concept. In the future I hope to work on projects where I can do more of this type of concept designing and also be able to test it out on a larger group of users.