Javier Guzman

Love Smiles is an Illinois-based non-profit focusing on pediatric cancer awareness and support. This design started as a three month graduate school project aimed towards assisting local organizations with their design related needs. The founder came to us asking for a landing page for the existing Love Smiles mobile app, however our team deemed the existing app inadequate and decided to build out a full website instead.

After the initial project was completed I was contacted by the founder to continue working with them on the website. Since then I have reworked certain sections of the website to better promote publisher and author partners. Additionally, I implemented the Love Smiles online store which features a program that has helped send over 150 gifts to children battling cancer in the time it's been running.

The Team

Tools Used

My Role

Javier Guzman

Figma

User Research

Cindy Aronson

OptimalWorkshop

Concept Testing

Melissa Boyce

UserZoom

UX Design

Paola Favela

Adobe Photoshop

Upkeep & Expansion

Jennifer Wittman

Mural

Content

Launch & Future Visions

Background

"I wanted to give other parents the peaceful moments I had found." - Jenna Brown, Love Smiles Founder

Love Smiles is an Illinois-based 501(c)(3) non-profit organization dedicated to bringing awareness to pediatric cancer that works with children’s authors to provide special moments for children and their families fighting pediatric cancer. The founder hoped to provide stories to children and parents to hopefully give them peaceful, normal moments amidst the endless appointments and procedures that she and her daughter had also gone through.

Love Smiles can to use with a request for a landing page to bring people to their mobile app. Despite the limited time-frame we had to work with, our team decided to expand the scope of the project to include a full website after initial reviews of the mobile app which raised worries over it's usability and user experience.

The Challenge

With a limited amount of time, which was originally meant to be used solely for a landing page, we were up against the clock.
Additionally, even before initially scoping out the size of the project, we knew we were going to have to meet the needs
of multiple different groups with this design while leaving room for future growth.

Discovery

Pre-Existing Issues

A poor mobile application

Lacking online presence

Lack of partnership opportunities

Solution Goals

Replace the app with a website

Funnel users to the website first

Prominent Author & Publisher
showcases

Our main goal at this point was to create the main portal for Love Smiles

We knew after an initial review that we needed to provide Love Smiles more than just a landing page. Their existing mobile application was mess, it would not have held up to the ambitious goals and content the founder had set her eyes on. Additionally, Love Smiles at this point was extremely limited in their online presence, operating mainly through a Facebook page, the organization's information was essentially being gatekept by either a Facebook account or a mobile app download, which resulted in users in the past asking for a more straightforward website instead.

Our goal with the website was to provide solutions for these problems while also providing a platform that potential business partners would be more likely to work with. We wanted the new Love Smiles website to be where users are sent to first, where the main content was housed, and most importantly completely replace the existing app with a functional mobile version as well.

Ideation

Laying A Foundation

The first thing we wanted to do was create a project brief to lay a strong foundation and road for a streamlined design process in the short amount of time we had available. In this project brief we included all of the information we collected during our discovery phase through interviewing the founder and compartmented them into easy to digest points and ideas that we could reference going forward. This project brief was also used as a presentation piece to show the Love Smiles board that we understood their current issues and needs and give them confidence in our ability to produce exactly what they needed.

Comparative Analysis

Apart from the information we gathered from the founder herself, our team wanted to see what other similar organization were doing and providing with their websites. We took a look at dozens of examples, and ultimately narrowed down our focus to four organizations who we thought were the most similar to Love Smiles. We used these websites, alongside the information we gathered from the founder, to assist us in creative a rough list of features that we felt were requried for such a website and color coded them so that we could focus on those which felt were more important.

User Personas / Profiles

From our initial conversation with Jenna, the founder of Love Smiles, we had a good idea of who our users were going to be as she had gone through a similar journey with her own daughter and thus understood the different types of people at every step of the recovery process. Using that information we created the following personas/profiles to allow us to get a better understanding of each different type of potential user and their specific needs. For example, the needs of a publisher or author will not directly overlap with the needs of a caregiver or child, and yet we have to include both of their needs into the website in a coherent way.

Preliminary Style Guide

Finally, we wanted to include the founder in the design process due to the importance the organization for her. Taking inspiration from her existing logo and app we created the following preliminary style guide to introduce various fonts and colors that we were considering using and let her have the final say in the exact combination to be used.

User Flow & Key Tasks

One of the main issues the existing mobile application had was the convoluted menus leading users down multiple page paths to find the content they were looking for. We knew we also had to take care when creating the website due to the wide variety of content that was planned to be available. Before starting on wireframes and the information architecture, we took the time to create some key tasks that we felt were going to encompass major areas of the website which we could then use guide the pages we'd wireframe as well as to test during our user research phase.

Wireframes

Crazy Eights

We started with a crazy eights session, diving up key features we wanted to design pages for between each person in our group. This helped us narrow down what type of content would go on each type of page. At the end of the exercise we discussed what we worked on and picked out the illustrations we felt best represented the structure of the pages to reference going forward. Below are some examples of the illustrations we chose to base some of our later work on.

User Research

Round 1

We had one main goal with our first round of user research at this point in time: Information Architecture & Clear Terminology.

Because we had a large amount of potential content we had to take into account when creating the website we knew that the most important thing to keep in mind was making sure content was where it was expected to be and that getting there felt natural. Thus we started by recruiting 26 participants for a tree test aimed to iron out any issues we potentially had with the structure of the website, the terminology we were using, and make sure users understood where various content was housed.

Information Architecture

After this initial round of user testing we decided to reevaluate our information architecture and the terminology we used across the website. While the founder was keen to certain words and flowery language our testing clearly showed that this type of language was not beneficial to the website's navigation. The image below shows the revised information architecture framework we used for our second iteration of the website which we then used this second iteration for our second round of user testing and interviews.

Round 2

For our second round of user testing we recruited we recruited families of pediatric cancer patients, friends of families, and authors to better represent the range of groups who were expected to use the website. These participants took part in both a short interview to gather general impressions and opinions on the website's visuals as well as a task analysis involving 8 tasks which asked users to navigate to different sections of the website so that we could get a grasp on the revised information architecture and terminology. Collection of this data was followed by an affinity diagram to better understand the themes of issues that had arisen throughout the testing. While some of the issues we had previously had seemingly been resolved through the work we did previously, a couple new issued arised, as seen below, which we had to take care of going forward.

Refinement

Finalized Style Guide

With all the information in place, we set out to remedy as many issues users had as possible. However, we understood that no design is perfect, and that are always elements that can be refined, and as our time was running low we chose which issues to prioritize more heavily from the data we collected during our research.

First, we created the following finalized style guide to make sure anyone working on the website in the future could keep the same visual style easily.

Terminology and Navigation

Additionally, we worked on the terminology used throughout the website by settling for less verbose language and instead using terms more commonly seen on other websites. Apart from following our revised information architecture to get improve on the terminology, we also narrowed down the issues we observed issues into five we considered the most important . These five suggested changes, seen below, were based on our previously research and aimed to make section of the website easier to find and interact with.

Finally, we decided to cut out sections of the website which didn't have content ready, such as the podcasts, in hopes that less content overall would equate to users have an easier time navigating the website and less chances of them stumbling upon empty pages.

Example of Issue 1 solution

Below is an image of the finalized Love Smiles Homepage. During our second round of testing, participants were observed to be attempting to click on the yellow banners, which were purely decorative at the time and did not have accompanying buttons linking them to their respective sections. Participants were having trouble finding these sections as we initially intended so a simple solution was, instead of reworking the navigation once again, to instead follow the path of least resistance and let users click on these banners that they thought were clickable. If users are trying to use an unintended, non-working path, just make that a new path.

Future Visions

Setting Them Up For Success

After successfully launching the website, which the founder and her board members loved, we decided to finish the project by giving them a list of future recommendations that aligned not only with their own aspirations of growth, but also provided a direction for anyone they employed to work on the website in the future.

Provide a way to opt-into notifications when a new major feature or page is added to the website
Keep the purpose of the website in mind as the organization grows
Test with users periodically as the content is finalized and links are updated or changed
Experiment with different logo designs to integrate the logo with the overall website typeface.

The first recommendation from the list specifically resulted from the research we did that pointed towards users wanting to be informed about new content or events. We thus came to the conclusion that for users not following the Love Smiles social media platforms, these notifications would be the "reminders" to keep users steadily returning and hopefully taking part in Love Smiles' events. The caveat being that because the website was new and quickly growing, giving users the ability to set the frequency of these notifications would be helpful as to not inundate them with every single update.

Continued Partnership

I was contacted by the founder of Love Smiles around a month after our initial project to come back and continue working with them and the website. I agreed to return and work on whatever they need, which first meant cleaning up some minor issues that resulted from our original limited time-frame such as some SEO problems, dead links, and organization of downloadable partner materials. However, the major work I've done for them has been a redesign of the authors page which resulted in many more profiles being able to included on a single page in an organized manner as well as the creation and implementation of an online store for Love Smiles to sell merchandise and gift packages that can be donated to children in hospitals. Examples of both pages can be seen below.

Currently we are working on expanding the partners page, which involves communicating with both the Love Smiles board members as well as publisher partners, such as Penguin Random House, so that we can provide partners with effective promotion and visibility on the website while not intruding on the overall user experience.