brand design

establishing a brand identity

brand adjectives

To kickstart the branding process, the client and I identified a list of adjectives the brand should embody which create the foundation for creating a visual identity.

symbols

The next step involved converting the brand adjectives to symbolic representations which I’ll use to choose a name and design logos.

product name

I then brainstormed potential company names that evoked these symbols. Because the client hoped to generalize in the future, the name couldn't be specific to COVID-19 or medicine. We decided on Bluestone Safe which conveys security, reliability, & reassurance and strikes a balance between medical & non-medical.

developing look & feel

typography

Bluestone needed a single typeface that was versatile enough to adapt to any use case, from static design to responsive design, and conveyed the security and simplicity we wanted Bluestone to embody. After comparing options, I decided on Montserrat.

colors

Focusing on the adjectives "reliable" and "minimal," I developed a monochromatic palette of three blues to lay the foundation for the brand. I added three semantic colors to use as communication tools.

logo design

sketch

To kick off the logo design process, I took the symbolic representations of the name Bluestone and visualized them through a few rounds of rough sketches.

iterate

With some ideas sketched out, I started digital iterations for each of the viable concepts. After presenting the options to the client, we came to a final selection.

finalize

Once I'd made the logos pixel perfect, I presented the final symbol and wordmark to the client, sparking excitement to see the results of my work that lay ahead.

brand guidelines

After establishing Bluestone's brand, I created a document thoroughly outlining its primary components, how to use them, and how not to use them

purpose

These Brand Guidelines are designed with two primary use cases in mind:

help partner organizations use Bluestone's brand properly, and
help internal Bluestone teams maintain brand consistency.

components

Colors & typography
Wordmark & symbol
Logo variations & usage
Improper logo usage

Branding for marketing

adapting the brand

One of the challenges presented to me was adapting the brand not only for digital products and interface styles, but also for graphic marketing assets such as posters & pamphlets. While the interface design needed to be fairly simple, the static design provided a platform to explore the brand more stylistically.

whitelabeling

Part of the Bluestone package for clients is co-branded informational material. For this, I had to establish a fine line between the Bluestone brand and the client's brand. Ultimately, I leaned into the colors of the client's brand, while maintaining the illustration & typographical style of the Bluestone brand.

results

client reaction

Ultimately, the client was extremely pleased with the brand I created for Bluestone. They were eager to use it anywhere they could and continued to speak to its value throughout my contract with them.

value created

By establishing a strong brand from the jump, I was able to expedite my design process for the products (web app, administrative dashboard, marketing website) which subsequently minimized the startup time for Bluestone to launch. Bluestone Safe was thus able to be one of, if not the, first COVID-19 Risk Management system on the market.

product design

business considerations

intention

As the COVID-19 pandemic arrived in America, few were hit as hard as Indigenous Populations. Thumbroll Inc. in collaboration with PPS Health had an opportunity to provide valuable resources like PCA testing and telemedicine to Native American Tribes & Casinos, allowing them to re-open their local economies safely and swiftly. After establishing themselves in this industry, they would expand Bluestone's reach to any industry trying to re-open.

needs

To do this, the client needed a system of products that:

seamlessly connected four user types and three services,
could grown and change at a moment's notice, and
could be designed, built, and shipped incrementally.

challenges

This project was not lacking constraints, each of which presented unique challenges for the design process. Some were naturally endemic to working with a small startup, but the project itself presented its own unique challenges.

- solo designer

The limited startup budget meant I was the only designer on the project. In the early iterations, this gave me the autonomy I needed to meet extremely tight deadlines leading up to the initial launch. However, when I had a chance to settle into a more thorough design process, it became necessary to delegate certain tasks to two media contractors who the client carried over from a previous project. While it took some time to teach them the ropes, it paid off to have not only a few extra hands on deck, but also some extra eyes when needed.

- no market or competitors

I usually begin my design process with a competitive analysis of the market, but because we started this project in April of 2020, it was a completely unprecedented product, poised to be the first of its kind to hit the market. This meant I had to invent the wheel in much of the design process. While this increased the likelihood of failure and required iteration, it also provided more room to be creative in solving such a significant problem.

- minimal communication with developers

Due to geological and organizational barriers, I wasn’t able to establish a direct line of contact with developers. I instead had to communicated with them through the client, making collaboration, iteration, and handoff inefficient.

- no direct access to users

Due to communication restrictions, direct User Research was unattainable. Luckily, I was able to communicate with the user support team to gain some general insight into user characteristics as well as the issues they were experiencing with the product. I used this information to determine how design could better serve the user and not just the business.

- client unfamiliar with design

Because the client had never worked with a designer, advocating the importance of user-centered design and explaining my work demanded more time than it typically would. While this sometimes hindered my ability to work at an optimal pace, it also provided a healthy, transparent dialog between myself and the client throughout the contract.

- hipaa compliance

Because Bluestone is a medical platform, it was necessary to ensure we were complying with HIPAA regulations at each stage. In certain instances, this meant I had to implement a seemingly unnecessary or cumbersome design feature. In the end, though, it taught me that sometimes you have to sacrifice the immediate user experience to ultimately protect the user.

identifying the users

clients

We started unconventionally with basic wireframes demonstrating what an improved user flow would look like in comparison to the existing user flow in order to get buy-in from stakeholders who were originally unconvinced that the process required such a dramatic overhaul.

- goal

reopen safely

- task

Monitor COVID-19 risk in their organization
Track Team Members missing work due to COVID-19

- challenge

already extremely busy with other aspects of operation

team members

Team Members are employees, students, athletes, etc. who use the product through their organization, the Client.

- goal

Resume activity safely

- task

Report symptoms daily
Register tests kits
Receive test results
Know whether they can physically participate in their organization each day

- challenge

Wide range: generations, education levels, and technological ability
Potential barriers: language, access to technology, and medical mistrust

medical team

The Medical Team consists of medical professionals (such as physicians, physician assistants, and nurses) who conduct telemedicine for Bluestone.

- goal

Ensure Team Members are safe from COVID-19

- task

Access Team Members' medical histories
Report calls with Team Members
Assign next steps for Team Members

- challenge

Limited time
Most expensive part of business operations
Highly specialized and familiar with Electronic Medical records

admins

Admins are members of the Bluestone management team.

- goal

Ensure the entire system is working properly

- task

Monitor interaction between all users & services
Access, change, add, & remove data from the system

- challenge

Vast, diverse data set
Very few admins
Limited time

services

symptom monitoring

Bluestone would use algorithms to track and monitor Team Member's symptoms on a daily basis via required self-reporting.

telemedicine

Bluestone would provide telemedicine services through their Medical Team, who would assess Team Members and feed their recommendations to the algorithms.

saliva testing

Lastly, Bluestone would provide Clients with impossible to access 24-hr turnaround PCR Saliva Testing through their partner lab.

product ideation

goals, needs, & strategies

- scalable

Knowing the pandemic wouldn’t end anytime soon meant the demand for Bluestone services would grow exponentially, permeating all industries. Thus, to accommodate this, the product had to be ready to scale quickly at all times

- efficient

The rapidly changing nature of COVID-19 and our understanding thereof meant the product needed to be able to not only adapt overtime but also change on a daily basis.

- adaptable

Above all else, the product needed to be efficient so it could effectively address the urgency and severity of the pandemic.

- agile approach

To achieve these core goals, I took an agile approach to the design process so I could simultaneously ship and iterate on designs to meet rapid turnarounds.

product ecosystem proposal

- web app

After considering the needs outlined above, I determined the central product in the system would be a Web App comprised of an initial Risk Assessment, Daily Symptom Survey, test registration & results, and a way for Team Members to monitor their COVID-19 status. All data collected in the surveys would feed the algorithms that determine risk and recommend a Team Member’s next steps.

- dashboard

To manage the system, there would be a data-centered platform where all of the algorithms could be monitored and all data could be seen, called the Dashboard. It would adapt to the individual needs of each user (Clients, Medical Team, Admins) by hiding certain information and functions dependent on the account tag.

- website

Lastly, Bluestone needed a classic marketing site to attract more Clients from various industries as well as a protected section that provides user resources for Clients & Team Members who are facing larger learning curves, without requiring direct contact with the Bluestone team.

web app

designing for team members

who

In order to get the product out quickly and efficiently, I decided to design for the most challenging potential user first. My thinking - if the least educated and least technologically adept Team Member could successfully interact with the product, all of the users could.

how

Because the users had limited cognitive energy to spare (rushing to get to work, living in a stressful pandemic, etc.), it was important that the app was as step-by-step and distraction-free as it could be, allowing the user to spend their decision making energy on answering the medical questions rather than navigating the app.

user flow & wireframes

design intentions

intuitive & familiar

My goal was to make the web app feel less like tech and more like a convenient and efficient survey. To do that, I started by establishing a concise design system with familiar patterns and effortless interactions. From there, I was able to create a simple interface that helped minimize the learning curve and accommodate a wide range of user abilities.

Reassuring & accessible

Translating the brand characteristics to visual design meant using large rounded shapes for clarity, a slightly skeuomorphic style for ample feedback, obvious typographical hierarchy for user flow efficiency, and accent colors for meaningful emphasis of vital information.

final product

registration & login

Strict vertical organization establishes clear information hierarchy
Descriptive error messages reduce frustration and completion time

surveys

Top-to-bottom information hierarchy creates effortless flow
Large touch zones and ample feedback reduce errors
Consistent use of patterns throughout creates foundation for habitual use

profile

Standard profile layout ensures familiarity
When editing information, presentation calls back to initial input at registration to eliminate unnecessary learning curve

register test kits

Highly instructional to simplify the user's most complicated task

home / status

Most important information communicated verbally, with color, and with visual aids
Least important information has least visual weight
CTA used for the required daily action
Meatball menu used to access remaining primary actions

test results

Communicative empty state eliminates confusion
Results presented in timeline format reflecting the real world importance of the data

popup messages

Used to alert the user of important activity and provide feedback regarding their interaction with the product

tooltips

Used for any features or functions that could be considered not self-explanatory

Dashboard

designing for admins, medical team, & clients

challenge

The Dashboard serves three of the four primary users in the ecosystem, making it quite the logistical puzzle. For development reasons, we decided there would be one Dashboard that would adapt to different user types based on account tags by hiding certain information and functionality. While this created a leaner product with opportunities to minimize redundancy, it also presented the biggest threat to HIPAA compliance if it were to be designed improperly. Therefore, I did extensive research on design accommodations for medically sensitive data before making any decisions about the system's fundamental structure and function.

dev limitations

Because the devs and I were stretched thin designing & building the Web App interface, we decided the devs would be more comfortable using a template for this kind of data-heavy and security-intensive platform, which I would then adapt to fit our specific needs and visual identity.

organization

system architecture

For the product ecosystem to succeed as designed required the establishment of strong algorithms that would use data collected from the Web App, the Medical Team, and the lab to determine what a Team Member should do next. The margin for error here was microscopic considering the consequences were a major COVID-19 outbreak in an already vulnerable community and industry. As the person designing the products, I had the unique challenge of helping to determine exactly how the algorithms should work. A teammate and I worked together to map out the individual pathways which we then passed along to the development team to build.

information architecture

With such a vast and various data set, effective organization of the information on the Dashboard became one of the biggest challenges. After exploring multiple methods, I decided to organize the data according to three parameters:

relevance to other data
Results presented in timeline format reflecting the real world importance of the data
visibility to each user type.

This is most evident in the navigation panel, but also determined my organizational choices within pages and tables as well as my strategies for filters.

site map

high fidelity mockups

adapting the developers template

I worked within the library provided by the development team, determining the most effective use of it to serve all our needs. I then created mockups of the templates and applied the Bluestone visual style which the devs used to turn a generic website into our own. While the limited options for organizing and presenting information created a challenge for me, the ability to simply sub in the elements and visual properties I indicated was helpful in expediting the development team’s implementation of an attractive and user-friendly site.

tables

I chose a table with ample sorting options which allows users to find the data they want using their own mental models. The filter options are precise, reflecting content type and user type. Whenever common data types, such as yes/no, are used in a table, they are represented by symbols to reduce cognitive strain caused by excessive text.

navigation

The primary navigation is organized in accordance with both the algorithms and user types so it’s easy for all users to follow data through the system.

infographics

Useful aggregate data is displayed visually to distinguish from individual data points as well as provide a simpler way for the user to digest the data.

electronic medical record

challenge

The Medical Team needed a comprehensive yet easily digestible EMR for reference when speaking with Team Members as well as a method to report the contents of their calls in real time. Having worked with EMRs before as an ER scribe, I knew this would be the biggest challenge of the project. Given the sheer volume and variety of information and functions this page had to accommodate, I needed to be free of the template to design with precision. Efficiency was the key goal here, both to meet the specialized needs of the user as well as to reduce time spent on the highest business cost. In the end, the Medical Team described this as the most efficient and pleasant EMR they had ever used, which is why I also consider this page to be my biggest success of the project.

organization

Before I began, I had the opportunity to ask the Medical Team some questions about priorities and workflow which ultimately guided my organizational decisions. The page contains three major sections, distinguished by color. Within the major sections, information is broken into subsections which are presented on individual cards. The sections and subsections are organized vertically in order of importance as communicated by the Medical Team.

- section 1

The top section is all of the Team Member’s information given at registration, the system’s current analysis of them, any tools used by the Medical Team, and a log of their assessments, exposure, and testing. I placed the call survey along the side so the Medical Team could reference the information they needed during the call without having to navigate away from the survey.

- section 2

The middle section is a visual timeline of any daily recorded data points.

- section 3

The third section contains full transcripts of the Team Member’s responses to both the Risk Assessment and the most recent Daily Symptom Survey, broken into groups of related questions, with the ability to retrieve the transcript from any previous instance.

website