The Problem
The organization has recently created a "care card" that you hand to someone facing hard times and now due to its popularity would like to create web version.
The popularity of the "Care Card" has grown so much that organization has decided to build a web version in order to make the process to help someone more efficient as well as more popular.
The emotions of someone grieving or someone ill are very fragile therefore while we aim to create an efficient mobile product we also aim to capture some of the personality and personal touch that the original "care card" had.
Key Goals
"To capture the personality of what existed as a print piece and transfer it to a working website without losing its personal touch"
Make of the Team
Nicholas Carlile
Austin Griggs
Brett Turner
Tools
Sketch
Invision
Survey Monkey
My Role
My role was to serve as the lead User Researcher as well as lead the product design.
My role was to manage this project from the start up until the point to where I helped the developers build the website. My team and I completed the project kick off, as well as the stakeholder interviews and from there I was responsible for planning and executing research activities.
Once the initial research was completed I served as main designer. I consistently presented deliverables to my supervisor for the duration of the project but ultimately I lead the design of the product as well as the user testing.
Discovery
Before we dove into the design and building of this product we first went through the discovery phase. In this analyzed business goals, created the product roadmap and strategy, and planned user research.
To start this project off we first met and discussed the scope and goals as a team so we all are on the same page from the very beginning. Following this we met with the product owner, Ashley, to discuss the business goals, the overall goals and direction of the organization, as well as her personal goals and expectations.
Next we identified our ideal user which, for this project, was extremely broad. Death and illness can happen to anyone therefore the target user group varies greatly in age and demographics.
Once we identified some target users we set out to start our user research. The first round of research consisted of 12 user interviews and 5 people completing a survey we had created.
Key Insights
-
Dealing with loss and sickness brings out an extremely wide range of emotions depending on your situation
-
Everyone can always use some kind of assistance however the type of aid needed can range widely depending on the specific person
-
Micromanaging people you know in order to assist you can become so stressful and bothersome that many often chose to reject help all together
-
The user base can be extremely broad, from age groups, demographics, technology knowledge, and location
-
This is a very personal time for the user
Key Experience Principles
-
Personal Touch: The original "Care Card" kept the process a little more personal so it is important to bring that personality to the new web product.
-
Options: Narrowing in on the most important options for help will help the sender know how exactly they can help and will help the recipient choose what they need done without the added back and forth between the two users.
-
Quick: Eliminating any extra steps is very important. We want the user to complete the task as quick as possible while achieving their goal.
-
Simple: Keeping the design simple and straightforward with signifiers will help our broad user base achieve their goal.
Understanding The User
We gained a solid understanding of the user through face-to-face interviews, surveys, card sorting exercised, user personas, user journeys, and user testing.
We conducted the initial face-to-face interviews in order to gain an idea of what the users would go through immediately following losing someone. We wanted to get insight on their struggles, what their days would be like, what kind of tasks they were completing, what kind of devices they would be using, and to see how they were feeling at different parts of the day.
We then created a survey and sent it to 5 of our interviewees a few days later. The purpose of this was to get insight on the tasks they needed help with. We sent this survey a few days later so that the research pool would have a few days to think about things they have needed during these times.
Empathy Map
My team and I created several user personas and empathy maps based on the research we found in the discovery phase in order to identify some pain points based on what they will see, hear, say, do, thinks, and feels.
Information Architecture
Once our initial user research was complete the team and I created a user flow and moved onto analyzing content and creating the Information Architecture.
Once we had the user research in front of us the team and I went through several possible user flows and finally decided on a structure that adhered to our original principles, simple and direct.
After we had the product structure laid out we started analyzing content. We wanted to keep each screen short and direct without confusing the user. We wanted the right amount of signifiers, the smallest amount of screen real estate, and only the absolute minimum amount of buttons or call to actions.
We then decided to conduct some more user research and really get a few users involved by doing one round of individual card sorting with a few users to see how they would expect to see this website structured, what they thought they might need, what they didn't think they would need, and what the website still needed in order for them to feel successful and be successful.
For the final step in our process we went back and finalized our information design based on the feedback and completed our wireframes in order to begin our UI design.
User Testing
We tested our wireframes against key tasks with our Invision prototype. This helped us identify user frustrations we needed to address so we could improve our designs. Here is some feedback and observations we received from user testing:
User 1: John
-
John was able to navigate through the prototype with ease, using common gestures on his mobile device as he would "like he was checking his email".
-
John navigated to the top of the screen for a second time to read the instructions to continue.
Feedback:
-
He already knew to scroll so the arrow signifier we had didn't really matter to him
-
He needed a second look at the instructions so he mentioned having them split up throughout the page
User 2: Sue
-
Sue spent time staring at the background images
-
Sue also had to take a second look at the instructions for reassurance
-
Sue second guessed herself when using the drop down buttons
Feedback:
-
Sue also wished the instructions were split throughout the page
-
Sue wanted reassurance with the actions she was taking on the page
Final Ideation
Based on the user testing and the feedback we went back to the drawing board and created our final product.
Once we had completed the round of user testing we took all of our feedback and re-design our website based on all of the information we had received.
We split up the instructions so that the instructions are visible for the step in which they apply. We also got rid of any images as they could pose as a distraction. Finally we designed the drop down menus so that they are clear buttons and changed the design so that the user will be reassured of what they are doing.
Key Learnings
Next Steps:
-
Our next steps will be to do one more round of user testing. We plan to do a A/B test with the previous prototype and the most recent decent.
-
From there will we re-design or edit anything necessary and start to build our product with the developers
Lessons Learned:
-
We learned a lot about the constantly changing emotional state of those who have recently lost someone
-
My team and I lacked communication with a developer at the beginning of the project phase to really understand what information is required from each user to make this product a reality. This taught us the importance of working with developers at the beginning of a product cycle to fully understand the technology you are building for.