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.

Understanding the Field

To establish a baseline understanding of the museum and “art-tech” field, we did industry research on a broad range of ways new technologies were applied to arts institutions: from the New York Metropolitan Museum’s VR experience to Adobe’s collaboration with the SF MoMa to rethink the selfie.

After determining the existing and the possible, we also set out to gain a deeper understanding of the paintings we would be working with. The museum provided 11 paintings with descriptions written by their team of curators that they wanted to be a part of this collection. We set about sectioning off each painting to their individual elements and generating new captions for each section. This exercise not only allowed us to appreciate each individual section of the painting, but also created a back-end map of the X-Y coordinates of sections that would allow us to cross-reference user gaze paths with the painting element they were viewing.

Negotiating User Needs and Client Constraints

What the museum (our client) wants and what users need are not always in line––obviously both want the guest to have a good experience, but the means of achieving that may collide. Thus, a key design challenge was negotiating needs and constraints.

Creating the Experience

After getting an understanding of both what was possible and what our clients/users needed, we began ideating possible experiences: from AR memory retention games to tracking how long eyes looked at a certain color. We turned these ideas into storyboards we presented to the client. After settling in on the concept of tracking user’s visual data and teaching them about each element of the painting, we began refining the storyboards.

Key Design Decisions

The key design decisions that defined the way our experience felt to a user were how we chose to display data, source comparison data, highlight objects, and thematically tie together our experience.‍

‍Displaying user data
The Tobii Nano Pro allowed us to get information on the X/Y coordinates of a person’s gaze path, with longer looks leading to a higher concentration of gaze points in a particular area. Capturing multiple points per minute, we had a wealth of data to work with, so a key challenge was how we would display this information in a way that was easy to understand and delightful for the user.

We ended up deciding to show a user’s gaze path for 30 seconds first, or collection of points in sequential order from when they started looking at a painting to 30 seconds later, connected by a line. Users liked this format because they were able to directly recall what they were thinking when their eyes shifted from one location to another.

We would compare their gaze path to that of a curator so that they could see what areas they missed, or brag to friends if their way of looking at a painting was similar to a professional’s.Afterwards, we would show their heat map, and compare that to a curator’s as well. A heat map was created by measuring the duration of gaze in a particular area (measuring the amount of gaze points condensed in the area), and creating a map of high and low gaze points throughout the painting. We ended up going in this direction because users really analyzing what they focused the most on.

‍Sourcing Curator DataSometimes the ideal solution is too costly or expensive time-wise, and it’s important to do a design work-around to still achieve the same result. Because we wanted to compare user data with curator data, we needed to have documented curator data. Getting this data was costly because we were not in the same location, and could only fly out to St. Petersburg once for installation. We got scrappy, and self-generated curator gaze paths based on what we knew about the painting. Having had spent so much time interviewing curators, we had an understanding of how they would view a painting, and constructed gaze paths using our own eyes. 

‍Highlighting ObjectsTo teach users about different parts of the painting, we needed to draw their attention to the element we were discussing. This led us to consider how we wanted to highlight an object of interest. From blurring the background to highlighting an object’s exterior contour, we tried out different methods until we settled on pointing an arrow at the object, and having the arrow’s path follow that of a curator’s gaze path.

‍Visual Themes
Because our experience would be publicly showcased, we wanted it to have a cohesive visual feel for its users. It was important to use that it sparked delight but also was non-distracting from the paintings, we explored many different potential options before settling on the final minimalistic black theme. 

User/Client Testing & Iterations

We were able to get feedback directly from the public via two technology expos at Dartmouth. Students, professors, and local residents tried out our exhibit, and it was even tried out by our President Phil Hanlon! We were also get get feedback during 4 design critiques with the Dartmouth Digital Applied Learning and Innovation Lab, and through weekly partner feedback sessions.
‍
‍When it came to the final round of iteration, we put a high-level of thought into how it might come together. We created standard components for every caption, and color-matched them to best fit with the color scheme of each of the 11 paintings. We also got new professionally-taken JPEGs of the paintings so that their color tone was as life-like as possible.

We sat down with the C00/CMO and walked through every single caption (of 100+ captions) to time them and insert strategic copy breaks so that the entire experience was thoughtfully and purposefully timed, and even created a custom monitor and designed our final layout around the placement of the Tobii Nano on it.

Product Installation & Client Visit

Above is the final, copy-writed and prototyped 170+ screens we handed off to the client. Alongside this process was our Florida trip:

‍Visiting the Client Site for Co-CreationWe were finally able to meet all of our key partners in real life and grab a meal with them (and a board member of the museum). Outside of doing copywriting with the C00, we had each of the executives try out our experience, and walked through it’s technical details with the museum’s IT staff for clean handoff. We also were able to meet the curators who helped us formulate the didactic captions––it was a really cool moment to be able to see people who know everything about the artwork get the opportunity to experience it in a completely new way.

Also, as a designer whose main body of work was created during the pandemic, I've rarely had the opportunity to meet stakeholders/clients in person, so it was a very rewarding experience to not only meet the Dali Museum staff, but co-create on our project with them.

‍Socials and PressWe received a private tour of the museum from a curator, and were followed around by a photographer and videographer, who were capturing content for Dalí Museum socials for when the project would be announced to the public. We also sat down for formal interviews (the first time I’ve ever been mic-ed up!), and an article about our experiences was published in the Dartmouth News!

‍I was also able to see my favorite of the 11 art pieces, The Average Bureaucrat, in real life. After working on something for so long I really felt connected to the piece, and I actually became emotional seeing it for the first time :’)

‍Amazing Team BondingOur team spent the weekend before the demo trip exploring the beautiful St. Petersburg area. From playing frisbee on the beach to working a late-night before the client demo in the Airbnb wrapping up final changes, it was a great trip.

Impact & Next Steps

Creating something to be installed in such a prestigious museum and for thousands of visitors is so exciting as a young designer and an Art History major. It was genuinely moving to be able to combine my love for art and design in a cohesive and effective way. COVID-19 has also made it such that I’ve rarely had the opportunity to truly engage with who I’m designing for, and getting the opportunity for in-person co-creation just made the design process that much more rewarding.

‍One of my main takeaways from this experience is the importance of being passionate about your work and surrounding yourself with people who feel the same. When things get daunting it really helps to be surrounded by people all excited about the project and pushing to create the best possible product. The designers, developers, and PMs on this team were some of the best I’ve ever worked with, and I am honored to be able to call them teammates and friends.

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.

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.