| Linux server27.hostingraja.org 2.6.32-954.3.5.lve1.4.93.el6.x86_64 #1 SMP Wed Oct 4 17:04:29 UTC 2023 x86_64 Path : /home/udaipurk/www/websites/rohitnagda.com/images/work-portfolio/ |
| Current File : /home/udaipurk/www/websites/rohitnagda.com/images/work-portfolio/navvis-coreo-case-study.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navvis Coreo Platform — UX Case Study</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--purple-deep: #3b1a53;
--purple-mid: #7a329f;
--purple-light: #b286bc;
--purple-pale: #f0e6f2;
--gray-dark: #222222;
--gray-mid: #495057;
--gray-light: #acacac;
--gray-pale: #e0e0e0;
--green: #268240;
--accent: #ef6f48;
--white: #ffffff;
--bg: #0a0612;
--bg2: #110d1e;
--text: #e8e0f0;
--text-muted: #9a8aaa;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
overflow-x: hidden;
line-height: 1.7;
}
/* ── NOISE OVERLAY ── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.35;
}
/* ── HERO ── */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 6vw;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(122,50,159,0.35) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -10%;
left: -5%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(59,26,83,0.4) 0%, transparent 70%);
pointer-events: none;
}
.hero-label {
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--purple-light);
margin-bottom: 24px;
animation: fadeUp 0.8s ease both;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.02em;
margin-bottom: 32px;
animation: fadeUp 0.8s 0.1s ease both;
}
.hero-title em {
font-style: italic;
color: var(--purple-light);
}
.hero-sub {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 520px;
line-height: 1.75;
animation: fadeUp 0.8s 0.2s ease both;
margin-bottom: 56px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 40px;
animation: fadeUp 0.8s 0.3s ease both;
}
.meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.meta-label {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--purple-light);
}
.meta-value {
font-size: 0.9rem;
color: var(--text);
font-weight: 400;
}
.hero-line {
position: absolute;
right: 6vw;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 12px;
animation: fadeIn 1.2s 0.5s ease both;
}
.hero-pill {
background: rgba(122,50,159,0.15);
border: 1px solid rgba(178,134,188,0.2);
border-radius: 100px;
padding: 8px 20px;
font-size: 0.75rem;
font-family: 'DM Mono', monospace;
letter-spacing: 0.1em;
color: var(--purple-light);
white-space: nowrap;
}
/* ── SECTION COMMONS ── */
section {
padding: 100px 6vw;
}
.section-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--purple-light);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.section-eyebrow::before {
content: '';
display: block;
width: 32px;
height: 1px;
background: var(--purple-light);
}
.section-heading {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 40px;
}
.divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(122,50,159,0.4), transparent);
margin: 0;
}
/* ── OVERVIEW ── */
.overview {
background: var(--bg2);
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.overview-text p {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.85;
margin-bottom: 20px;
}
.overview-text p strong {
color: var(--text);
font-weight: 500;
}
.overview-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.stat-box {
background: rgba(122,50,159,0.08);
border: 1px solid rgba(178,134,188,0.12);
padding: 32px 24px;
transition: background 0.3s;
}
.stat-box:hover { background: rgba(122,50,159,0.15); }
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--purple-light);
line-height: 1;
margin-bottom: 8px;
}
.stat-desc {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
}
/* ── CHALLENGE ── */
.challenge-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.challenge-card {
border: 1px solid rgba(178,134,188,0.15);
padding: 36px 28px;
position: relative;
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.challenge-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--purple-mid), var(--purple-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.challenge-card:hover { border-color: rgba(178,134,188,0.4); transform: translateY(-4px); }
.challenge-card:hover::before { transform: scaleX(1); }
.card-number {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 900;
color: rgba(122,50,159,0.25);
line-height: 1;
margin-bottom: 16px;
}
.card-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 12px;
color: var(--text);
}
.card-text {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.75;
}
/* ── ROLE ── */
.role { background: var(--bg2); }
.responsibilities-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 48px;
}
.resp-item {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 28px;
border: 1px solid rgba(178,134,188,0.1);
transition: background 0.3s;
}
.resp-item:hover { background: rgba(122,50,159,0.08); }
.resp-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, var(--purple-deep), var(--purple-mid));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.resp-content h4 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--text);
}
.resp-content p {
font-size: 0.825rem;
color: var(--text-muted);
line-height: 1.65;
}
/* ── STYLE GUIDE ── */
.styleguide-section { background: var(--bg); }
.color-palette {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 48px;
}
.color-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.color-group-label {
font-family: 'DM Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.color-swatches {
display: flex;
gap: 4px;
}
.swatch {
width: 52px;
height: 52px;
border-radius: 4px;
position: relative;
}
.swatch-label {
font-family: 'DM Mono', monospace;
font-size: 0.55rem;
color: var(--text-muted);
margin-top: 4px;
text-align: center;
}
.styleguide-screen-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 48px;
}
.screen-frame {
border: 1px solid rgba(178,134,188,0.15);
overflow: hidden;
position: relative;
}
.screen-frame img { width: 100%; display: block; }
.screen-label {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(10,6,18,0.95));
padding: 40px 20px 20px;
font-size: 0.8rem;
font-family: 'DM Mono', monospace;
letter-spacing: 0.1em;
color: var(--purple-light);
}
/* ── SCREENS ── */
.screens-section { background: var(--bg2); }
.screen-showcase {
margin-top: 64px;
}
.showcase-item {
display: grid;
align-items: center;
gap: 60px;
margin-bottom: 100px;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.showcase-item.visible {
opacity: 1;
transform: translateY(0);
}
.showcase-item.layout-left {
grid-template-columns: 1.2fr 1fr;
}
.showcase-item.layout-right {
grid-template-columns: 1fr 1.2fr;
}
.showcase-item.layout-right .showcase-img { order: 2; }
.showcase-item.layout-right .showcase-copy { order: 1; }
.showcase-img {
position: relative;
}
.showcase-img img {
width: 100%;
display: block;
box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(178,134,188,0.1);
}
.showcase-img::after {
content: '';
position: absolute;
inset: -1px;
border: 1px solid rgba(178,134,188,0.12);
pointer-events: none;
}
.mobile-frame {
max-width: 320px;
margin: 0 auto;
}
.showcase-copy {
padding: 0 20px;
}
.showcase-tag {
display: inline-block;
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--purple-light);
border: 1px solid rgba(178,134,188,0.3);
padding: 4px 12px;
margin-bottom: 20px;
border-radius: 2px;
}
.showcase-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 700;
line-height: 1.15;
margin-bottom: 20px;
}
.showcase-desc {
font-size: 0.925rem;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 28px;
}
.feature-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.feature-pill {
background: rgba(122,50,159,0.12);
border: 1px solid rgba(178,134,188,0.2);
padding: 5px 14px;
font-size: 0.75rem;
color: var(--purple-light);
border-radius: 100px;
font-family: 'DM Mono', monospace;
}
/* ── TECH STACK ── */
.tech-section { background: var(--bg); }
.tech-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 48px;
}
.tech-chip {
display: flex;
align-items: center;
gap: 10px;
background: rgba(122,50,159,0.1);
border: 1px solid rgba(178,134,188,0.2);
padding: 12px 20px;
border-radius: 4px;
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
color: var(--text);
transition: background 0.3s, border-color 0.3s;
}
.tech-chip:hover {
background: rgba(122,50,159,0.22);
border-color: rgba(178,134,188,0.45);
}
.tech-chip-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--purple-light);
flex-shrink: 0;
}
/* ── OUTCOME ── */
.outcome { background: var(--bg2); }
.outcome-statement {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 3.5vw, 2.8rem);
font-weight: 400;
line-height: 1.4;
color: var(--text-muted);
max-width: 820px;
margin: 48px auto;
text-align: center;
}
.outcome-statement strong {
color: var(--text);
font-weight: 700;
font-style: italic;
}
/* ── FOOTER ── */
footer {
padding: 60px 6vw;
border-top: 1px solid rgba(178,134,188,0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.footer-brand {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
}
.footer-brand span { color: var(--purple-light); font-style: italic; }
.footer-meta {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
text-align: right;
line-height: 1.8;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.overview-grid,
.challenge-cards,
.responsibilities-list,
.styleguide-screen-wrapper,
.showcase-item.layout-left,
.showcase-item.layout-right {
grid-template-columns: 1fr;
}
.showcase-item.layout-right .showcase-img { order: unset; }
.showcase-item.layout-right .showcase-copy { order: unset; }
.hero-line { display: none; }
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--purple-mid); border-radius: 3px; }
/* ── PASSWORD MODAL ── */
.password-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 6, 18, 0.8);
backdrop-filter: blur(4px);
z-index: 10000;
opacity: 1;
transition: opacity 0.3s ease;
}
.password-modal.hidden {
opacity: 0;
pointer-events: none;
}
.password-modal-content {
background: linear-gradient(135deg, rgba(59, 26, 83, 0.4), rgba(122, 50, 159, 0.2));
border: 1px solid rgba(178, 134, 188, 0.25);
border-radius: 16px;
padding: 60px 48px;
max-width: 420px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(178, 134, 188, 0.3);
animation: modalSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.password-modal-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
text-align: center;
}
.password-modal-subtitle {
font-size: 0.95rem;
color: var(--text-muted);
text-align: center;
margin-bottom: 36px;
line-height: 1.6;
}
.password-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.password-input-group {
position: relative;
}
.password-input-label {
display: block;
font-family: 'DM Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--purple-light);
margin-bottom: 10px;
}
.password-input {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(178, 134, 188, 0.3);
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 1rem;
color: var(--text);
transition: border-color 0.3s, background 0.3s;
}
.password-input::placeholder {
color: var(--text-muted);
}
.password-input:focus {
outline: none;
border-color: var(--purple-light);
background: rgba(255, 255, 255, 0.08);
}
.password-error {
display: none;
color: #ff6b6b;
font-size: 0.85rem;
margin-top: 8px;
text-align: center;
animation: shake 0.3s ease-in-out;
}
.password-error.show {
display: block;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
.password-btn {
padding: 12px 24px;
background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
border: none;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: var(--white);
cursor: pointer;
transition: transform 0.2s, opacity 0.2s, box-shadow 0.3s;
box-shadow: 0 4px 15px rgba(122, 50, 159, 0.3);
letter-spacing: 0.05em;
}
.password-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(122, 50, 159, 0.4);
}
.password-btn:active {
transform: translateY(0);
opacity: 0.9;
}
.password-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════ PASSWORD MODAL -->
<div id="passwordModal" class="password-modal">
<div class="password-modal-content">
<h2 class="password-modal-title">Access Protected</h2>
<p class="password-modal-subtitle">This case study is password protected.<br>Please enter the password to continue.</p>
<form class="password-form" id="passwordForm">
<div class="password-input-group">
<label class="password-input-label">Password</label>
<input
type="password"
id="passwordInput"
class="password-input"
placeholder="Enter password"
autocomplete="off"
/>
<div class="password-error" id="passwordError">Incorrect password. Please try again.</div>
</div>
<button type="submit" class="password-btn">Unlock</button>
</form>
</div>
</div>
<!-- ═══════════════════════════════════════════ HERO -->
<section class="hero">
<div class="hero-label">UX Case Study · 2018 – 2020 · EMIDS × Navvis Healthcare</div>
<h1 class="hero-title">The Navvis<br><em>Coreo</em><br>Platform</h1>
<p class="hero-sub">Redesigning home healthcare coordination — bridging patients, caregivers, and service providers through a seamless digital experience across web and mobile.</p>
<div class="hero-meta">
<div class="meta-item">
<span class="meta-label">Role</span>
<span class="meta-value">Sr. Product Designer — UI/UX</span>
</div>
<div class="meta-item">
<span class="meta-label">Employer</span>
<span class="meta-value">EMIDS</span>
</div>
<div class="meta-item">
<span class="meta-label">Client</span>
<span class="meta-value">Navvis Healthcare, St. Louis MO</span>
</div>
<div class="meta-item">
<span class="meta-label">Period</span>
<span class="meta-value">Aug 2018 – May 2020</span>
</div>
</div>
<div class="hero-line">
<div class="hero-pill">Adobe XD</div>
<div class="hero-pill">Sketch</div>
<div class="hero-pill">React JS v17</div>
<div class="hero-pill">HTML5 + CSS3</div>
<div class="hero-pill">Bootstrap</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ OVERVIEW -->
<section class="overview">
<div class="section-eyebrow">Project Overview</div>
<div class="section-heading">EHR, reimagined<br>for the home.</div>
<div class="overview-grid">
<div class="overview-text">
<p>Navvis Healthcare needed a platform that could <strong>connect ambulatory patients with home care service providers</strong> — something elegant enough for elderly patients managing daily care needs, yet powerful enough for healthcare coordinators managing dozens of cases simultaneously.</p>
<p>The Coreo Platform extends the Intergy EHR ecosystem into the home, supporting specialties from primary care to OBGYN, pediatrics, and beyond. Our mandate was to <strong>gather, evaluate, and translate user requirements</strong> into a cohesive design system spanning responsive web and native mobile — while also contributing to the React JS front-end implementation.</p>
<p>This wasn't just a design project. As a hybrid designer-developer, I worked embedded with product management and engineering from discovery through delivery, shaping both the visual language and the component architecture that would serve thousands of patients.</p>
</div>
<div class="overview-stats">
<div class="stat-box">
<div class="stat-number">2</div>
<div class="stat-desc">Platforms designed — responsive web dashboard & native mobile app</div>
</div>
<div class="stat-box">
<div class="stat-number">21<span style="font-size:1.2rem">mo</span></div>
<div class="stat-desc">Embedded engagement from discovery to production</div>
</div>
<div class="stat-box">
<div class="stat-number">5+</div>
<div class="stat-desc">User flows — dashboard, requests, providers, visits, video</div>
</div>
<div class="stat-box">
<div class="stat-number">1</div>
<div class="stat-desc">Unified design system spanning both web and mobile surfaces</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ CHALLENGE -->
<section>
<div class="section-eyebrow">The Challenge</div>
<div class="section-heading">Three hard problems<br>to solve.</div>
<div class="challenge-cards">
<div class="challenge-card">
<div class="card-number">01</div>
<div class="card-title">Complexity for Vulnerable Users</div>
<div class="card-text">Patients — often elderly or managing chronic conditions — needed to schedule, track, and manage care visits without friction. Standard healthcare UX patterns were too clinical, too dense, and completely inaccessible on mobile.</div>
</div>
<div class="challenge-card">
<div class="card-number">02</div>
<div class="card-title">Multi-Role Experience Design</div>
<div class="card-text">The platform served two distinct user types: patients managing their own care and service providers managing their availability and applications. One codebase, one design system — two very different mental models to satisfy.</div>
</div>
<div class="challenge-card">
<div class="card-number">03</div>
<div class="card-title">Design to Code Continuity</div>
<div class="card-text">As a designer who also implemented in React JS, I had to ensure pixel-perfect consistency between Sketch/XD prototypes and the live application — maintaining the design system integrity as the product scaled rapidly.</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ STYLE GUIDE -->
<section class="styleguide-section">
<div class="section-eyebrow">Design System</div>
<div class="section-heading">Navvis Coreo<br>Style Guide</div>
<div class="color-palette">
<div class="color-group">
<div class="color-group-label">Primary</div>
<div class="color-swatches">
<div>
<div class="swatch" style="background:#3b1a53"></div>
<div class="swatch-label">#3b1a53</div>
</div>
<div>
<div class="swatch" style="background:#7a329f"></div>
<div class="swatch-label">#7a329f</div>
</div>
<div>
<div class="swatch" style="background:#b286bc"></div>
<div class="swatch-label">#b286bc</div>
</div>
<div>
<div class="swatch" style="background:#f0e6f2; border: 1px solid rgba(255,255,255,0.1)"></div>
<div class="swatch-label">#f0e6f2</div>
</div>
</div>
</div>
<div class="color-group">
<div class="color-group-label">Gradient</div>
<div class="color-swatches">
<div>
<div class="swatch" style="background: linear-gradient(90deg, #67307f, #3b1a53); width: 110px;"></div>
<div class="swatch-label">#67307f → #3b1a53</div>
</div>
</div>
</div>
<div class="color-group">
<div class="color-group-label">Secondary</div>
<div class="color-swatches">
<div>
<div class="swatch" style="background:#268240"></div>
<div class="swatch-label">#268240</div>
</div>
<div>
<div class="swatch" style="background:#c04e59"></div>
<div class="swatch-label">#c04e59</div>
</div>
<div>
<div class="swatch" style="background:#007f84"></div>
<div class="swatch-label">#007f84</div>
</div>
<div>
<div class="swatch" style="background:#ef6f48"></div>
<div class="swatch-label">#ef6f48</div>
</div>
<div>
<div class="swatch" style="background:#3089d7"></div>
<div class="swatch-label">#3089d7</div>
</div>
</div>
</div>
</div>
<div class="styleguide-screen-wrapper">
<div class="screen-frame">
<img src="../../images/work-portfolio/Case-study/style-guide-screen-1.jpg" alt="Style Guide Cover — Navvis Coreo Home">
<div class="screen-label">Style Guide Cover</div>
</div>
<div class="screen-frame">
<img src="../../images/work-portfolio/Case-study/style-guide-screen-2.jpg" alt="Color Palette — Navvis Coreo Home">
<div class="screen-label">Color Palette System</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ SCREENS -->
<section class="screens-section">
<div class="section-eyebrow">Product Screens</div>
<div class="section-heading">Designed for every<br>device, every user.</div>
<div class="screen-showcase">
<!-- Patient Dashboard Web -->
<div class="showcase-item layout-left" data-observe>
<div class="showcase-img">
<img src="../../images/work-portfolio/Case-study/patient-Dashboard-web.png" alt="Patient Dashboard — Web">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Web · Patient View</span>
<h2 class="showcase-title">Patient Dashboard — Web</h2>
<p class="showcase-desc">The patient's command center — a three-panel layout giving immediate visibility into upcoming service visits, open service requests, and matched care providers. The week-at-a-glance calendar with dot indicators and time-of-day grouping (Morning / Afternoon / Evening) replaced a complex scheduling module with something patients could understand at a glance. Color-coded request statuses and one-click provider access reduced cognitive load significantly.</p>
<div class="feature-pills">
<div class="feature-pill">Calendar-first layout</div>
<div class="feature-pill">Real-time applications</div>
<div class="feature-pill">Provider matching</div>
<div class="feature-pill">Responsive 3-column grid</div>
</div>
</div>
</div>
<!-- Patient Dashboard Mobile -->
<div class="showcase-item layout-right" data-observe>
<div class="showcase-img mobile-frame">
<img src="../../images/work-portfolio/Case-study/Mobile_Patient_Dashboard.jpg" alt="Patient Dashboard — Mobile">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Mobile · Patient View</span>
<h2 class="showcase-title">Patient Dashboard — Mobile</h2>
<p class="showcase-desc">Every web concept had to be re-architected for the small screen — not simply stacked. On mobile, the dashboard becomes a scrollable feed, with the calendar strip anchored at the top and content revealing progressively below. The floating action button (+) surfaces the most critical action — creating a new request — without cluttering the information hierarchy. Bottom tab navigation follows natural thumb zones, keeping navigation comfortable for users who may have limited dexterity.</p>
<div class="feature-pills">
<div class="feature-pill">Thumb-zone nav</div>
<div class="feature-pill">Progressive disclosure</div>
<div class="feature-pill">FAB for quick actions</div>
<div class="feature-pill">Accessibility-first</div>
</div>
</div>
</div>
<!-- Service Requests Mobile -->
<div class="showcase-item layout-left" data-observe>
<div class="showcase-img mobile-frame">
<img src="../../images/work-portfolio/Case-study/Service Requests_Sort Filter_mobile.png" alt="Service Requests — Mobile">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Mobile · Service Requests</span>
<h2 class="showcase-title">Service Requests — Sort & Filter</h2>
<p class="showcase-desc">Managing multiple care requests — Bathing, Meal Prep, Medication, Housekeeping — required a list view that communicated status instantly. The design uses a compact two-level card: the service type and schedule above, the assigned provider with hiring status below. Color-coded status badges (Hired, Open, Closed) mean users never need to read fine print. Sort and Filter are promoted to equal prominence at the top, reflecting the real workflows we uncovered in user research.</p>
<div class="feature-pills">
<div class="feature-pill">Status badges</div>
<div class="feature-pill">Two-level card hierarchy</div>
<div class="feature-pill">Sort & filter parity</div>
<div class="feature-pill">Clear date ranges</div>
</div>
</div>
</div>
<!-- Service Provider Web -->
<div class="showcase-item layout-right" data-observe>
<div class="showcase-img">
<img src="../../images/work-portfolio/Case-study/service-provider-web.png" alt="Service Providers — Web">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Web · Provider Matching</span>
<h2 class="showcase-title">Service Providers — Requests View</h2>
<p class="showcase-desc">The service provider matching screen introduced a carousel of open requests at the top — a visual anchor that maintains context as users scroll through applicant cards below. Each provider card surfaces the essential decision-making data: rating, experience, specializations, and rate. The Hire / Invite / Applied state system gives providers clear feedback on where each relationship stands. A "90% Match" indicator — driven by service compatibility — adds algorithmic intelligence without overwhelming the UI.</p>
<div class="feature-pills">
<div class="feature-pill">Request carousel anchor</div>
<div class="feature-pill">Match score algorithm</div>
<div class="feature-pill">Multi-state CTA</div>
<div class="feature-pill">Favoriting</div>
</div>
</div>
</div>
<!-- Video Conferencing Web -->
<div class="showcase-item layout-left" data-observe>
<div class="showcase-img">
<img src="../../images/work-portfolio/Case-study/video-conferencing-patient-web.jpg" alt="Video Conference — Web">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Web · Telehealth</span>
<h2 class="showcase-title">Video Conference — Patient Web</h2>
<p class="showcase-desc">Telehealth was a critical feature expansion — connecting patients with care coordinators and family members in real time. The web experience prioritizes the active speaker in a large central frame while placing other participants in a filmstrip below, keeping all faces visible without competition. The participant panel on the right shows join status at a glance. Control icons at the bottom — Mute, Hide Video, Full Screen, Leave, End — are spaced generously for easy interaction during a call.</p>
<div class="feature-pills">
<div class="feature-pill">Active-speaker focus</div>
<div class="feature-pill">Participant roster</div>
<div class="feature-pill">Join/Exit status</div>
<div class="feature-pill">Conference controls</div>
</div>
</div>
</div>
<!-- Video Conferencing Mobile -->
<div class="showcase-item layout-right" data-observe>
<div class="showcase-img mobile-frame">
<img src="../../images/work-portfolio/Case-study/video conferencing-patient-mobile.png" alt="Video Conference — Mobile">
</div>
<div class="showcase-copy">
<span class="showcase-tag">Mobile · Telehealth</span>
<h2 class="showcase-title">Video Conference — Patient Mobile</h2>
<p class="showcase-desc">On mobile, screen real estate is precious during a video call. The active speaker fills the screen entirely — immersive, distraction-free. Participants appear in a bottom strip of small tiles. Call controls are kept to just four essential actions (Mute, Hide Video, Leave, End), with End Conference in a distinct red to ensure it's never accidentally triggered. The entire UI fades gracefully, keeping the human connection — the face on screen — as the primary focal point.</p>
<div class="feature-pills">
<div class="feature-pill">Full-bleed speaker view</div>
<div class="feature-pill">Minimal control chrome</div>
<div class="feature-pill">Destructive action pattern</div>
<div class="feature-pill">Participant filmstrip</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ ROLE -->
<section class="role">
<div class="section-eyebrow">My Contributions</div>
<div class="section-heading">Designer, developer,<br>and everything between.</div>
<div class="responsibilities-list">
<div class="resp-item">
<div class="resp-icon">✦</div>
<div class="resp-content">
<h4>Wireframes, Prototypes & Storyboards</h4>
<p>Developed end-to-end wireframes and interactive prototypes in Adobe XD and Sketch, visualizing user flows before a line of code was written. Built reusable, self-contained component modules that aligned design and engineering vocabulary.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">⬡</div>
<div class="resp-content">
<h4>React JS Front-End Development</h4>
<p>Implemented production-ready UI components in React JS v17, building a maintainable and scalable codebase aligned with industry best practices — ensuring zero gap between design intent and live experience.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">◈</div>
<div class="resp-content">
<h4>UX Problem Identification & Responsive Design</h4>
<p>Applied deep UX expertise to diagnose and resolve responsiveness issues across breakpoints. Maintained the app-wide style guide as a living document, evolving it as the product scaled from MVP to full release.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">▲</div>
<div class="resp-content">
<h4>Layout & Styling Implementation</h4>
<p>Implemented layout and styling changes to existing applications using HTML5, CSS3, and Bootstrap — ensuring every interaction felt polished, coherent, and true to the design system regardless of device or browser.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">◎</div>
<div class="resp-content">
<h4>Business-to-Design Translation</h4>
<p>Served as the bridge between business requirements and technical constraints — synthesizing stakeholder input, engineering limitations, and user research into actionable, feasible design recommendations.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">⬟</div>
<div class="resp-content">
<h4>Secure, Standards-Compliant Front-End</h4>
<p>Designed and implemented a front-end layer conforming to healthcare data security standards and established UI/UX industry conventions — balancing regulatory requirements with a delightful patient experience.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">◉</div>
<div class="resp-content">
<h4>End-to-End Product Execution</h4>
<p>Participated as a full-cycle team member — gathering requirements, brainstorming solutions, building final applications, and conducting testing — ensuring alignment and quality from kickoff to production launch.</p>
</div>
</div>
<div class="resp-item">
<div class="resp-icon">✧</div>
<div class="resp-content">
<h4>Cross-Functional Collaboration</h4>
<p>Worked directly alongside product managers and engineers in an agile environment, contributing to sprint planning and design reviews while keeping the user's perspective central to every technical and product decision.</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ TECH -->
<section class="tech-section">
<div class="section-eyebrow">Technology Stack</div>
<div class="section-heading">Tools of the trade.</div>
<div class="tech-grid">
<div class="tech-chip"><div class="tech-chip-dot"></div> Adobe XD</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Sketch</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> React JS v17.0</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> HTML5</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> CSS3</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Bootstrap</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Component-Driven Architecture</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Responsive Design</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Design Systems</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> EHR / Healthcare UX</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Agile / Scrum</div>
<div class="tech-chip"><div class="tech-chip-dot"></div> Telehealth UI</div>
</div>
</section>
<div class="divider"></div>
<!-- ═══════════════════════════════════════════ OUTCOME -->
<section class="outcome">
<div class="section-eyebrow">Reflection</div>
<div class="section-heading" style="text-align:center">What this project meant.</div>
<p class="outcome-statement">
The Navvis Coreo Platform proved that <strong>great healthcare UX is an act of empathy at scale</strong> — every calendar dot, every status badge, every carefully placed button represented a real patient managing their care at home. Designing across web and mobile, then building it myself in React, meant there was no gap between intention and execution. <strong>The design system I created became the single source of truth</strong> that carried the product from MVP to a platform serving thousands of patients and providers across the United States.
</p>
</section>
<!-- ═══════════════════════════════════════════ FOOTER -->
<footer>
<div class="footer-brand">Navvis <span>Coreo</span> Platform</div>
<div class="footer-meta">
Sr. Product Designer — UI/UX<br>
EMIDS × Navvis Healthcare<br>
Aug 2018 – May 2020
</div>
</footer>
<script>
// Password modal functionality
const CORRECT_PASSWORD = 'Krishna@1947';
const passwordModal = document.getElementById('passwordModal');
const passwordForm = document.getElementById('passwordForm');
const passwordInput = document.getElementById('passwordInput');
const passwordError = document.getElementById('passwordError');
passwordForm.addEventListener('submit', (e) => {
e.preventDefault();
const enteredPassword = passwordInput.value;
if (enteredPassword === CORRECT_PASSWORD) {
passwordModal.classList.add('hidden');
setTimeout(() => {
passwordModal.style.display = 'none';
}, 300);
passwordInput.value = '';
passwordError.classList.remove('show');
} else {
passwordError.classList.add('show');
passwordInput.value = '';
passwordInput.focus();
setTimeout(() => {
passwordError.classList.remove('show');
}, 3000);
}
});
passwordInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
passwordForm.dispatchEvent(new Event('submit'));
}
});
// Scroll reveal
const items = document.querySelectorAll('[data-observe]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.15 });
items.forEach(el => observer.observe(el));
</script>
</body>
</html>