Digital Product Design

Streamlined Integration.

Working on site for a Fortune 500 healthcare company on an agile team, we were tasked with the implementation of a new platform, consolidating hundreds of websites across multiple brands and combining them into one cohesive new system.

Deliverables

UX Design + Audit
Competitive Analysis
User Flows
Wireframes
Content Strategy
Design System
Prototype
UI Design
Design QA

As many as

300 different websites

could be integrated into the

new unified platform

As the

design lead

on the project's platform team, I am highly focused on

systems development and platform capabilities

to support front-end users, back-end users, and future users.

As the project has evolved, so has the team structure. Currently, there are three distinct teams. Two are focused on separate, distinct front-end user groups. The third--the Platform Team-- exists not only to support the user groups of the other two teams, but also as a framework for other web applications that are built on it.

Process

Working in two-week sprints, cross-functional teams emphasized easy goal-setting and collaborative solutions.

Discover
Define
Design
Develop

From the beginning, the client had a clear vision of how the desktop site should look.

To support the vision for the front end, extensive UX work was required including

research and audits

,

user flows

,

wireframes

and

prototyping

Colors

#ffffff
#b4b4b4
#777777
#333333
#cc00cc

Fonts

Raleway

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%&*()?

Lato

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%&*()?

Contact form directs inquiries to the client's inbox

Always up-to-date:

videos and biography section are updated regularly

Podcast section was added after the site was launched

The new section was designed to fit seamlessly with the existing site, while accommodating its unique graphic branding.

Identify and Analyze

Concepts, Problems and Enhancements

Agile tools such as Jira and Confluence help to organize and support

Sample Context of Use Analysis

Investigate and Communicate

User Engagement

Envision and Produce

High Level Visual Support

preliminary wireframes

Establish Prioritization

Determine User Impact

Identify Resources

At first, design files were generated and shared primarily via Sketch, inVision, and later Adobe® XD.

I conceived of and created a full-scale, interactive digital prototype.

Key Design Principles

  • Follow brand guidelines for visual design
  • Extend brand guidelines for digital design
  • Strong usage of typography and images
  • Employ layout and responsive design

During development, all teams rely heavily on the

digitized prototype

for front-end implementation

‹ ›
HTML, CSS, JavaScript
UI States + Error Handling
Responsiveness
Interactions
Dynamic UX
Motion UI Patterns

Final step:

Testing and Review

Design QA is done, often accompanied by markup visuals

sample design QA markups

CMS was an important part of the project scope

Each page is branded with its own color, and nav elements such as logo and CTA correspondingly change

#ea2b1f
#2bd6e2
#fcd558
#51f929

Custom Google map

A custom map was designed in keeping with the project's branding and design system

Off the Chain's Custom Google map

FAQ Accordions expand when clicked

Social links on instructor profiles

Café menu categorized in 3 sections

Collaboration with third-party software vendor

Zingfit

was important for

identity management

and

spot scheduling

Thorough

content auditing

and

user testing

were important steps in shaping an

enhanced user experience