Life in motion

Client: Life in Motion Role: UI designer Tools: Sketch, Illustrator, InVision Timeframe: 4 weeks

Life in Motion is an end-of-life planning guide currently available as a printable PDF version. The idea is to save time and trouble for people in the end-of-life process and their loved ones.

Challenge

Our challenge was to design a solution that would encourage users to start work on an end-of-life task list and finish it. The second is to engage families to help during this process and to convince the distressed user to view Life In Motion as the easy gateway into the End-Of-Life planning process. We aimed to create designs that would lighten the heavy implications of the product’s subject matter.  

Users research summary and wireframes

The client provided a user research summary and wireframes to us. Based on the research we learned that users who buy the “Life in Motion Guide” rarely finish all the tasks involved in end-of-life planning. Users also needed help from a family member or loved one during this process. 

Empathize with personas

The majority of Life in Motion Guide users are women over 50. The primary goal for personas was to save their family time and trouble.

Jasmine Williams ” I don’t want to be a burden to my family. I want to share information so they don’t have to look for it if I need help.”

Nancy Smith “I feel better knowing my family won’t be lost if something happens to me.”

Visual Competitive Analysis

This project was a challenge for me and my team and we tackled this problem by trying to learn as much as we could about the field and meet competitors. We wanted to know how our competitors worked and how they implemented UI elements and design.

We analyzed several competitors and recorded their approaches. Here are some of the key takeaways from our analysis.

Everplans use real people photography. Use of blue as primary and green as secondary colors extend on many screens. The combination of Serif and Sans-Serif font fits well.
Join Cake has a good balance between illustrations, photography, and icons. Lighter colors such as blue, green and yellow dominate the entire site. Enough white space makes it clear and understandable.
My team also looked at Trust & Will. As seen above this company used blue and green as primary colors and illustrations instead of photography. The use of white space makes the screen incomplete.

After analyzing competitors, we synthesized our takeaways into design principles. The primary takeaway was to use both, photography and illustration to the balance of seriousness and fun. We also wanted to make more well-balanced information so every step is known for the user. Additionally, we decided to play with bright colors to delight the users.

Design Principles

Style exploration

After we analyzed competitors and came up with design principles, we started working on our individual design solutions. Each designer created three moodboards and style tiles, and that was the first step that I made towards that solution.

Within my first moodboard and style tile, I wanted to evoke feelings of connectivity and create an inviting environment for the users with warm colors, and photography of real people.
My second style was minimal and clean. Using grey along alongside a yellow color, sharp corners with simple and clear UI elements I sought to achieve a more clear, serious and elegant feeling.

With the third style, I wanted to invoke a more friendly feeling. I choose illustration, game elements (progress bar), and social media elements (connection with other people). 

Our team conducted desirability testing. The goal of testing was to gain insight into what visual elements resonated best with users close to our target audience.

The desirability testing highlighted a clear direction to go. I chose to move forward with my third style tile based on the desirability testing feedback I received. Our testing participants liked the illustrations of style 3 better than real-life photos. They appreciated the simple colors. Users were drawn to the social media aspects of the imagery, which connects them to other people, meaning they are not alone at the end of the life planning process.

High fidelity

After testing the rough draft of the screens, which led to the final version in the next section, we tested our design direction for both desirability and usability. 

The goal of testing was to see if individuals understand the different concept features of the web product, determine if they are able to navigate through the screens and know if the web product provides enough value for them to use.

Home Page

At the bottom of the page, you can see the final version of the home page. My idea was to catch customers’ attention and make them feel welcomed. The specific choice of color, imagery, and illustrations allowed me to succeed in that. Karen, the author, also made a great influence with her introduction video and contributed to the customers’ satisfaction. 

Module Page

Furthermore, the goal after triggering them and getting their attention was to provide them with all the necessary information regarding the six modules on the Module page. The icons on the Module page were especially eye pleasing and practical according to interviewees. Progress on each of these served as a great stimulant to manage the tasks in time.

Super Module Page

The page that required extra attention and time was the Super Module Page, since it was a real challenge to create a page that will be clear and easy to follow, but still contain all the crucial information. The end-of-life planning is really unique in that it has an option to add personal tasks as well as the ability to share the checklist with friends or family.

Account Creation

The whole idea of creating a free account is for users to feel like it was worth it and protect their personal information since only a little portion of personal information is required while getting a decent amount of information about how beneficial the registration can be. 

Contact List

Add New Contact

Adding new contacts and following their progress is an ideal way to finish all the tasks completely and thoroughly.

Notification

Last but not least, notifications play an important role on this website. Customers would get texts or emails to continue filling out the checklist and report about the progress of the checklist members.

Check Prototype

Prototype link

Future recommendation

There is some future consideration for improving the “Life in Motion” project. This is my suggestion for the next designer team.  

– Onboarding process

When the onboarding process is designed correctly it increases the percentage of application adoption.

– Explore the ideal checklist development route

My team offered two checklist solutions and both were successful. Additional testing can select the right ones.

– Design for mobile

Designing a phone app would increase the number of users.