Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

portfolio-website/spine.html

Go to file
 
 
Cannot retrieve contributors at this time
214 lines (209 sloc) 12 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spine</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Source+Sans+Pro&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<title>Spine</title>
</head>
<body>
<script src="three.min.js"></script>
<div class="canvas">
<section class="navbar">
<nav>
<a href="index.html"><img src="img/yucheng-logo-v1.png" alt="personal logo" height= "72px"></a>
<div class="nav" style="font-size: 1.2em;">
<a href="" class="hvr-underline-from-left" style="font-weight: bold">Work</a>
<a href="" class="hvr-underline-from-left" style="font-weight: bold">About</a>
<a href=""class="hvr-underline-from-left" style="font-weight: bold">Resume</a>
</div>
</nav>
</section>
<div class="content">
<br><br><br>
<section>
<img class="banner" src="img/mockup.png" alt="banner">
</section>
<br><br>
<section>
<h1 style="font-weight:700">SPINE</h1>
<br>
<div class="spine-intro">
<div class="spine-intro-item1">
<h2>Overview</h2>
<p >The Spine app is a self-management platform designed to help people ages 18-60 years with chronic low back pain(cLBP) to better deal with pain and enhance living well. It is part of a research study of the School of Nursing, University of Connecticut.</p>
<p>It provides video modules focused on physical activity and biweekly phone consultation from nurses to facilitate symptom monitoring and problem-solving. It also encourages patients to establish their goals and keep track of them in order to help patients enhance self-management skills. Our team is tasked to redesign the app and improve the user experience.
</p>
</div>
<div class="spine-intro-item2">
<h2>Role</h2>
<p>User Research, UI/UX design, Motion Design</p>
<br>
<h2>Team</h2>
<p>Yucheng Hang, Renoj Varghese</p>
<br>
<h2>Tool</h2>
<p>Adobe Illustrator, Sketch, After Effects, InVision</p>
</div>
</div>
</section>
<br><br>
<!-- <section>
<h1>OBJECTIVES</h1>
<div class="objectives">
<div class="objectives-1">
<h2>01</h2>
<p>Improve the usability of the Spine App</p>
</div>
<div class="objectives-2">
<h2>02</h2>
<p>Give the Spine App a new visual design language</p>
</div>
<div class="objectives-3">
<h2>03</h2>
<p>Create Learning Module Animations for patients to learn self-management and physical activities</p>
</div>
</div>
</section> -->
<br><br>
<hr>
<section class="prototype">
<br><br>
<h1>INTERACTIVE DEMO</h1>
<video autoplay>
<source src="video/demo-spine.mp4">
Your browser does not support the video.
</video>
<p><a href="https://projects.invisionapp.com/share/7YX16V5E9PT#/screens/415183141_Welcome">Explore the demo by yourself!</a></p>
</section>
<br><br><br><br>
<section >
<hr><br><br>
<h1>RESEARCH PROCESS</h1>
<section>
<h2>Review of Current App</h2>
<p>The design team reviewed the current app alongside stakeholders to gain an understanding of the requirements.Some limitations of the current app were:</p>
<br>
<ul>
<li>Users lacked the ability to manage their goals.</li>
<li>Users were frustrated when going through video modules.</li>
<li>The modules lacked appeal.</li>
<li>Researchers were not able to track user activities.</li>
</ul>
<img style="max-width: 100%; margin-top: 3em"src="img/original-ui.png" alt="orginal ui">
<p style="text-align: center;">The Origianl UI</p>
</section>
<section>
<br><br>
<h2>Key Insights</h2>
<p>After reviewing the current app with stakeholders, we listed all the limitations and problems and concluded into 3 key insights.</p>
<br>
<div class="objectives">
<div class="objectives-1">
<h2>01</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<p>Users had trouble navigating the important tasks of understanding learning modules, logging physical activity,and tracking goals.</p>
</div>
<div class="objectives-2">
<h2>02</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<p>Not much time was dedicated to the visual design and feeling of the app.</p>
</div>
<div class="objectives-3">
<h2>03</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<p>Video modules are not engaging to users to follow and complete activities.</p>
</div>
</div>
</section>
<br><br>
<section>
<h2>Opportunities</h2>
<p>Based on the key insights, we came up with 3 opportunities aligned with them which we believe can help improve the usability of the app and promote the overall user experience.</p>
<br>
<div class="objectives">
<div class="objectives-1">
<h2>01</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<p>Improve the usability of the app to make it easier for users to fully engage in managing chronic back pain.</p>
</div>
<div class="objectives-2">
<h2>02</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<p>Develop a suitable and appealing visual design language.</p>
</div>
<div class="objectives-3">
<h2>03</h2>
<hr class="line3" style="position: relative; bottom: -8px;">
<P>Provide engaging and interactive modules to help patients gain positive learning experience.</P>
</div>
</div>
</section>
<br><br><br><br><hr><br><br>
<section>
<h1>REDESIGN PROCESS</h1>
<br>
<div>
<h2>Information Architecture</h2>
<p>Usability research showed that users had trouble navigating the app to find learning modules, set goals, and track activities. One of the first steps in the redesign process was to simplify the information architecture to tackle these usability concerns.</p>
<div class="information-architecture">
<h3>Original</h3>
<img style="max-width: 100%" src="img/information-architecture-1.png">
<h3>Redesign</h3><br>
<img style="max-width: 100%" src="img/information-architecture-2.png">
</div>
</div>
<br><br>
<div>
<h2>Design System</h2>
<p>One of the main endeavors was to give the SpineApp visual depth. The following design system represents the organic and calm mood established in the app.</p>
<br>
<img style="max-width: 100%" src="img/design-system.png">
</div>
<div>
<h2>User flow & High-fidelity mockups</h2>
<img style="max-width: 100%" src="img/complete-module-study.jpg">
<img style="max-width: 100%" src="img/user-flow–goal-activity.png">
<img style="max-width: 100%" src="img/user-flow–goal-checkin.png">
<img style="max-width: 100%" src="img/contact-nurses.jpg">
</div>
<br><br>
<div>
<h2>Redesign Module Videos</h2>
<p>Since the app is currently in the development stage, I cannot show the whole videos here. Therefore, I selected some clips of the animation videos to help getting the sense. </p>
<div>
<video autoplay>
<source src="video/Buttocks VO FINAL.mp4">
Your browser does not support the video.
</video>
<video autoplay>
<source src="video/Eyebrows_Smile VO FINAL.mp4">
Your browser does not support the video.
</video>
<video autoplay>
<source src="video/demo-spine.mp4">
Your browser does not support the video.
</video>
</div>
</div>
</section>
</div>
</div>
</body>
</html>