A screenshot from The Bump website.

The Bump: Web

Web UX

Client/Employer:

The Bump, XO Group Inc.

My Role:

Senior UX Designer

URL:

www.thebump.com (the site has subsequently been redesigned)

Colophon:

Sketch, Invision, et al.

One of the largest tasks for the small team I joined at XO Group was the complete redesign and relaunch of the legacy TheBump.com website.

In this case study:

Prototypes: Adaptive Behavior Case Study

The long pre-existing site had a separate "m-dot" mobile version, and as such, could not be made properly responsive with the timeline and engineering resources we had at the time.

Even so, we did explore various adaptive column structure concepts for desktop web. Below are screen recordings of a few prototypes I built:

Prototype: An expandable left rail, collapsed at smaller widths
Prototype: Two-column structure
Prototype: Three-column structure

Mobile Web Case Study

Below are a selection of my UX mocks for the "m-dot" mobile website.

A screenshot of The Bump mobile website homepage.
Mobile Web Home Screen
A screenshot of The Bump mobile website calendar.
Mobile Web Calendar Tool
A screenshot of The Bump mobile website community page.
Mobile Web Community Screen
A screenshot of The Bump mobile website guides section.
Mobile Web Guides Screen
A screenshot of The Bump mobile website more screen.
Mobile Web More Screen
A screenshot of The Bump mobile website search screen.
Mobile Web Search

Desktop Web Case Study

Below are a selection of my UX mocks for the desktop website.

A screenshot of The Bump website homepage.
Desktop Web: Home
A screenshot of The Bump website calendary pate.
Desktop Web: Pregnancy Calendar Tool
A screenshot of The Bump website community page.
Desktop Web: Community
A screenshot of The Bump website account page.
Desktop Web: Account
A screenshot of The Bump website article slideshow page.
Desktop Web: Slideshow Modal Window
A screenshot of The Bump website Best of Baby page.
Desktop Web: Best of Baby
A screenshot of The Bump website Registry page.
Desktop Web: Registry
A screenshot of The Bump website nav flyout.
Desktop Web: Nav Flyout

Responsive Email Case Study

Indirectly related to the above, we also experimented with overhauling The Bump's email template. I already had extensive experience building HTML emails for Warner Bros., but the complicated techniques required to create responsive emails were new to me. I built two prototypes in demonstrating different approaches (more than prototypes, actually; more like actual usable code). Screen recordings below:

Screen Recording: Responsive Email Prototype One
Screen Recording: Responsive Email Prototype Two