FULL VERSION
SNAPPY VERSION

Building a learning portal for caretakers

Role
Duration
Tools
Skills

UX Design Lead
January 2017  -  August 2018
Balsamiq, Sketch
Low-Fi Wireframing, Prototyping, Visual Design, Branding

Background

Last semester, I led the UX and visual design for  a project called Impart, directed by a team of professors and researchers at the Yale School of Medicine and the University of Michigan. Impart (Integrated Model for Personal Assistant Research and Training) is a learning management system to streamline an online training and certification process for the direct care workforce.

This was  one of the most complex and labor-intensive design projects as a primarily because the LMS is a complex conceptual model composed of many moving pieces.

In this project I was given a set of early-stage mockups and asked to make design edits and translate them into higher-fidelity screens. Below you can see some of the original (pre-edited mocks), as well as my high-fidelity translations.

Impart is currently undergoing its third revision, and I will post soon with updates.

Process

The process of designing this project was far less linear than previous projects I've been involved in. I was tasked with this design when the shape of this product was still very much in flux, so my design process became a matter of constantly re-visiting my earlier work and adding on or deleting features as the team worked through their vision for the project.

The team provided me with low-fidelity, skeleton mockups, but afforded me a lot of flexibility to correct or flesh out the product's features. This was extremely helpful because visualizing this process really forced me to think through (and struggle with) the structure of this product. I noticed features that Impart needed such as classroom messaging, gradebooks, and trainer course directories, and I passed them along to the team.

The primary challenges and growth points of this project centered around the following three categories: (1) Branding, (2) Multi-view user flow, and (3) Negotiating perspectives.

(1) Branding

Impart's original visual identity felt incoherent and clunky. I wanted to rebrand Impart with a friendly and modern user experience, focusing especially on organizational consistency. Though a lot of the skeleton wireframes for the project were given to me, a large part of this project involved translating these features into a visually cohesive and engaging interface. I tried to keep my designs minimal and clean with bright red highlights to tie the project to medical imagery.

(2) Multi-view user flow

One of the primary difficulties of this project was designing screens for four different users: personal care educators, personal care assistants, public unregistered site visitors, and administrators. Not only did this quadruple the quantity of screens I was generating, but it forced me to consider functionality from multiple perspectives at once.

This made me consider questions like, "What kinds of functions does a trainer prioritize over a personal care assistant?" and "What features are most important to an administrator?"

Navigating the disparate priorities and experiences of these users while maintaining consistency in my designs was a major challenge, but one I enjoyed thinking through.

(3) Negotiating Perspectives

This project also involved negotiating substantially divergent perspectives between team members about how Impart should function and look like. Clashes in design preferences surfaced particularly in. For this reason, you might see some variance in the designs I've featured below, which are a mash-up of the many different iterations that this project went through.

Certain team members envisioned Impart as an extension of the current brand identity and website. Others found fault in the current website and wanted to approach the content with a fresh visual eye.

As the designer, I attempted to reconcile these voices in my work. I used the original wireframes that were provided to me, but I suggested many structural shifts for clarity and functionality. I also preserved the original logo (though I originally changed the logo altogether). This project taught me a lot about how designers become mediators during the design process.

Home Page: Public Portal

I was provided with basic Balsamiq mockups to work off of. The screen below is the home page layout I was provided with, or the public portal. A user that is not logged into the system is automatically forwarded to this page, which briefly summarizes Impart's mission and points users towards trainer or PCA portals.

I found this skeleton to be fairly bland and visually confusing. The logo appears twice, the text is far too crowded, the social media icons are far too large, and the page reads more like a document than a web page.I also found the double menu to be confusing and felt that the two menus could easily be combined. Unfortunately, the double menu was nonnegotiable with my client. Initially I created a more illustrative version of the home page, but I ultimately decided on a much simpler and straightforward version.

The first design below was completed before I had access to the skeleton mockup. The colors below are far brighter and more glaring than their intended setting due to some file conversion issues, but the rest of the page is as I intended.

The second design translates material from the skeleton mockup into a cleaner and more dynamic format.

The primary goal of my redesigned page is to best direct users to their respective portals, so I avoided overloading the page with information.

I relocated the "Login" button to the top right corner and added social media icons and a sign-up option: a feature that had been missing in the original mockup. I illustrated icons to accompany the site's separate "goals" and added in a quick section to reroute users directly to trainer and PCA registration.

An early draft, with more complex visuals

A second draft, with a simpler interface

Public Portal: Articles

Beyond the home page, the public portal was a fairly straightforward design exercise because the page content was limited to a simple text and image display. The most challenging page in this view was the "Why do we need personal care assistants?" page. For this page I was asked to design a continuous feed of articles, where the button "I want to be a PCA" would always be visible. My client wanted this action item to be present regardless of which article the reader selected.

At first my client strongly pushed for including the button "I want to be a PCA" in every article section. I worried that this was redundant. Instead, I ended up anchoring the button to the top of the page along with the header. This ensured that the button was clickable at all times.

Registration: Public Portal

There were many usability issues with the registration portal mockups I was provided with. It felt unnecessary to divide up the registration form into multiple categories, especially when some boxes only included one or two items of information. In terms of spacing, certain elements were too far apart, while others items felt quite pressed for space.

In my high-fidelity mockups, I combined every category into a single flow of information. I also added space for explanatory text and allowed for more space to input text in the certifications and qualifications categories of the Trainer Registration form.

Trainer Portal

The trainer portal was the view where I strayed furthest from the Balsamiq mocks I was provided. Though I was provided with a single mock, sen below, I began to realize that these screens were fairly limited in their capacity to function as classroom management tools. I added in a gradebook, as well as a roster, individual and group message system, and general curriculum dashboard.

As it turned out, these features became unnecessary when I learned the team was planing on using an external class management tool for grading assignments and keeping in contact with studnts.

Regardless, this was still an interesting way to think about the online learning process and how to best facilitate an in-site experience.

PCA Portal

The screens below demonstrate some of the user flow for PCA's to access their certificates, profiles, and enrolled courses. This part of the project was more or less direct transcription from mockup into high-fidelity prototype. My clients informed me that these screens were exactly how they intended the product to look, though I recommended removing the side bar to improve clarity.

Admin Portal

The admin portal was the lengthiest portal because it encompasses the management of trainers, personal care assistants, resources, courses, and modules. My favorite part about translating these designs into their high-fidelity counterparts was detecting areas for optimization. For example,

For example, I optimized the experience of adding locations and courses by expanding the range of button forms and functions beyond simple text input. Instead of manually filling in availabilities by typing in the days and times, I added in checkboxes for each day of the week and a drop-down form for the time. I hoped to make the experience of filling out these forms simpler and more intuitive.


I also experimented with color, using bright greens, pinks, and grays to clarify the data. Many of these screens involved cleanly and intuitively organizing data so as to make it as obvious as possible.

This added an extra layer of complexity to components as seemingly simple as tables. I questioned every element on the page, challenging whether elements as simple as line dividers were truly necessary, or redundant in partitioning information.

Logo Development


In my first round revisions, you'll notice that the original green and blue Impart logo is replaced with a red cross-shaped logo. I originally wanted to rebrand the logo of Impart, but my client communicated that she wanted to stick with the original logo for continuity with Impart Alliance's past work.

This presented some difficulties concerning Impart's color scheme because I'd originally designed the screens with a red color scheme in mind. Impart's original logo is blue and green, but the blue and green versions of my screens weren't as visually compelling. We're still in the process of deciding whether this added visual appeal is a reasonable tradeoff for brand continuity.

Although this logo will not be used, I wanted to include some thoughts on the development of this logo because I love designing logos, and this was a fun design exercise.

I wanted to incorporate the "red cross" into the logo because it is an instantly recognizable healthcare symbol. This logo plays on familiar imagery by typographically integrating the cross, which is rounded to reinforce Impart's approachable visual identity.

The top leg also functions as an upside-down "i," and the letter's dot becomes a meeting point between the deconstructed legs of the cross. This represents Impart's counter-traditional role in connecting caretakers with a comprehensive education.

I went through a few different iterations of this logo, culminating in the design that I felt communicated my goals with the least amount of visual elements.

Conclusion

Ultimately, I did not get to continue work with the project to its completion because the Emergency Medicine department discontinued its work with the Impart team. Despite this abrupt end to my work, I was glad to have had the opportunity to provide a design perspective to the researchers and professors working on the project.

Building a learning portal for caretakers

Role
Duration
Tools
Skills

UX Design Lead
January 2017  -  August 2018
Balsamiq, Sketch
Low-Fi Wireframing, Prototyping, Visual Design, Branding

Original Balsamiq Mockup (Pre-Redesign): Cluttered and Confusing

Home page Redesign Iterations

An early draft, with more complex visuals

A second draft, with a simpler interface

Public Portal: Article Layout Redesign

Registration (Original Balsamiq Mocks): Disordered and Redundant

Redesigned Registration

Trainer Portal

PCA Portal

Admin Portal

Logo Development