HealthCrowd

Re-designed HealthCrowd website with new brand and style guidelines

Click here to view the website (as of Jan. 2022)

Role

UI Design

Tools Used

Adobe XD
Adobe Illustrator

Date

Jan 2021–Mar 2021

Overview

When HealthCrowd underwent a re-branding effort in 2020, I was tasked with managing the overall design of HealthCrowd’s new website and architecture and coordinating with the engineers to implement these designs.

Constraints

We were given general brand guidelines and illustrations from a third-party marketing firm. They provided the brand colors and font family.
All the copy was written by a separate department within HealthCrowd.

Assets

I worked with an engineer to create assets and animation guidelines for this JavaScript animation on the landing page.

I revised and repurposed provided illustrations for different use cases, such as preview images for these cards.

I established the standard structure of the website to be wide horizontal sections and incorporated use of stock imagery for our branding.

I created a high-fidelity mock-up for a prospective enterprise mass-messaging tool.

Learnings

Even though I’m not a web designer by training, this was a valuable learning experience for me. This was my first experience directly handing off high-fidelity designs in Adobe XD to a lean engineering team.

What I Would Change

There are a few inconsistencies between the sizing, padding, and margins of various UI components, so there needs to be a design system library. For instance, the height of each website section needs to have had more generous padding between them. Another, the button horizontal padding needs to be 2x, in which x is the vertical padding.
This website is not fully WCAG Level AA accessible. There needs to be an accessibility audit, but a few issues I’ve noticed are lack of language options, lack of use of semantic HTML, and insufficient color contrast.

Page updated

Google Sites

Report abuse