Cancer Survivors Network
Designing a Mobile-Friendly Interface for the American Cancer Society’s Cancer Survivor’s Network
TIME FRAME: 4 months | TEAM SIZE: 5 members | ROLE: Product Designer
BACKGROUND
The American Cancer Society’s (ACS) Cancer Survivors Network (CSN) is a dynamic online community created by and created for people affected by cancer. CSN provides a private community for its users to interact and share their experiences. Members of the community are encouraged to contribute, although content is not endorsed by ACS. The website was initially launched in July 2000, but has not been changed since and is in need of an update, especially in the time of mobile and responsive sites.
There is a ton of information and documentation from this project that would be too much to put in one post. However, if interested, you can read the full report here.
DISCOVERY
Before diving into the low fidelity prototyping, we took a look at CSN’s current state and its users to better understand priorities in the mobile redesign. Some of the discovery and research work we did up front included:
A thorough literature review of previous research efforts
Competitive analysis of other similar social networks
Task analysis
Developing personas based on interviews with users
Storyboarding
Visioning
We confirmed that consistent styling and flexibility to users between the web and mobile platforms is important for user loyalty and trust in participating in the community. In addition, the organization of content of the current site had opportunities for improvement to give users a better understanding of the navigational flow.
VISUAL DESIGN
After spending a good chunk of time on discovery research, we moved on to different levels of prototyping: low-fidelity (whiteboarding wireframes and creating paper prototypes), medium fidelity (using Adobe Illustrator), and high-fidelity (using InVision to create the interactions).
We drew 10 iterations for each feature:
Discussion topic page
Chat
Search
As you might be able to tell from the hexagonal sketch, we were trying out a bunch of new designs to think more outside the box—the worst thing that could happen with a funky design is not using it, and the best is that it can lead to even better solutions.
High Fidelity Designs and Testing
The high-fidelity (hi-fi) prototype screens were made using Adobe Illustrator, abiding to the style guide provided by ACS. Building off the screens from the medium fidelity and low fidelity prototyping stages, the we mapped all the screens that may be found in the mobile version of the CSN site on InVision.
User testing for the high fidelity prototype involved conducting think-aloud tasks with a total of seven participants. Each of these participants were prescreened to see if they fit the demographics of typical CSN users; all participants were affected by cancer at some point in their lives, 6 of whom were cancer patients and CSN users, 1 of whom was a patient caregiver but not a CSN user. The main purpose of this round of user testing was to uncover any areas of confusion or frustration in the navigational flow of the site and the overall conceptual understanding of the features. In addition to giving feedback on the functions and features, users provided input on the overall design and aesthetic of the prototype.
Each user was given the same set of tasks to complete:
Log in
Search for Lung Cancer Treatment and sort by blog posts
Read a blog post
Check your notifications and see who added you
Chat with your friend Enrique Iglesias
Respond to a discussion post in “lung cancer” and add it to your favorites
Browse through favorited items
Edit your profile and save
For full information and notes from user feedback, please read the full report here.
NOTES & MOVING FORWARD
As the project came to an end, we delivered a prototype of CSN using Adobe Illustrator and InVision to the team over at ACS. With that, it should be noted that the designs were made with the “mobile first” methodology, as the current website lacked in mobile responsiveness and usability.
The prototypes presented during the duration of this project were all made only as mobile screens, and no desktop screens were rendered. Therefore, the first step would be to have desktop screens designed in Adobe Illustrator and then assembled in InVision. Most of the design elements and interactions will be mostly the same, but nonetheless the desktop designs are a crucial step before the development process.
As a team we convinced ACS about migrating the chat functionality that CSN has to a third-party application. Chatting on a mobile website on with a smartphone isn’t the ideal user experience, and having a dedicated chat application for a smartphone would be more ideal. That said, the presented designs will still be utilized for any third-party chat application.