Solutions Overview

We designed a fully-prototyped and developed application that provides users 4 main features: calendar, inbox, workspace, and habits. Together, it allows the mobile application to work in tandem with it's web counterpart, but also stand alone to capture the mobile-only customer base.

Competitive Analysis & Remote User Research

To start, we looked at their existing web designs to see where we could pull inspiration and ideas, as well as what high-level information architecture/features had to stay the same between web and mobile. 

On top of this, we also conducted competitive analysis, downloading and noting the customer journey for Whiteboard key competitors. This information was organized in a competitive matrix: 

Because we were operating with the 10 week time constraint, the Whiteboard CEOs wanted us to end the empathize stage here and start creating designs. However, it was important to us to actually talk to the user, and not create designs until we gleaned insights from them.

This was a key moment when we pushed back and stayed firm to the design process, and insisted that investing time in doing user research was important. In collaboration with a UX researcher we created a user interview script and interviewed beta Whiteboard desktop users and power users of their competitor’s applications. In total we conducted 5 live zoom user interviews and 3 virtual interviews using usertesting.com:

Spending this time with users proved invaluable, as it allowed us to create two unique user personas that encapsulated the different thoughts, feelings, and habits of the users we spoke to.

User Needs & Opportunities

From these personas, we defined their needs in POV statements. From talking to users, we were able to find two main insights that drove our designs:

‍Insight 1: People are emotionally invested in their organization and productivity. People know they feel good when they accomplish their goals, but they also may not realize how bad they feel when they don’t. Their goals need to be reachable and actionable so that they are constantly motivated towards success.

‍Insight 2: Users want to know their effort has meaning and will be impactful. People exhibit a lot of future discounting and often do not recognize that their actions today will be meaningful to them in the future. We need to educate the user of long-term benefits and generate buy-in for them to succeed.

Iterating on UX for Habits

From our insights, the design opportunities I sought to take with the redesigned calendar, modals, and habits were:

‍1. Develop a stronger visual language for events, tasks, and habits, to prevent users from being confused when operating the app.
‍2. Make Flexible the editing and creation modal process so the app can better adjust to an individual’s personal organization/productivity style.
‍3. Provide Analytics for users’ habit data: delight the user into habit completion by showing their successes

Informed by this, we moved on to sketching and wireframing, and took notes on what worked and didn’t from initial designs.

After assessing the current state of habits and taking into account user feedback, I created new screens to better reflect a delightful habit tracking experience. Users wanted habits to be more focused on encompassing the data and tracking all their habits (instead of just a list of their combined daily habits).Implemented changes included:

1. Graphically representing habit behavior across the week in the ‘all habits’ section, with the bar being gradually filled depending on how much users were able to complete out of their total habits.
‍2. Implementing bullet-journal style monthly summaries in line with the user desire to have more summary-based data. The fill/unfilled binary system of tracking sections is collapsible for easy navigation and provides a more visual representation of their goals
‍3. Adding a Progress Bar to Today’s Habits shows how many habits they completed out of the day and is  consistent with the one on the dashboard page
‍4. Only Tracking Streak Data through our habits, as we found that other information (like the duration of the habit and how many days completed they were) was distracting and sometimes demoralizing for the user

 Challenges and Usability Changes

I also worked to overhaul the calendar views so that we could give them a more readable and open view. Throughout this process, I iterated on the vertical spacing, headers, activity box, and view adjustments. Here are some of the key challenges/areas of friction with the user and how we adjusted to it.

Challenge 1: View Limitations Partners were considering only having three views, and we received mixed feedback on whether or not users preferred 3-day, 5-day, or weekly views

Usability Change: Accommodate All Views Because view preference seemed personal to a user’s work style, we decided to accommodate all five flows: daily, 3-day, 5-day, weekly, and monthly.

Challenge 2: Inconvenient Activity Box Drag The draggable feature of the activity box collided with the expandable nature of the box, and the two could not exist in tandem

Usability Change: Scrollable and Collapsible Box allows for the user to continue to drag items around, but also collapse the box when it was empty or when they wanted a broader day view

Challenge 3: No designs for editing information, including changing calendar colors, creating a new calendar, and swapping views (originally done via an unintuitive pop up)

Usability Change: Creation of an eye icon allows for all necessary information to be compartmentalized but easily accessible via a pop up when clicked

Final Look & Handoff

Handoff System
‍Handoffs facilitate the long term success of designers and developers by creating a sustainable process via documentation. To facilitate a strong handoff, we noted the importance of/placement of every item, as well as the white space constraints on the screen.

Logo
‍Whiteboard was lacking a logo prior to the creation of their mobile designs, so I took on the task of designing one for them to incorporate into our designs and their promotional materials. We kept in mind three primary factors when designing a logo: brand recognition, scalability, and adherence to the productive mission of Whiteboard.

‍After A/B testing with potential customers, we decided on a final logo and color scheme that was implemented into the site overall.

Impact & Next Steps

We ended the term with a fully fleshed-out user flow for the mobile designs. At the end of the term, we launched a mobile app MVP on Test Flight where developers engaged in bug finding and bug fixing.

‍Through the process of working on Whiteboard, I learned valuable lessons in design compromise––how to balance out the design needs we saw in user testing with the existing desktop application and the desires of our partners.

Identifying Pain Points

Despite their core user group being Dartmouth undergraduates, the Dickey Center did not have a complete understanding of their needs nor a direct line of access to get them. My challenge was to contact and interview students, staff members, and other key stakeholders to fully understand the client’s status quo.

In total, we interviewed 27 students and 8 staff members in this preliminary round of user research. We organized/aggregated our notes to reveal insights about the students.

Learnings

1. What it means to dive deep, fast
‍Workstreams at Bain move extremely quickly, and it taught me how crucial it is to dive deep into a project and create value for customers quickly.

2. The intersection of design and business goals
‍In the end design and business is about creating a better experience and giving better services to customers, and being able to see key moments of overlap and negotiation on how to achieve this goal was an extremely valuable part of this project. 

3. The importance of Agile delivery
‍Agile delivery is efficient, low-cost, and has ripple effects paying dividends in the long-run.

All of these learnings would not have been possible without the amazing guidance and support from my PD advisor Conner Hunihan, Product Design Manager Joe Taft, and Head of Design Merritt Robinson.

Casual Heuristics Review

I analyzed the V1 Flourish prototype’s existing approach to logging and tracking symptoms to understand the strengths and weak points of the current flow of the app. By reviewing the designs, I can be aware of how new empty states and logging structures can best mesh with the existing flow of the app, as well as identify any design/development weak points to bring up to the larger team.To do this analysis, I used 3 design heuristics from the Nielsen Norman Group (NNG):
‍

1. Ease of Use: Tracking features must be easy to use and minimize cognitive load by making elements, actions, and options recognizable.
2. Flexibility and Efficiency: Frequent actions should be made easier for experienced and inexperienced users, aim to use as few actions as possible to achieve every task
3. Match Between System & Real World: The language across the app should be natural and reflective of the industry/consumer standards for healthcare dialogue. Everything should be clear across the application and it should prioritize learnability and consistency both internally and externally.

Insights

Synthesizing these insights, the design opportunities I sought to take with the redesigned flow and first-time usage empty states were:

Iterating on UX

Once I had everything I needed to begin, I started off by sketching possible UX flows that the user could take while experiencing Flourish for the first time. Moving from pen and paper to low-fidelity greyscales, I began noticing clear distinctions and patterns between my ideas.

As I narrowed down the ideation process from grayscale to hi-fi and colors, I organized these broad distinctions into four categories of flows:
‍

Symptom First: Single [Symptom/Trigger/Health Factor] —> Categorization
Category First: Select Category —> Single Add [Symptom/Trigger/Health Factor]
Mixed Add: Show all Categories —> Single [Symptom/Trigger/Health Factor] in each
Mass Add: Mass [Symptom/Trigger/Health Factor] —> Unsorted List —> Categorize each item

Creating Clickable Prototypes

Out of these flows I created 4 hi-fi prototypes in Figma, and conducted usability testing via design critique and with external users. Click through the carousel to see user reactions and takeaways from each flow:

Given the feedback we received from users, we chose a combination of symptom first and mass add that allows for single-add [Symptom/Trigger/Health Factor]s with optional categorization.

Usability Changes

Challenge 1: Content-Type
Users had a difficult time identifying symptoms/treatments/health factors because they did not naturally label them in their minds, or if they did, their vocabulary to describe it is different than that of Flourish.

Usability Change 1:
‍Create a library that contains standard symptoms/treatments/health factors that would auto-fill as the user types to prompt them on proper examples of each. Eliminate defaulted categories to not confuse the user.

Challenge 2: Categorization
Symptoms/ treatments/health factors could fall into many categories or have no well-defined category

Usability Change 2: Make optional the categorization of items, which allows the user to organize their data however they’d prefer

Challenge 3: State-dependant UI changes Editing styles became different from initial empty-state views, which confused the user when they went back to make changes on the categorization of their items.

Usability Change: Standardize the look and flow of empty states and filled states from the first time people open the app to when they already have many items present

Final Look

On top of just redesigning the empty state experience, I also spent my time on Flourish developing an onboarding experience and creating a design system/hospital tool (below):

Design System
‍
‍A full-stack design system extends the component-based ideas of Atomic Design to be specific to Flourish, and allows the user experience to be standardized throughout the app by providing a high-level guide. I created a design system from scratch for Flourish––creating custom components out of font styles, colors, and standardized weights/roundness/etc.. From this, I applied these components onto 45+ screens: redesigning them to be modular and cohesive.

MassGen Hospital Integration
‍
‍As a side project throughout this experience, I created a Disease Activity Index (CDAI) and Pediatric Depressive Survey integration within the Flourish application for the Massachusetts General Hospital in Boston, Mass., that reminded users to log their symptoms on our mobile application in regular intervals, and processed that data for doctors in a backend web application. Generating meaningful impact for one of the  top-five hospitals in the United States was a rewarding aspect of this project I was really glad to have worked on.

Key Performance Indicators (KPIs)
‍As a mental exercise it’s good to consider KPIs and what metrics you want to use to make design/strategic adjustments. The KPIs I find most applicable to Flourish are:

Task Success Rate (TSR) = the # of correctly executed tasks
User Error Rate (UER) = the # of errors a user makes
Customer Satisfaction (CSAT)

Impact & Next Steps

This project was extremely rewarding, as I was able to generate tangible impact for MassGen Hospital, as well as work on a project that would help a large and underserved group.  Being able to hear the stories of our users and see our work come to life was amazing, and I’m excited to see the continued real-world impact delightful design and Flourish can have for the chronic illness community. ‍

‍Most importantly, this project taught me to exercise creativity in the face of constraints. From Des/Dev collaboration and challenges to statistical constraints of data analytics to COVID-19’s shift to remote work, this project reminded me to always stay flexible and nimble while approaching design challenges.

Learnings

#1: Do the work to understand your customer
‍There were times in the process where I wanted to move faster towards hi-fi designs, where I made myself slow down and do the work of understanding the personas and what each user needs. This was extremely helpful, as it was this work that informed most of my designs down the line.

‍#2: The importance of Journey Mapping
‍When first orienting myself on the problem space, creating a systems map to understand the offerings of Glue was helpful, but what drove the most value in the end was creating a journey map that encapsulated the trajectory of users and what they felt at each stage.

‍#3: Always be learningThere is so much to learn and absorb, and keeping your mind open to skills, techniques, and ways of working allows you to constantly improve.

All of these learnings would not have been possible without the amazing guidance and support from my manager Susie Herbstritt and mentor Denis Vacher.

Insights

Key Insights:

1. The application process is confusing and alienating - Students of all groups resoundingly said that the process felt overly complex, impersonal, and favoring one specific group/type of student.
‍2. There is an information discrepancy - Public-facing messages are either contradicting or not well communicated to students
‍3. Not all viable applicants are applying - The Dickey Center’s mission is to impact every possible type of student on campus, but that is not happening. Many students who would be amazing candidates are not applying, so a challenge is trying to source them.

These insights were generalized across all of the groups we interviewed, but to better target all the demographic and psychographic features of the student body, we decided to create value propositions for each user we encountered. This led us to develop 18 unique statements discussing the needs of each group as well as how the Dickey Center compared. Here are 6 of users we focused heavily on:

Insights in Action: Creating a Report Deliverable

We then moved on to ideation and brainstormed possible solutions across all aspects of the center: from building changes to digital outreach initiatives and structural application changes. We came up with 100+ ideas across 17 broad categories of solutions.

To narrow them down and understand what we wanted to target first, we created a specification/quantification matrix to get our ideas in order, focusing on ease of implementation, potential impact, accessibility, breadth of reach, cost effectiveness, and delight.

We compiled then compiled our ideas, as well as the background research/methodology that inspired it (interviews, data, etc.) into a 12-page report and presented an insights and ideas deck to the Dickey Center staff. We also led a 30-minute collaborative brainstorming workshop, where we walked through the fundamentals of design thinking and gave them space to ideate as well as provide feedback on our ideas. This workshop was extremely informative, and made us realize we needed to specifically target first-year students.

Value-Focused Experiential Learning Presentations

To dive deep into the needs of first-year students, we created a journey map. We conducted 18 additional interviews and noticed throughout that a student’s trajectory of involvement with the center was contingent on participation in their first-year undergraduate program (Great Issues Scholars, or GIS), so we mapped out the experience of two different students who did or did not participate in the program. We focused specifically on identifying the emotions associated with every step of the process.

This revealed a need for clear, concise, and engaging information sessions that would give all students–– regardless of background in international experiences––an opportunity to understand what GIS was like. To address this need, we collaborated with our partners to create a 60-minute long experiential learning presentation.

This was an immersive learnings workshop that encouraged students to participate in 3 activity modules focused on the Dickey Center’s main pillars of offerings  (International Security, Arctic & the Environment, and Global Health). This allowed students to see what the programs were like and what topics were covered before applying, as well as created a space for them to ask questions/get connected to other resources in the post-activity Q&A. 

Usability Testing with a Focus Group

We sourced a 6-person focus group comprised of Dartmouth-bound high school Seniors who were interested in the Dickey Center programs. This allowed us to target our core user group of first-year students in a controlled manner. We ran through the 60 minutes of material, then solicited feedback.

‍Users were extremely receptive to the presentation and urged us to implement this solution full-time. ‍

‍Having received confirmation from our core user group that this was a viable product, we saw the opportunity to scale this solution and apply it to other groups, including modifying the materials for First-Generation/Low-Income (FYSEP) and BIPOC students.

Impact & Next Steps

Our insights reports and interview data have already been implemented on two application cycles, a website redesign, and in the upcoming first-year recruiting strategy. The Dickey Center has been in contact with the FYSEP program at Dartmouth, and the material may potentially be used as part of their college orientation program. Additionally, our 10-month consult was so successful that it led to Dartmouth’s Institute of Design creating an entire program based on the work we did, called Design Corps. I was hired to create the logo and branding for this new Design Corps program and may return as a mentor for the projects as well.

Reflecting on my experience over the past 10 months, I am so excited to have made a lasting impact on campus. Through weekly meetings with our partner contact, presenting deliverable decks to the entire staff every term, and iterating off feedback, I learned so much and developed comfort and passion for client work.

Thank you, Amy Newcomb, Alex Wells, Rahul Rao, Rich Nadworny, Anca Balaceanu, Eugene Korsunskiy, and the Dickey Center for being amazing partners, mentors, and friends during this process. This work could not have been possible without your support.