| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <p> Following a pivot to youth sports, Optimism Health’s founding team brought me on for three months as their first design hire to overhaul the app for hockey players aged 13-18. The original experience was built for data-driven health optimizers and offered little appeal for teenage users. Opti, their AI assistant coach, especially struggled to engage them in conversation. With only two engineers and myself as the sole designer, the challenge was to deliver a high-impact redesign before hockey season began in three months. </p> <p> <b>Goals:</b> Revamp the app to boost engagement with youth athletes in order to demonstrate value to their coaches—the customer—and build on the momentum of their initial traction in this new market. To make the most of limited time and resources during my 3-month engagement, we prioritized strategic UX enhancements and lightweight visual updates, with a full rebrand planned for a later phase. </p> <h2 class="section_hed">Process</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>User Research</b> </p><p> I conducted interviews to understand youth athletes’ motivations and pain points, revealing several key insights: <ul> <li> All players cited being motivated by seeing improvement in their own personal fitness, expressing desire to <i>“be their best selves”</i>. </li> <li> All players cited their team as major motivators in keeping up with on- and off-ice fitness regimens, and valued the <i>sense of community and connection</i> their team provided. Interestingly, they all expressed interest in <i>friendly competition</i> with their teammates as well. </li> <li> Despite insisting that Opti was helpful, many players skipped conversations with the AI coach, blaming repetitive, bland topics as well as their own <i>perceived impatience and disinterest</i>. </li> <li> Despite the survey-like format, <i>players treated check-ins more like checklists</i>, often returning to the app throughout the day to log progress. This misalignment highlighted the need for a new interface that matched user behavior. </li> </ul> </p> <p class="subhead"> <b>Ideation & Refinement</b> </p><p>Because interviews were scheduled on a rolling basis, I started by designing low-hanging usability improvements in high fidelity to seed discussions with our founding team. Eventual UXR findings enabled me to prioritize and develop new and improved features, which I expressed with high-fidelity mockups in Figma to ensure productive conversations with the founding team (who, by their own admission, knew nothing about design!). This also allowed us to better negotiate resource constraints and plan for a phased rollout with maximum impact. </p> </div> <h2 class="section_hed">Final Designs</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>Usability improvements</b> </p><p>The existing web app, built by the founders, had limited functionality and posed usability challenges, such as small fonts, non-standard form inputs, and a pop-up chat window for Opti that made interactions cumbersome.<br> <img class="img-responsive" src="./usability.png"><br> </p> <p class="subhead"> <b>A homescreen that mirrors your best self</b> </p><p> What’s more motivating than a good old visualization? When users now login, they immediately see their personal records as a reminder of their own potential—as well as an incentive to complete their check-in! I also introduced more forgiving check-in streaks, which allow users to claw back their streaks by retroactively completing check-ins.<br> <img class="img-responsive" src="./homescreen.png"><br> </p> <p class="subhead"> <b>Leveraging the team to improve the player</b> </p><p>I introduced team-branded skins as an easy way to tap into a major user motivator (community) while punting on visual direction (knowing a branding exercise was coming). Additionally, subtle leaderboards, as well as the presence of teammate profiles, added easy elements of healthy competition.<br> <img class="img-responsive" src="./team_skins.png"><br> </p> </div> <h2 class="section_hed">Future Designs</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>A new task management paradigm</b> </p><p> Armed with user data and collaborative impact mapping with the founders, I successfully proposed and designed a significant workflow redesign for their future native app. The redesign transformed the overburdened, survey-style check-in into a task management system that not only better supports the hidden behavior-changing functionality, but also allows players to track and log activities throughout the day. This paradigm shift aligned more naturally with how players were engaging with check-ins, as well as with the existing check-in survey logic that dynamically adapted to activity cadences and user behavior. By improving alignment across design, functionality, and user behavior and expectation, the new paradigm can seamlessly foster adherence and habit formation.<br> <img class="img-responsive" src="./task_paradigm.png"><br> </p> <p class="subhead"> <b>A new Opti</b> </p><p>Because Opti only and always appeared after completing a check-in, it was difficult to come back after the user decided the conversations weren't worth having. And it was clear from the data that users didn't think talking to Opti was important. I developed a strategy to free Opti from check-ins: the new "Async Opti" would start conversations for meaningful reasons, ie trending task completions or incompletions, and tailored conversation topics and openers based on players’ behaviors, values, and interests. Separating Opti from check-in completions, and triggering it instead based on user behavior, actually affords more opportunities for more relevant and meaningful conversations, while lowering the volume overall.<br> <img class="img-responsive" src="./async_opti.png"><br> </p> <p class="subhead"> <b>Future ways to interact with the team</b> </p><p> Additional features for their upcoming native app include messaging threads, event coordination features, and calendars, which would enable Optimism Health to replace more rudimentary competitors currently being used.<br> <img class="img-responsive" src="./native_app.png"><br> </p> </div> <h2 class="section_hed">Implementation, Outcome, and Next Steps</h2> <div class="type_test" id="description_text"> <p> We rolled out the top three items—usability improvements, new homescreen, and team skins—in time for the start of hockey season, while doing ongoing testing with Opti’s conversation starters.</p> <p>In the month following the launch of the redesign: <ul> <li>Weekly active users <i>increased 267% (!)</i></li> <li>Check-in rates <i>increased 62%</i></li> <li>Total users <i>increased 44%</i></li> <li>Response from players and coaches have reportedly been overwhelmingly positive!</li> </ul> </p> <p>The native app and concomitant task management system, async Opti, and additional team features are scheduled for implementation in Q4.</p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <p> Briefed.io revolutionizes how social security disability (SSDI) lawyers build their cases, which are based on clients' medical records that often exceed 1,000 pages. While technically impressive, the engineer-built MVP interface presented a steep learning curve for SSDI lawyers, many of whom are at the end of their careers with lower digital literacy. These lawyers relied on the founder himself to upload, process, and explore medical records on their behalf. Most who received a demo didn’t do much testing independently, and those who did found the UX confusing and unintuitive, hindering adoption and paid conversion. </p> <p> I was brought on to redesign and implement a “self-service” version of their MVP that SSDI lawyers could use without hand-holding from the founder. My focus was on simplifying core functionalities, making task flows linear and intuitive, and creating clear affordances to create a frictionless experience for lawyers that would drive adoption. </p> <h2 class="section_hed">Process</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>User Research</b> </p><p> I began by attending user interviews and observing live demos with the founder and interested lawyers. Watching the lawyers struggle firsthand offered critical insights:<ul> <li> Even logging in with predefined credentials posed challenging, highlighting the need for a simplified sign-up and onboarding process. </li> <li> Due to unclear information architecture and too-tiny type, lawyers had difficulty completing tasks. Clearer affordances, simplified hierarchies, and linear task flows became top priorities. </li> <li> Lawyers don’t typically know everything they should be looking for, with or without a state-of-the-art LLM digesting 1000 pages on their behalf. The ability to suggest search terms could effectively condense massive files into manageable summaries and offer immense time savings to a normally laborious process. </li> <li> Many users, especially those close to retirement or training new employees, were hesitant to invest time learning a new system. Ensuring effortless workflows and reliable results was crucial for adoption. </li> </ul> </p> <p class="subhead"> <b>Ideation & Refinement</b> </p><p>Because initial brand guidelines already existed, and because a redesign was a major component of my engagement, I presented simplified flows, new features, and usability improvements with high-fidelity mockups in Figma. Luckily, the founder was immediately thrilled and we found each other's ideas mutually inspiring, leading to a fruitful process of ideation, iteration, and refinement. </p> </div> <h2 class="section_hed">Final Designs</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>Login/signup</b> </p><p> Previously, lawyers needed the founder to manually set up accounts and upload medical files. I designed and implemented a simple quickstart flow that led users from sign-up/log-in directly into file selection/upload.<br> <img class="img-responsive" src="./loginflow.png"><br> </p> <p class="subhead"> <b>Reducing complexity</b> </p><p>I introduced a file upload flow that included automatic ingest and parse functionality, obscuring their innovation's complex backend processes to simplify the user flow significantly, with the goal of enabling lawyers to create cases independently.<br> <img class="img-responsive" src="./file_upload.png"><br> </p> <p class="subhead"> <b>Simplified Workflows</b> <p> I replaced the static, text-based UI with linear task flows that made it clear what the next step was. Once a file was uploaded, the UI guided users directly to search. Suggested terms became clickable, and the search results page clearly showed options for adding or removing results from cases, dramatically reducing steps needed.</p> <p>Additionally, searches were transformed into workspaces, allowing users to save and revisit their progress easily. A new side navigation bar gave quick access to previous searches, mimicking the familiar PC file management structure lawyers are so accustomed to, as well as a high-level readout of the file.<br> <img class="img-responsive" src="./search.png"><br> </p> <p class="subhead"> <b>Usability improvements</b> </p><p>The old web platform hindered usability with its text-based presentation, small font sizes, and non-standard and unobvious affordances:<br> <img class="img-responsive" src="./old.gif"><br> The new experience:<br> <img class="img-responsive" src="./new.gif"><br> </p> </div> <h2 class="section_hed">Implementation & Outcome</h2> <div class="type_test" id="description_text"> <p> Once the new flows were finalized, I built each page using HTML, Tailwind CSS, and JavaScript, and worked with the engineer to connect them to the backend. We even managed to launch early, despite the deadline suddenly moving up to accommodate a major speaking engagement and demoing opportunity. The new version is now being used for sales efforts. </p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' src="https://player.vimeo.com/video/307767198" width="950" height="535" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- <video class='embed-responsive-item' controls> <source src='https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/808/12/304042964/1164796220.mp4?token=1543943019-0x13528abc7028e5e7675da8ec6432367a3b8cb8bb' type='video/mp4'> Your browser does not support HTML5 video. </video> --> </div> <p><br></p> <div id="description_text"> <p>“So, do you feel like a real New Yorker yet?” </p> <p>How can a recent transplant possibly answer this question without sounding like as much of an jerk as the other recent transplant who just asked it? For the past six years, my go-to has been “fuck that, I’m from Chicago”, but as a wise friend once advised me, if you don’t have anything nice to say, just respond with a number.</p><br> <a href="https://xujenna.com/NYQuotient/" target="new"><img class="img-responsive" src="pizza.png"></a> <p> <a href="https://xujenna.com/NYQuotient/" target="new"><i>How New York are you?</i></a> is a voice-controlled browser game where two players compete to be crowned the realest New Yorker. The computer volleys hot topic keywords from the past year, and each player will have one shot per topic to prove how aligned they are with most common New York opinions. The quicker and closer the response, the higher your New York Quotient. </p><br> <a href="https://xujenna.com/NYQuotient/" target="new"><img class="img-responsive" src="mta.png"></a> <p> In order to make this game, I first used <a href="https://github.com/twintproject/twint" target="new">twint</a>, a twitter-scraping python module, to gather tweets originating from New York during 2018 that were relevant to popular topics on Twitter this year. Then I used this corpora to train word2vec models for each topic using <a href="https://pypi.org/project/gensim/" target="new">gensim</a>. </p> <p> When building my <a href="https://xujenna.github.io/a2z/final/index.html" target="new">initial idea for this project</a>, I had uploaded word2vec models directly to the browser with tensorflowjs/<a href="https://github.com/ml5js/ml5-library" target="new">some code stolen from ml5js</a>, then used tensorflowjs's tsne library to reduce the vectors to two dimensions for visualization (<a href="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/12/Screen-Shot-2018-11-28-at-2.00.36-AM.png" target="new">beware your array types</a> when using this library!). However, these calculations proved to be too burdensome to perform before each game, (<a href="https://xujenna.github.io/a2z/final/index.html" target="new">feel the pain here</a>) so for the final iteration, I ended up doing the tsne reduction in python (adapting a script from <a href="https://github.com/yulicai/Word-Land" target="new">Yuli Cai's</a> threejs workshop last year), then uploading the two dimensional vectors to the browser instead. </p><br> <a href="https://xujenna.com/NYQuotient/" target="new"><img class="img-responsive" src="amazon.png"></a> <p> I used Chrome’s Speech Synthesis API to announce the topic for each round, as well as their Speech Recognition API to capture each player’s responses (recognition.interimResults is everything). I hope to someday make a version for Firefox as well. </p> <p> Once a player responds to a topic and the API transcribes the response, tensorflowjs calculates the distances between each word in their response and the original keyword, then averages the distances in order to calculate a final score for their turn. The longer the distance and slower the response, the lower the score. </p> <p> d3js then plots the respective embeddings in the browser. At the end, if the winner’s score surpasses the tenth highest score in history, they can add their name to the high score board for eternal fame and glory. </p><br> <a href="https://xujenna.com/NYQuotient/" target="new"><img class="img-responsive" src="highscoreboard.png"></a> <p> <a href="https://xujenna.com/NYQuotient/" target="new">Play the game here.</a> </p> </div> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <p> The first-line treatment for insomnia is cognitive behavioral therapy for insomnia (CBT-i), which is typically administered in-person over 4-8 weeks. However, trained professionals are few and far between, with an estimated 659 behavioral sleep medicine providers in the US—19% living in California and New York—and many with waitlists of 6 months or more, and out-of-pocket costs averaging $1200 USD.</p> <p> Several digital versions of CBT-i have been created to address the need for accessibility, but low adherence rates are common, with the vast majority of participants failing to complete entire programs as designed. Additionally, many of these digital services require insurance coverage, employer benefits, and/or appointments, which severely limits access. </p> <p> Our goal was to create a low-cost, consumer-facing, evidence-based, and efficacious insomnia intervention that anyone with a mobile phone can access. </p> <h2 class="section_hed">Process</h2> <div class="type_test" id="description_text"> <p> As both the product designer and engineer, I spearheaded the development of Sleepbot, drawing heavily on my experience at Mindstrong, where I witnessed the limitations of mobile app solutions for Medicaid and Medicare populations with serious mental illness. My learnings from our extensive UXR and collaborations with clinical stakeholders formed the foundation of my design work for Sleepbot; remembering how Mindstrong's users struggled to use our mobile app motivated us to choose SMS as our medium of care delivery—SMS and language being ubiquitous technologies we all use every day. </p> <p> Collaborating with a clinical psychologist and digital interventions expert, we translated CBT-i into an automated, text-based program that didn't require clinician involvement. </p> </div> <h2 class="section_hed">Design solutions</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>Conversational interface over text messaging</b> </p><p> Mobile apps require a baseline digital literacy and rely on pull interventions, placing the burden of care management entirely on the user. This makes little sense for users with impaired functioning (imagine how you felt the day after your last all-nighter). By using SMS to deliver push interventions, Sleepbot makes a notoriously difficult therapeutic protocol as easy as getting text reminders, breaking down CBT-i strategies into manageable, actionable messages throughout the day. <br> <img class="img-responsive" style="display:inline-block; width:49%" src="./Sleepbot/texts.png"> </p> <p class="subhead"> <b>Daily measurement</b> </p><p>Users maintain a daily sleep diary, tracking their nightly sleep patterns, behaviors, and any issues that arise. This consistent data collection forms the basis for sleep restriction and personalized interventions. <div class="quote inset_emphasis" style="margin-top:0px!important"> “It was really useful to have the adapting sleep times and the checkins each morning. It made me more aware of my sleep for sure."<br><span class="attribution">— Canada, 30-40 years old</span> </div> </p> <p class="subhead"> <b>Just-In-Time Adaptive Interventions</b> <p> Tailored reminders about relevant desirable behaviors, sent at times when the user should be doing them, means the user has to do little more than follow instructions—making healthy habit building nearly effortless.<br> <div class="quote inset_emphasis" style="margin-top:0px!important"> “This was actually a big help for me to start being more consistent with my sleep schedule, something that had NEVER been consistent.”<br><span class="attribution">– USA, 50–60 Y/O</span> </div> <p class="subhead"> <b>Psychoeducation</b> </p><p>Sleepbot addresses common insomnia factors with evidence-based educational content, helping users understand and manage underlying issues. <div class="quote inset_emphasis" style="margin-top:0px!important"> “The consistency and attention to detail. It felt like a customized service.”<br><span class="attribution">– South Africa, 18-30 Y/O</span> </div></p> <p class="subhead"> <b>Supportive language</b> </p><p>Our clinical collaborations ensured that the tone of Sleepbot remained compassionate and encouraging, encouraging a flexibility crucial for driving long-term engagement and behavior change. <div class="quote inset_emphasis" style="margin-top:0px!important"> "I really liked the way messages were phrased! The word choices and emojis made it feel like I was talking to a friend, and therefore it was easier to interact with Sleepbot."<br><span class="attribution">— South Africa, 18-30 Y/O</span> </div> </p> <p> <!-- <b>Web Dashboard</b> </p><p>A web-based dashboard provides users with insights and progress tracking—for those so inclined.<br> <img class="img-responsive" style="display:inline-block; width:49%" src="./Sleepbot/user_dash.png"> </p> --> </div> <h2 class="section_hed">Implementation & Impact</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>Clinical Validation</b> </p><p> A feasibility study with 50 participants over an 8-week period validated our approach:<br> <ul> <li>Severe fatigue reduced 73%</li> <li>Impaired functioning due to fatigue reduced 63%</li> <li>Time required to fall sleep reduced 45%</li> <li>Clinically significant anxiety reduced 92%</li> <li>Clinically significant depression reduced 62%</li> <li>8-week daily engagement: 80%</li> <li>8-week adherence: 92%</li> <li>Improvement in 2-3 weeks</li> </ul> <br> <img class="img-responsive inline_screens" src="./chart_FFS.png" style="box-shadow:none!important;width:45%;max-width:none"> <img class="img-responsive inline_screens" src="./chart_Promise.png" style="box-shadow:none!important;width:45%;max-width:none"> <img class="img-responsive inline_screens" src="./chart_GAD.png" style="box-shadow:none!important;width:45%;max-width:none"> <img class="img-responsive inline_screens" src="./chart_PHQ.png" style="box-shadow:none!important;width:45%;max-width:none"> <br> </p> <p class="subhead"> <b>Real-World Validation</b> </p><p> Feedback from the study drove iterations ahead of the public launch, which maintained high engagement rates even in real-world settings—empowering users to enact lasting behavior change. In a public effectiveness trial with 3000+ users in 130+ countries, users had an average engagement rate of 71%.</p> <div class="quote inset_emphasis" style="margin-top:0px!important"> “No matter if I wanted it or not, the reminders would be there. I feel like individual apps for sleep improvement just do not work for me. This bot has actually helped me.”<br><span class="attribution">– Kazakhstan, 15 Y/O</span> </div> <div class="quote inset_emphasis" style="margin-top:0px!important"> “I liked it's versatility and reliability, I'm actually sad it's over now, I'm going to miss Sleepbot!!! It was a nice little companion that checked in on me, both on my sleep pattern as on my mental health and I really enjoyed it.”<br><span class="attribution">– United Kingdom, 18-30 Y/O</span> </div> <p> </p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <div class="type_test" id="description_text"> <p>As part of my brand refresh, and subsequent redesign and optimization of Journey's web and mobile experiences, I established and presently maintain a design system comprised of brand guidelines, type styles, and a component library. Ongoing work also includes new features across mobile, tablet, and web.</p> </div><img src='./Journey/redesign_mobile.png' class='img-responsive'><img src='./Journey/redesign_web.png' class='img-responsive'><img src='./Journey/design_system.gif' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <p> FirstThen’s founders came to me with an ambitious vision: to democratize ADHD care with scalable, self-guided, evidence-based digital tools that could address widespread challenges of access, fragmentation, and lifelong care management and adherence. Having created an elaborate evidence-based framework borne from research and user interviews, the founders now needed an MVP to secure early validation, generate user interest, and prove their concept’s effectiveness in real-world settings. </p> <p> I was brought on to reduce a lofty vision into a testable MVP that would quickly validate FirstThen’s core product hypothesis. </p> <h2 class="section_hed">Process</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>User Research Synthesis</b> </p><p> The founders provided notes from customer discovery interviews with families; I synthesized the data to distill key insights, including:<ul> <li> Parents were utterly overwhelmed with expensive options and needed help choosing and managing care for their children (and themselves). </li> <li> Families faced high emotional and financial stress, with fragmented, inconsistent care making it hard to establish effective routines. </li> <li> Parents struggled to implement clinician-recommended strategies by themselves at home and needed support between sessions. </li> </ul> </p> <p class="subhead"> <b>Product definition</b> </p><p>Armed with these insights, I guided the founders through several scoping and refining exercises to turn their lofty vision into an MVP, including user experience mapping, user journey mapping, personas, product matrices, roadmapping, among others: <img class="img-responsive" src="./1 User Journey Map.png"><br> <img class="img-responsive" src="./2 ADVISOR MEETING_User Journey Map.jpg"><br> <img class="img-responsive" src="./3 Screen Shot 2022-09-14 at 9.50.36 AM.png"><br> </p> <p class="subhead"> <b>Wireframing</b> </p><p>We landed on two core functionalities that would allow us to adequately test the founding hypotheses that a mobile app could address ADHD families' pain points: digital intervention (morning routine tool) and psychoeducation. I translated this minimally viable feature set into wireframes: </p> <p class="subhead"> <b>Iterative Feedback & Refinement</b> </p><p>We met regularly with FirstThen’s clinical advisors to ensure designs were informed by clinical experience and aligned with best practices. Their feedback fed rounds of iteration, refining features for usability, flexibility, and engagement. <img class="img-responsive" src="./4 ADVISOR MEETING_V1 Prototype Wireframes.jpg"><br> </p> </div> <h2 class="section_hed">V1 MVP Design</h2> <div class="type_test" id="description_text"> <p class="subhead"> <b>Morning Routine</b> </p><p> Morning routines are a foundational and early ADHD intervention, normally done with paper, magnets, or other physical mediums. ADHD can make completing tasks and time management particularly challenging, and a morning routine provides structure that not only reduces stress, but gets everyone out the door on time.</p> <p> Clinicians recommend keeping track of time spent on each routine task, which helps set expectations and build efficiency and consistency. We designed the time goals to be flexible and realistic, aiming to support gradual improvement rather than setting overly rigid expectations. The initial approach involved establishing a baseline by timing how long a child naturally took to complete each step of a routine. From this baseline, the UI calculates a 25% reduction over time, which parents can adjust as needed to keep it achievable and motivating for their child. </p> <p> Our tool enabled parents to customize their child's morning routine with clear steps, illustrations, and built-in timers to track progress. GIF rewards celebrated task completion, providing positive reinforcement to motivate children to complete their routine.</p> </p> <p class="subhead"> <b>Psychoeducation Modules</b> </p><p>Developed in collaboration with clinical experts, these modules were designed to be easily digestible during busy days, and offered practical ADHD management education in short, actionable formats. Visual and audio options accommodated different learning styles in parents—likely to have ADHD themselves!<br> </p> <img class="img-responsive" src="./5 firstThen_demo.gif"><br> </div> <h2 class="section_hed">Implementation, Testing, and Iteration</h2> <div class="type_test" id="description_text"> <p> Once the flows were finalized, I built the interactive prototype as a Firebase web app (HTMl, CSS, Javascript, NodeJS) that users could download onto their devices, which was crucial for in-home testing. </p> <p> We conducted a two-week Beta Test with 10 families using our prototype at home, gathering feedback through interviews, surveys, usage data, and direct observations. Main insights and resulting refinements included: <ul> <li>Overall, parents responded positively, particularly appreciating the structured yet engaging and flexible approach. Younger children loved the gif rewards for completing tasks, though parents highlighted the need for greater variety. <ul> <li><b>V2 improvement:</b> Added many more gifs, as well as illustrations throughout the child-facing experience </li> <li><b>V2 improvement:</b> Added photos and transcripts to the parent-facing experience </li> </ul> </li> <li>As expected, the timers were extremely motivating for the children—unexpectedly, they were sometimes <i>too</i> motivating. Some children felt discouraged—and sometimes very upset!—when they couldn't beat their times every day. <ul> <li><b>V2 improvement:</b> Added the ability for parents to toggle the visibility of and adjust time goals to better suit their child’s needs for the day. </li> </ul> </li> <li>Some parents felt the tool was too basic, and wanted to build more routines for other parts of the day. Most parents were eager to learn and do more. <ul> <li><b>V2 improvement:</b> Added the ability to create and manage custom routines, allowing parents to apply the same structured approach to any part of their day. </li> <li><b>V2 improvement:</b> Added several more psychoeducation modules, and an updated home screen to accommodate. </li> </ul> </li> </ul> </p> </div> <h2 class="section_hed">V2 Preview</h2> <div class="type_test" id="description_text"> <img class="img-responsive" src="./firstThen_demo.gif"><br> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <div class="type_test" id="description_text"> <p>I'm particularly interested in <a href="https://xujenna.com/speakmemory/" target="new">passively collected data on our behavior and bodies</a>, what it might say about our mental health and emotional lives, and <a href="https://xujenna.com/allegoryOf/" target="new">how we might use those insights to live more intentionally</a>. Around a year after joining Mindstrong, I had the opportunity to form an R&D squad dedicated to exploring this topic on behalf of our clinicians and their patients.</p> <p>Thanks to our all-star team of data scientists, we were sitting on a veritable gold mine of rigorously tested and meaningful datastreams and experiments, utterly untouched by—even unknown to—the rest of the company. I had the privilege of working closely with these authors, as well as clinical experts, to determine their work's potential for clinical utility, how it might be expressed visually, how it might facilitate existing workflows—and guiding these leads from concept to development.</p> </div> <h2 class="section_hed">Sleep Pilot</h2> <div class="type_test" id="description_text"> <p>Our VP of Research had been refining a sleep prediction model based on our existing smartphone sensor inputs, which our clinicians easily identified as having the most obvious clinical utility; self-reported sleep data is not normally accurate, and sleep journals are difficult to keep consistently.</p> <p>The issue, as with most of our datastreams, was that daily sleep/wake predictions was TMI, even for clinicians with patients struggling specifically with sleep—they barely had time to even review their own notes prior to a session. On top of that, longitudinal, quantitative, predictive data is not normally available for use in therapy, so naturally none of our clinicians were trained to integrate such tools into their workflows. The dashboard would not only have to summarize the data, but interpret it into actionable insights for quick user consumption.</p> <p>But how can a dashboard apply clinical judgement? Not very well, but we could at least do the prerequisite legwork. I interviewed clinicians about their process—what did they need to know about their patients, and why? Their responses were prioritized to the top of the information hierarchy.</p> <p>Yes, we still included most of the dataset in all its granular glory, in case clinicians found something unexpectedly useful. We also provided multiple avenues for providing feedback on it in the UI, from the general dashboard itself to individual data points.</p> <p>The following prototype was piloted for three weeks with clinicians working with patients on their sleep. It features a top layer of interpreted and clinically relevant stats, meant as potential conversation starters with patients. Once started, clinicians can drill down into the data if needed.</p> <img src="./v1_sleep_pilot.png" class="img-responsive"> <p>Thanks to the efforts and feedback of our participants, we were able to confidently streamline the sleep dashboard to the following form:</p> <img src="./v2_sleep_pilot.png" class="img-responsive"> <p>Clearly much easier to read, without losing any of the granularity. Preparations were made for a second pilot in mid-2021.</p> </div> <h2 class="section_hed">Other Experiments</h2> <div class="type_test" id="description_text"> <p></p> <img src="./social_app_usage.png" class="img-responsive"> <p></p> <img src="./emoji_sentiment.png" class="img-responsive"> <p></p> <img src="./topics_time.gif" class="img-responsive"> <p></p> <img src="./risk_language_time.gif" class="img-responsive"> <p></p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- <p><br></p> --> <img class="img-responsive" style="margin-left:-3%" src="./cover.gif"> <div class="type_test" id="description_text"> <p>When I began working at Mindstrong in September 2019, I helped with the redesign of their electronic medical record (EMR) management web platform and had the pleasure of speaking to all of my patient-facing coworkers to understand their needs and workdays. From their stories, I learned a lot about our users with serious mental illnesses (SMI) and found that I empathized strongly with them because of my own history with depression.</p> <p>By the end of 2019, I had produced an immoderate number of screens to develop ideas that not only up-leveled the existing Mindstrong UX but also were specifically tailored to the needs of our SMI population. These explorations directly informed the company's 2020 OKR planning, and I subsequently led a redesign and restructuring of Mindstrong's user app in H1.</p> <p>Illustrations featured in the following screens are (sadly) placeholders from the incredible <a href="http://www.abbeylossing.com/" target="new">Abbey Lossing</a> and <a href="http://www.chrisdelorenzo.com/" target="new">Christopher Lorenzo</a>.</p> </div> <h2 class="section_hed">Background</h2> <div class="type_test" id="description_text"> <p>When thinking about redesigning an app used by an SMI population, I ultimately wanted to know: </p> <div class="inset_emphasis"> <h3>What are their short- and long- term needs, and how can Mindstrong help meet those needs?</h3> </div> <p>Why the distinction between long and short term? Our users commonly turn to Mindstrong in moments of crisis, but our highly trained therapists are ultimately playing a long game: building up resilience in our users. Based on insights from Mindstrong's clinicians, member-support specialists and initial user research as well as and my own personal experience with depression, my operating hypotheses were:</p> <div class="inset_emphasis"> <h3>When people with SMI seek help, it’s driven by the awareness that they struggle with daily functioning.</h3> <p>The Mindstrong app can help with these short-term needs by offering its users: <ul> <li>Interventions, urgent therapy sessions, and general 24/7 availability</li> <li>Psychiatry for medication adjustments or new prescriptions</li> <li>Coordination and/or collaboration with their existing care team</li> </ul> </p> </div> <div class="inset_emphasis"> <h3>When people with SMI think about recovery, the goal is simply toward a former/“lost” level of functioning.</h3> <p>The Mindstrong app can manage these long term needs by offering: <ul> <li>A sense of support, self-worth, and security through regular therapy sessions</li> <li>Hope for the future through goal building and response plans</li> <li>A sense of progress through symptom tracking, coursework, and working with a therapist</li> <li>Psychoeducation/skills building</li> </ul> </p> </div> <p>In other words, our users' top priority is not to explore their data in a fussy, research-oriented app; they primarily need help managing their SMI. Mindstrong offloads some of this burden by providing care and/or coordinating it with existing providers, but a person's life can improve only if they put in the work themselves.</p> <p>The problem is, sometimes day-to-day survival is difficult enough for our SMI population, so the app would have to do most of the heavy lifting for them. The <b>dynamic homescreen module</b> was conceptualized as a guided, forthright, and dead-simple way to facilitate that work.</p> </div> <h2 class="section_hed">The Dynamic Homescreen Module</h2> <img class="img-responsive" src="./vn/homescreen_modules/persistent_ranked.png"> <div class="type_test" id="description_text"> <p>I had initially envisioned the entire homescreen as a dynamic module with dynamic navigation; rather than expecting the user to know what, when, and how to do a certain task, the app would simply anticipate their needs or remind them to perform a task before its deadline for a fully guided, on-the-rails experience. No badges, no banners, no "inboxes", and fewer notifications.</p> <p>For example, a module might request an emergency contact shortly after intake and begin the flow right there and then:</p> <img class="img-responsive inline_screens" src="./v1/emergency_contact/emergency_contact1.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./v1/emergency_contact/emergency_contact2.png"> <p>The spoon-fed approach to dynamic modules quickly became a business concern as it was being built out. What if a user simply ignored the presented task? Would we timebox the module? How long would we display it before moving on to the next module? The framework was a great platform to quickly iterate and test on, but how would we prioritize and timbox a potentially endless number of modules? There would need to be more than one.</p> <p>Stress tested, the core principles of the dynamic homescreen module became:</p> <ul> <li><b>Practicality</b>: Modules break a user's journey into actionable, discrete steps that coordinate business, clinical, and user needs, all of which are planned and managed by Mindstrong, its clinicians, and/or its back end</li> <li><b>Prioritization</b>: Modules rank these tasks so that the user is able to not only fulfill requirements, meet deadlines, and make progress, but do so effortlessly</li> <li><b>Dynamism</b>: Modules add and remove themselves based on where the user is in their clinical, personal, and Mindstrong journey</li> <li><b>Scarcity</b>: Modules are presented as a limited and varied selection, in order to ensure focus and avoid overwhelming members (a slippery slope to demoralization)</li> <li><b>Patience</b>: Modules do not insist, merely suggest. Modules are not essential to the user and do not address urgent needs, which are primarily what they turn to Mindstrong for and are prominently available in the app’s simplified navigation.</li> <li><b>Affability</b>: Modules help to relieve clinicians of administration burdens, but should still be imbued with their warmth and serve as friendly reminders in a familiar tone. </li> </ul> <p>Below, the categories of modules we socialized to the team:</p> <p><b>Welcome modules:</b> Shown after onboarding, intended to supplement or facilitate intake.</p> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/welcome_intro.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/welcome_team.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/welcome_survey.png"> <p><b>Therapy session modules:</b> Intended to keep a patient in regular sessions with their assigned therapist.</p> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/session_schedule.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/session_future.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/session_now.png"> <p><b>Psychiatry session modules:</b> Intended to help manage a patient's medications, if they opt in to Mindstrong's psychiatric services.</p> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/psychiatry_renewal.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/psychiatry_adjustment.png"> <p><b>Biomarker modules:</b> Intended to facilitate clinical biomarker protocols.</p> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/biomarker_daily.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/biomarker_mid.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/biomarker_high.png"> <p><b>Survey, administrative, and homework modules:</b> Intended to manage the work needed for therapy.</p> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/misc_surveys.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/misc_administrative.png"> <img class="img-responsive inline_screens" src="./vn/homescreen_modules/misc_homework.png"> </div> <h2 class="section_hed">Simplicity First</h2> <img class="img-responsive" src="./future_map.jpg"> <div class="type_test" id="description_text"> <!-- <p>With the user's work managed and delivered in digestible pieces at the appropriate times, the navigation was also able to play a more targeted role in the app. --> <p>With the dynamic homescreen module playing a management role for clinicians, users, and Mindstrong, the navigation was able to play a much more targeted role. Two buttons—"View my progress" and "Get help now"—encompassed the core of why users would open the Mindstrong app at all (ie, their long- and short-term needs, respectively).</p> <div class="inset_emphasis"> <p><b>"View my progress"</b> was, and still is, completely aspirational: an amalgamation of the hopes and dreams of clinicians, users, and Mindstrong alike. For clinicians, it could be a digital workbook that facilitates the work they give their patients. For Mindstrong, it could be a modular guide that helps standardize treatment across dozens of clinicians, as well as a repository for the data it collects. For the users, it could be a toolbox for their long-term goals and an accessible version of a clinician's chart, from which they could get a sense of their progress.</p> </div> <img class="img-responsive inline_screens" src="./vn/progress/Toolbox.png"> <img class="img-responsive inline_screens" src="./vn/progress/Toolbox_Course.png"> <img class="img-responsive inline_screens" src="./vn/progress/Toolbox_Skills.png"> <img class="img-responsive inline_screens" src="./vn/progress/Toolbox_Goals.png"> <img class="img-responsive inline_screens" src="./vn/progress/session_history.png"> <img class="img-responsive inline_screens" src="./vn/progress/session_history2.png"> <img class="img-responsive inline_screens" src="./vn/progress/MS_scores.png"> <img class="img-responsive inline_screens" src="./vn/progress/Surveys.png"> <div class="inset_emphasis"> <p><b>"Get help now"</b> is an aspirational triaging mechanism. Mindstrong clinicians often get urgent session requests for decidedly nonurgent reasons; this flow is designed to get users the help they need while reducing clinical burden.</p> </div> <img class="img-responsive inline_screens" src="./vn/help/triage1.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage2.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage3.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage4.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage5.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage6.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage7.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage8.png"> <span class="inline_screen_arrows">→</span> <img class="img-responsive inline_screens" src="./vn/help/triage9.png"> <p>While interviewing clinicians for this feature, I realized that "Get help now" could also incorporate the clinical protocols (both formal and informal) that they have established for emergencies. By automating the rote questioning necessary before any action can be taken, wait times for the next available therapist can be maximized effectively.</p> <img class="img-responsive" src="./vn/help/map.png"> <p>These explorations were presented as northstar vision and influenced product planning for 2020.</p> </div> <!-- <h3 class="section_hed">Visual Explorations</h3> <div class="type_test" id="description_text"> <p>Illustrations are (sadly) placeholder and by the incredible <a href="http://www.abbeylossing.com/" target="new">Abbey Lossing</a> and <a href="http://www.chrisdelorenzo.com/" target="new">Christopher Lorenzo</a>.</p> </div> -->
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- text and image --> <div class="type_test" id="description_text"> </div><img src='./Mindstrong/brand-refresh/Brand Refresh.png' class='img-responsive'><img src='./Mindstrong/brand-refresh/Brand Refresh-1.png' class='img-responsive'><img src='./Mindstrong/brand-refresh/Brand Refresh-2.png' class='img-responsive'><img src='./Mindstrong/brand-refresh/Brand Refresh-3.png' class='img-responsive'><img src='./Mindstrong/brand-refresh/Brand Refresh-4.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class="type_test" id="description_text"> <p>In H1 of 2020, I led a redesign and restructuring of Mindstrong's mobile app; this is a visual history of my explorations.</p> <p> Because our population was older, of lower socioeconomic status and education levels, and living with SMI, my guiding principles for the visual redesign were simplicity and accessibility, accommodating both physical and mental disabilities: <ul> <li>Copy was to be concise, straightforward, and conversational.</li> <li>Type was to be large and the center of attention.</li> <li>UX was to be guided and on-the-rails, with every task broken down into smaller steps. </li> <li>UI was to be kept to a minimum.</li> <li>Visuals were to be friendly and comforting.</li> </ul> </p> <p>Illustrations featured in the following screens are by <a href="http://www.abbeylossing.com/" target="new">Abbey Lossing</a>, <a href="http://www.chrisdelorenzo.com/" target="new">Christopher Lorenzo</a>, and <a href="http://amymartino.com/" target="new">Amy Martino</a>.</p> <p><br></p> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v1.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v1_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v1_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_4.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_5.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_6.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v2_7.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v3.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v3_2.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v4.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v4_2.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v4_3.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v4_4.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v4_5.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v5.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v5_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v5_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v6.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v6_2.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v7_1.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v7_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v7_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v8.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v8_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v8_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9_2.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9_3.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9_4.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9_5.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v9_6.png"> <br> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v10.png"> <img class="img-responsive inline_screens" src="https://xujenna.com/Mindstrong/health-redesign/visual_explorations/v10_2.png"> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- <p><br></p> --> <!-- <img class="img-responsive" style="margin-left:-30px" src="./cover.gif"> --> <div id="description_text"> <p>During my first few months at Mindstrong in 2019, I worked with the Head of Design to redesign and develop new features for Care, an electronic medical record (EMR) management web platform for our in-house clinicians. A selection of my favorites follow.</p> </div> <h2 class="section_hed">Timeline</h2> <div id="description_text"> <p>"Timeline" was one of my first projects, and an invaluable learning experience; I was able to perform ongoing interviews with my clients and sanity-check multiple iterations. But my coworkers taught me the most valuable lesson of all: to check my assumptions. <div class="inset_emphasis"> <p><b>Problem:</b></p> <p>Mindstrong was in growth mode, which meant our in-house clinicians were burdened with increasingly large caseloads. The more patients a clinician had, the less time they had to take notes after sessions, and read notes before sessions. Because these notes were the only recourse for keeping up with a patient, clinicians struggled to maintain the human connection so crucial to therapy. </p> <p>Not only did the existing platform burden clinical work, but there was pressure to refrain from relying on the EMR, so most clinicians maintained their own spreadsheets to keep track of the important human details their patients shared during sessions.</p> </div> <img class="img-responsive" src="./timeline/clinician_spreadsheet.png"> <div class="inset_emphasis"> <p><b>Opportunity:</b></p> <h3>The platform could facilitate a continuity of care by providing clinicians with a pre-session, quick but comprehensive snapshot of a patient's progress that included both standard EMR data as well as anything they thought important to follow up on.</h3> </div> <p>The snapshot would be illustrated by a plethora of indicators that clinicians monitored, including:</p> <ul> <li>Clinician entry <ul class="sub_bullets"> <li>life events and stressors</li> <li>clinical scores</li> <li>updates to profile</li> </ul> </li> <li>System emtry <ul class="sub_bullets"> <li>elevated biomarker alerts</li> <li>session entries/summaries</li> <li>any new documents</li> <li>requested sessions</li> </ul> </li> <li>External data <ul class="sub_bullets"> <li>insurance</li> <li>third-party data</li> </ul> </li> </ul> <p>Biomarkers would be the focal point, as Mindstrong was actively validating them and needed buy-in from their clinicians. As such, I thought this was a simple data viz problem, and got straight to work.</p> <img class="img-responsive" src="./timeline/comps/timeline1.png"> <p> The hope was that biomarkers would indicate the "cause", and concurrent events would be the "effect", so I thought it would be helpful to show the events as points on the biomarker graph. Because were was so many variables, I also included a filtering mechanism for when clinicians were looking for specific trends over a specific duration. </p> <p> Based on initial feedback, I realized that line graphs weren't particularly easy to read, and weren't very scalable to boot. Perhaps a heat map make a better snapshot. You could quickly see where the (alleged) problem days where, and hover over to see the details! I love data viz! </p> <img class="img-responsive" src="./timeline/comps/timeline2.png"> <p> Turns out, clinicians were much less interested in the biomarkers or data than I was. Perhaps if they had more time, they'd play around with the the different charts and dig around in the data. But for a pre-session memory jog, the visualizations would be overwhelming, and they didn't want to click through to see details. They wanted the recent events in front of their faces. It was way more important to see whether a patient expressed suicidal intent than to see their biomarker level. </p> <p> One clinician mentioned liking macOS's Time Machine software, where you could scrub through to see records from the past. So I went back to the drawing board with this: </p> <img class="img-responsive" src="./timeline/comps/timeline3.png"> <p> It was what the clinician asked for, and my boss's boss was super excited about it, but I still thought it was too much work for the clinician. Then I realized: if clinicians wanted to scroll through a patient's history in order to get a sense of their progress—well, a computer could do that for them. The back end could facilitate much of the clinical analysis and provide a high-level snapshot on user metrics. Clinicians shouldn't be expected to perform human calculus during their 10 minute breaks between sessions. </p> <p>So yeah, that's how "Dashboard" was born.</p> <img class="img-responsive" src="./timeline/comps/timeline5.png"> <p>The cool thing about outsourcing analytical work to a computer is that suddenly, your scope is way wider; introducing ✨Insights✨, your data science assistant. In the above example, it warns the clinician that, during the time frame they selected, their patient was at a 6% higher risk for suicide than normal, but 8% lower than the general Mindstrong population.</p> <p>There was a lot of excitement around this idea: clinicians wanted a dashboard for their entire panel (ie, aggregated stats for all their patients); product saw this as a way to maximize engagement efforts. While these ideas were beyond the capabilities of the platform's engineering resources at the time, they're still informing its development to this day.</p> </div> <h2 class="section_hed">Tasks</h2> <div id="description_text"> <p>Being a big advocate of outsourcing low-level work to computers, I was excited to explore the idea of a task engine for Care.</p> <p>Between regular therapy sessions, clinicians were expected to monitor all 60+ patients in their caseload for certain events (biomarkers, hospitalizations, disengagement, etc) and respond in accordance to elaborate protocols.</p> <img class="img-responsive" src="./old_care.png"> <div class="inset_emphasis"> <p><b>Problem:</b></p> <p>The existing Care platform was built for multiple stakeholders (member support, psychiatrists, clinicians, etc), and clinicians especially needed to dig around for the information they needed, for every patient they had. Its passivity meant that clinicians monitored with the help of their own spreadsheets.</p> <p>Clinical protocols for such events were documented in yet more Google Docs.</p> </div> <img class="img-responsive" src="./tasks/protocol/protocol_animation.gif"> <p>Clinical protocols were complex but resembled decision trees, which could be easily automated—especially considering that many of the triggers (biomarker alerts, drop offs in engagement, hospitalizations) were coming from the back end.</p> <div class="inset_emphasis"> <p><b>Opportunity:</b></p> <h3>Automating the protocols with a task engine could free clinicians from the administrative burden of managing the progress of a large and ever shifting panel size, thereby allowing them to focus their energy on delivering high quality care.</h3> </div> <p>After interviewing many clinicians about their workflow and protocols, and product for business needs, I designed the following flow that demonstrates how a task engine might help facilitate our overburdened clinicians, removing the need to manage external spreadsheets, memorize or refer to protocols, or search a patient's EMR for information required to follow such protocols.</p> </div> <div class="slideshow-container"> <a class="prev" onclick="plusSlides(-1)">Prev</a> / <a class= "next" onclick="plusSlides(1)">Next</a> <p id="caption">Similar to your basic task management app, there are three states your task can be in: current, pending, and completed. These states are represented in a 3-column layout which organize the Tasks workspace.</p> <img id="slide_img" src="./tasks/comps/step0.png"> </div> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- <p><br></p> --> <img class="img-responsive" style="margin-left:-30px" src="https://xujenna.com/Mindstrong/bye-guys/peter.png"> <div id="description_text"> <p>To say a heartfelt goodbye to my departing coworkers/distract myself from the pain of everyone leaving their jobs during the pandemic, I created the digital version of those physical cards that you'd pass around the office during pre-pandemic times.</p> <p>We purchased the domain <span style="font-family:monospace">youarereally.cool</span> so that everyone could have their own vanity link (ie, <span style="font-family:monospace">youarereally.cool/jenna</span>). We eventually saw purchases outside of our own workplaces as well, because turnover is sad!</p> <p>After a few years and leaving my own job to return to freelance, I discontinud this service, but you can view the original version <a href="https://xujenna.com/bye-qt/" target="new">here</a>.</p> <p> Made with vanilla js and Firebase's Realtime Database (for messages) and Storage (for photo/gif uploads—very important). </p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' src="https://player.vimeo.com/video/299894463" width="950" height="535" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- <video class='embed-responsive-item' controls> <source src='https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/808/12/304042964/1164796220.mp4?token=1543943019-0x13528abc7028e5e7675da8ec6432367a3b8cb8bb' type='video/mp4'> Your browser does not support HTML5 video. </video> --> </div> <p><br></p> <div id="description_text"> <p>As a person with no inherent self-preservation instinct, nor the self-discipline to enact a learned one, it's been a tough transition to independent adult life. Nearly immediately upon moving to NYC in 2012 for my first job, I fell into an acute depression that would take me a couple years to crawl out of. Since then, I've learned the hard way to take care of myself physically, mentally, and emotionally, and while I've skimmed countless research papers, books, and MOOCs about psychology over the years, making a regular practice of what I've learned still proves a challenge.</p> <p>So for my Hello, Computer final project, I created a self-care assistant with DialogFlow, Google's conversational interface technology, and nodejs. Named Life Support, it's a relatively sprawling/unfocused endeavor that attempts to intervene generally on common/modern emotional discomforts. While I plan to build this out even more as part of my thesis, Life Support presently consists of the following features:</p> <ol> <li><strong>A guided breathing exercise.</strong> When you tell Life Support that you're feeling some variety of agitated (anxious, nervous, etc), it will guide you through a breathing exercise: five counts in, five counts out. When a body is stressed, the fight or flight response (ie the sympathetic nervous system) kicks in; breathing exercises promote the opposite response (ie the parasympathetic nervous system) and indicate to the body that there is no threat. Breathing exercises/mindfulness practices in general have also been shown to reduce mild depressive symptoms. Since the assistant's response seems to be capped at about 30-40 seconds, Life Support will ask whether to continue the exercise every six breaths.</li> <li><strong>A guided physical exercise.</strong> When you indicate that you're feeling some variety of burnt out (sluggish, unfocused, foggy, etc), Life Support will guide you through NYT's <a href="https://well.blogs.nytimes.com/2013/05/09/the-scientific-7-minute-workout/">Scientific Seven Minute Workout</a>. As a person who naturally loathes exercise from the depths of my being, this is the rare workout that's actually within my tolerance threshold, and since their interactive guide stopped working I've definitely become even lazier. Luckily, it was quite easy to recreate using SSML. Similar to the breathing exercise, Life Support will ask after each exercise whether or not the user wants to continue. Physical exercise has been shown to have countless benefits on a person's mental and physical health, and is particularly helpful to prevent burn out. <!-- <a href="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/30609169087_a491ca0941_k-copy.jpg"><img class="img-responsive" src="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/30609169087_a491ca0941_k-copy-283x1024.jpg" alt="" width="283" height="1024" /></a> --> </li> <li><strong>Guided cognitive behavioral therapy</strong>. When you tell Life Support that something is bothering you, it will help you CBT. CBT makes good on the belief that affect, behavior, and cognition directly influence (and therefore, exacerbate) each other by empowering the individual to targeting self-defeating cognitive distortions. Because cognitive distortions are based on fears and not facts, they can be effectively abated by gathering evidence for and against them. The individual then reassesses their beliefs based on these facts. While easily executed with the help of a therapist and some distance from the triggering event, it’s much more difficult to practice CBT in the moment, by oneself, while emotionally agitated. Life Support can help you challenge your triggering thoughts in the moment, thereby de-escalating emotional turmoil.There's another branch in the conversation that the user can go to if they're catastrophizing, which helps them challenge the extreme belief that is triggering them. Life Support asks them to consider 1) the worst case scenario, 2) the best case scenario, 3) the most probable case scenario, and 4) a purposeful action based on that probable scenario. <!-- <a href="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/45499988292_0f69744860_k.jpg"><img class="img-responsive" src="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/45499988292_0f69744860_k-333x1024.jpg" alt="" width="333" height="1024" /></a> --> </li> <li><strong>Gratitude and good things log</strong>. In addition to helping users with their unpleasant emotions, Life Support also helps them prioritize positive emotions by keeping a log for good things that happen, as well as a log for things that the user is grateful for. According to positive psychology, a bias towards optimism and the refocusing on positive emotions allows people to change their subjective reality, and eventually their objective reality when their behavior changes as a result. Another benefit of keeping track of such things is the ability to revisit them; apparently, merely recounting positive moments from one's past is enough to elicit those positive emotions in the present. When the user tells Life Support that they are feeling sad, Life Support will respond with something from their log, which is stored on a Firebase database. <!-- <a href="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/31677851088_58a35989bc_k.jpg"><img class="img-responsive" src="http://www.xujenna.com/itp_blog/wp-content/uploads/2018/10/31677851088_58a35989bc_k-213x1024.jpg" alt="" width="266" height="1279" /></a> --> </li> <li><strong>Knowledge base fallback</strong>. In addition to the foregoing intents, I also trained Dialog Flow's Knowledge base on the transcripts of UPenn's positive psychology MOOCs, as well as Barbara Oakley's Learning How to Learn MOOC. As a result, Life Support will attempt to give advice when the user asks about anything related to positive psychology (coping/resilience skills, how to feel better about life, etc) or learning.</li> </ol> </p> </div> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' src="https://xujenna.com/ITP/mad_libs/for_web.mp4" width="950" height="535" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <p><br></p> <div id="description_text"> <p><i>Mad Libs</i> is a voice-controlled browser “game” that guides two people towards the resolution of a conflict of their choosing. Using a mad libs format and the application of research on the psychology of communication and conflict resolution, the flow of the game structures the interpersonal issue as a problem that requires cooperation to solve, and optimizes for empathy as well as clear, effective, and (relatively) emotionally neutral communication. The game orally guides participants through seven steps and transcribes what users say during each turn, highlighting both problematic and cooperative speech for future reference. It penalizes the use of absolutist phrases, rewards spoken bonus scripts that express empathy, and counts the use of different pronouns. The main goal is to resolve the issue at hand, but also to produce an artifact that can be discussed and learned from after the challenge is completed. </p> <p><i>Mad Libs</i> utilizes HTML5’s Speech Synthesis API to orally guide participants through a flow, as well as HTML5’s Speech Recognition API to transcribe, penalize, reward, and count the occurence of pronouns. Eventually, a sentiment analysis model will be trained on Twitter arguments (manually labeled by researchers for level of nastiness), and implemented in tensorflow.js in order to penalize uncooperativeness and anger.</p> <p><a href="https://xujenna.com/mad_libs/" target="new">Try it in a Chrome browser.</a></p> </div>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <!-- <script> for (i=0; i<mp4s.length; i++) { $('#img-container').append("<div class='embed-responsive embed-responsive-16by9 video'> <video class='embed-responsive-item' controls> <source src='" + mp4s[i] + ".mp4' type='video/mp4'>Your browser does not support HTML5 video.</video></div>"); } </script> --> <!-- <iframe src="https://player.vimeo.com/video/304042964" width="950" height="535" frameborder="0" class="img-responsive" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> --> <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' src="https://player.vimeo.com/video/304042964" width="950" height="535" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- <video class='embed-responsive-item' controls> <source src='https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/808/12/304042964/1164796220.mp4?token=1543943019-0x13528abc7028e5e7675da8ec6432367a3b8cb8bb' type='video/mp4'> Your browser does not support HTML5 video. </video> --> </div> <p><br></p> <div id="description_text"> <p>A collaboration with <a href="https://www.barakchamo.com" target="new">Barak Chamo</a>, Good Vibrations is an immersive, pan-sensory experience that aimed to reproduce the brain activity found in meditating buddhist monks through brain entrainment. Users wore a headset that measured their brain activity during the session, which visualized how the experience affected them in real time.</p> </div> <img src='./ITP/GoodVibes/1_environment.jpg' class='img-responsive'><img src='./ITP/GoodVibes/58_screen-shot-2018-01-22-at-73815-pm.png' class='img-responsive'><img src='./ITP/GoodVibes/headset.jpg' class='img-responsive'><img src='./ITP/GoodVibes/user.jpg' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' src="https://player.vimeo.com/video/304398718" width="950" height="535" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <!-- <video class='embed-responsive-item' controls> <source src='https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/808/12/304042964/1164796220.mp4?token=1543943019-0x13528abc7028e5e7675da8ec6432367a3b8cb8bb' type='video/mp4'> Your browser does not support HTML5 video. </video> --> </div> <p><br></p> <div id="description_text"> A collaboration with <a href="http://www.ilanabonder.com/" target="new">Ilana Bonder</a>, this jukebox plays music associated with photographic memories.<br> </div> <img src='./ITP/Jukebox/37920748842_7e78c081f1_o.png' class='img-responsive'><img src='./ITP/Jukebox/37951351261_85bcbc0a8c_o.png' class='img-responsive'><img src='./ITP/Jukebox/37951358171_074e5ea668_o.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./ASH/WebRedesign/Screen Shot 2023-01-05 at 2.13.17 PM.png' class='img-responsive'><img src='./ASH/WebRedesign/Screen Shot 2023-01-05 at 2.13.43 PM.png' class='img-responsive'><img src='./ASH/WebRedesign/Screen Shot 2023-01-05 at 2.14.55 PM.png' class='img-responsive'><img src='./ASH/WebRedesign/Screen Shot 2023-01-05 at 2.15.08 PM.png' class='img-responsive'><img src='./ASH/WebRedesign/Screen Shot 2023-01-05 at 2.16.04 PM.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <div class='embed-responsive embed-responsive-16by9 video'> <iframe class='embed-responsive-item' width="950" height="535" src="https://www.youtube.com/embed/eB8iGwCMPnk?si=XcMOzFXqgYiDoyru" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> <p><br></p> <img src='./ASH/Rebrand/39_acronym_v2.png' class='img-responsive'><img src='./ASH/Rebrand/39_launchgraphic.png' class='img-responsive'><img src='./ASH/Rebrand/39_screen-shot-2016-12-01-at-122350-am.jpg' class='img-responsive'><img src='./ASH/Rebrand/39_screen-shot-2016-12-01-at-122923-am.jpg' class='img-responsive'><img src='./ASH/Rebrand/39_screen-shot-2017-01-10-at-100608-pm.jpg' class='img-responsive'><img src='./ASH/Rebrand/39_stacked.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./ASH/DonutDash/57_1849149118535630613361931644989030637607117o.jpg' class='img-responsive'><img src='./ASH/DonutDash/57_1858872218535573980034261609916826102267777o.jpg' class='img-responsive'><img src='./ASH/DonutDash/57_1852751018535245646733764675031245757347738o.jpg' class='img-responsive'><img src='./ASH/DonutDash/57_flier.png' class='img-responsive'><img src='./ASH/DonutDash/57_screen-shot-2017-05-22-at-84608-pm.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./NYMAG/SS2016/55_nymss16.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss162.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss163.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss164.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss165.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss166.png' class='img-responsive'><img src='./NYMAG/SS2016/55_nymss167.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./NYMAG/WW2016/50_nymww167.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww16710.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww16712.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1672.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1673.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1674.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1675.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1676_v2.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1677.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1678.png' class='img-responsive'><img src='./NYMAG/WW2016/50_nymww1679.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./EHM/Redesign/1_coversgif3.gif' class='img-responsive'><img src='./EHM/Redesign/EHAM4.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM5.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM6.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM7.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM8.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM9.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM10.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM17.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM19.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM20.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM26.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM27.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM28.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM29.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM30.jpg' class='img-responsive'><img src='./EHM/Redesign/EHAM.jpg' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./EDG/A_LIST2/44_alist2.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist22.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist23.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist24.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist25.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist26.jpg' class='img-responsive'><img src='./EDG/A_LIST2/44_alist27.jpg' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./EDG/EPI_AMERICA/38_sketches.jpg' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_sketches2.jpg' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_sketches3.jpg' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_sketches4.jpg' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_sketches5.jpg' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread13.png' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread14.png' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread15.png' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread16.png' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread17.png' class='img-responsive'><img src='./EDG/EPI_AMERICA/38_spread18.png' class='img-responsive'>
|
| log | other | - URL
- https://xujenna.com/new/index.js
- Text
- <img src='./EDG/DOMINO/41_spread1.png' class='img-responsive'><img src='./EDG/DOMINO/41_spread12.png' class='img-responsive'><img src='./EDG/DOMINO/41_spread13.png' class='img-responsive'><img src='./EDG/DOMINO/41_spread14.png' class='img-responsive'>
|