The Bump was the brand's flagship native iOS app for pregnant people and those with newborns. Below are some UX documents, mockups, and prototypes, roughly in chronological order.
In this case study:
- High-res UX Wireframes: Early Exploration
- Prototype: Sidenav Concept
- Prototype: Card Open & Close Cloncept
- Prototype: Slideshow Card Concept
- watchOS Hackathon
- High-res UX Wireframes: Incorporating Later UI Design
- High-res UX Wireframes: Android adaptation
- Prototypes: Feed Interaction
- Prototype: First-Launch Tutorial
- Prototype: Instant Article
- Prototype: Interactions
- Prototype: For User Testing
High-res UX Wireframes: Early Exploration
Below is a selection of some of my UX mockups for The Bump pregancy iOS app. The UI design was provisional.
Below is an overview of the many different card types the evolving Bump newsfeed was planned to support:
Prototype: Side Navigation Concept
Also from early in the process, below is a non-interactive animated concept for navigating the weekly newsfeed via an expanding sidenav:
Prototype: Article Interaction
Another non-interactive prototype, exploring an interaction model for opening and closing a card within the feed:
Prototype: Slideshow Interaction
Below is a non-interactive animation, exploring a possible interaction model for slideshow cards:
watchOS hackathon
The Apple Watch was introduced while we were working on The Bump iOS app, and the team was eager to support the new device, especially considering its positioning as health/fitness tracker. We held an internal hackathon to explore how The Bump app could be adapted for the wrist. Below are some of my mockups, including weekly updates, appointments, to-do items, etc.
High-res UX Wireframes: Post-UI Design
A selection of my mockups from later rounds, incorporating The Bump's emerging UI design overseen by a separate designer:
High-res UX Wireframes: Android Adaptation
The Bump Pregnancy app launched for iOS first, after which the team adapted the design into Android conventions. Discoveries made during this process informed the subsequent redesign of website.
Here is a selection of high-fidelity wireframes for the Android app. For clarity, at this stage of the project, I was the UX designer, working with UI design elements created by the team's UI designer.
Prototypes: Feed Interaction:
Below are three non-interactive animated explorations of interacting with The Bump newsfeed: opening & closing a typical article card, scrolling past a mid-body image, and opening & closing a special "This Just In" card. Prototypes with Tumult Hype.
Prototype: First Launch Tutorial
Below is a non-interactive prototype exploring a first-launch tutorial, that would walk a new user through the basics of using the app.
Prototype: Instant Article
Interactive exploration of a Facebook/Snapchat-style instant article experience for The Bump iOS app. Click the arrows to simulate swiping on a touchscreen. Built in Tumult Hype.
Prototype: Interactions
Clickable prototype exploring interactions, transitions, and animations for a redesign of The Bump iOS app. Built in Tumult Hype.
Prototype: User Testing
An elaborate web app prototype for The Bump iOS app v4.0, created for a round of user testing. Designed to be saved to an iPhone home screen to simulate the full native app experience. Built in Tumult Hype.