-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcareconnect_prototype.html
139 lines (138 loc) · 9.99 KB
/
careconnect_prototype.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="css/baguetteBox.min.css">
<link rel="stylesheet" href="css/style.css">
<title>CareConnect Prototype</title>
<link rel="icon" href="imgs/favicon.png">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138350456-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-138350456-1');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="javascript/baguetteBox.min.js" async></script>
</head>
<body>
<a href="#main" class="jump">Jump to Content</a>
<header>
<div class="global-nav" id="topnav">
<div class="navbar">
<div class="navbar_link navbar_link-brand">
<a href="index.html">Amanda Bassett</a>
</div>
<div class="navbar_link navbar_link-toggle" aria-label="menu icon">
<i aria-hidden="true" class="fas fa-bars"></i>
</div>
<nav class="navbar_items navbar_items--right">
<ul class="navbar_link">
<li><a href="index.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="docs/portfolio_resume.pdf" target="_blank">Resume (PDF)</a></li>
</ul>
</nav>
</div>
</div>
<div class="spacer">
</div>
<div class="banner" id="careconnect">
<h1>CareConnect</h1>
<h2>An app geared toward connecting the caregiver community.</h2>
<img src="imgs/careconnect_phones.png" alt="phone screen header image">
</div>
</header>
<div class="content">
<main id="main">
<div class="project-section">
<h2>Overview</h2>
<p><strong>Problem: </strong>Caregivers often face high levels of stress, burnout, and isolation. More people are facing these challenges as the population ages. Through my design, I hoped to increase social support for caregivers.</p>
<p><strong>Solution: </strong>An app that builds community among caregivers by connecting people in similar situations.</p>
<p><strong>Duration: </strong>Academic project lasting four months.</p>
<p><strong>Role: </strong>Interaction Designer.</p>
</div>
<div class="project-section">
<h2>Alternatives</h2>
<h3>What are some potential solutions?</h3>
<p>To start out, I conducted some initial research into the problem space to learn more about caregivers and their unique needs. From looking into the literature, I learned that caregivers frequently struggle with isolation, especially those who are part of the <a href="https://www.apa.org/helpcenter/sandwich-generation"> sandwich generation</a>.</p>
<p>After considering the problem space in depth, I sketched several possible solutions. I created a storyboard for each potential solution, and I settled on an app-based approach after considering each idea’s workflow and feasibility. While there are plenty of support groups and similar solutions available through city governments and other organizations, the digital space is somewhat lacking for caregivers. Most websites and apps primarily focus on providing information for managing loved ones' conditions rather than connecting people.</p>
<img src="imgs/solution_sketch.png" alt="Sketching Alternatives"/>
</div>
<div class="project-section">
<h2>Personas</h2>
<h3>Who are my users?</h3>
<p>To better understand my users, I did some research to learn more about caregivers' experiences. I read journal articles as well as documentation from the Alzheimer's Assocation, the Caregiver Space, and other relevant resources to inform the creation of three personas. From my research, I learned that most caregivers in the U.S. are older themselves (50+). Many caregivers are also taking care of a child and holding a full-time job in addition to caring for an elderly relative.</p>
<div class="gallery">
<a href="imgs/persona_revised.png">
<img src="imgs/persona_revised.png" alt="primary persona"/>
</a>
<a href="imgs/persona1.jpg">
<img src="imgs/persona1.jpg" alt="secondary persona"/>
</a>
</div>
</div>
<div class="project-section">
<h2>Prototyping</h2>
<p>Based on my personas, I identified the need for a <strong>tailored experience</strong> within the app. My users would receive the most benefit from being able to meet other caregivers facing similar challenges, so I gave users the option to input information about their individual situations during account setup. To build community, I provided users with the flexibility to search for groups by mile radius. I began to draft my solution, beginning with paper prototyping. Pictured is my second draft, which incorporates feedback from potential users.</p>
<img src="imgs/final_paper_prototype.jpg" alt="paper prototype"/>
</div>
<div class="project-section">
<h2>Digital Prototype</h2>
<p>After testing my revised paper prototype again with peers and caregivers, I created my digital prototype. Based on the feedback I received from users, I streamlined the account setup process and incorporated a tutorial into this version.</strong></p>
<a href="https://xd.adobe.com/view/ac9f8af4-27d6-4dd5-5f14-f4246e078018-daae/" target="_blank" class="button">View Interactive Prototype</a>
</div>
<div class="project-section">
<div class="sidebyside_imgleft">
<img src="imgs/careconnect_phones.png" alt="Careconnect phone screens"/>
<p>When first setting up the app, users can input information about their unique situations so that the app can tailor its suggestions and provide a <strong>personalized experience.</strong></p>
</div>
<div class="sidebyside_imgright">
<p>After initial setup, the user is taken to the home screen, where tailored recommendations are displayed at the top. There is an option to search by keyword or mile radius, and groups that aren't in the top row of recommendations are sorted by mile radius. <strong>Emphasizing groups that are close to home</strong> helps to build community locally and makes it easier for users to participate. </p>
<img src="imgs/phone1.jpg" alt="Careconnect phone screens"/>
</div>
<div class="sidebyside_imgleft">
<img src="imgs/phone2.jpg" alt="Careconnect phone screens"/>
<p>Choosing a group from the home screen takes the user to a details view. All groups have information regarding <strong>accessibility accommodations.</strong> This decision was made based on comments from caregivers that it can be difficult to find social activities that accommodate these needs. Additionally, group creators have the option to cap groups. A <strong>smaller group size encourages participation,</strong> thereby building community and a supportive network.</p>
</div>
</div>
<div class="project-section">
<h2>What I learned</h2>
<p><strong>1. Iteration is the key to good design.</strong><br>
My first prototype was missing several interactions that were fundamental to my final prototype’s success. Through multiple rounds of revision based on user feedback, I was able to weed out major design flaws and streamline the interface of my project.</p>
<p><strong>2. Feedback is a gift.</strong><br>
While my peers and I were hesitant at first to share our honest critiques, their perspectives helped me to refine my work enough to focus on the small details. Positive feedback was just as important as constructive criticism. Seeing my users complete some interactions with no problems showed me which components would be central to the project’s success. When my users didn’t notice the design decisions at all, I knew that these decisions had been effective.</p>
</div>
</main>
</div>
<footer>
<nav class="bottom-nav">
<ul>
<li><a href="fares.html">PROS Internship</a></li>
<li><a href="careconnect_prototype.html" class="current">CareConnect Prototype</a></li>
<li><a href="opensap.html">OpenSAP Research</a></li>
<li><a href="ascend.html">Ascend UX</a></li>
</ul>
</nav><br />
<br />
<div class="icons">
<a href="mailto:[email protected]" aria-label="Email to [email protected]" class="email-icon">
<i aria-hidden="true" class="fa fa-envelope"></i>
</a>
<a href="https://www.linkedin.com/in/amanda-bassett-62b06887" aria-label="LinkedIn" target="_blank" class="linkedin">
<i aria-hidden="true" class="fab fa-linkedin-in"></i>
</a>
</div>
<span class="copyright">
© Amanda Bassett 2019
</span>
</footer>
<script src="javascript/my_javascript.js"></script>
</body>
</html>