Webflow Website Project

Innergy Birth Services

UX - VISUAL DESIGN - WEB DEVELOPMENT

Building an online presence that demystifies doulas & conveys support

SUMMARY

Innergy Birth Services provides full-spectrum doula support to mothers-to-be throughout their pregnancy and postpartum journey. I developed an online platform for their brand to easily educate prospective clients on the benefits of having a doula as well as showcase the details of their servicing suite.

My approach to this project led to a broader understanding of doula's amongst prospects, an overflow of service requests, and further solidification of retainer clients.

Team
Opportune Design Co.
1 Designer, 1 Copywriter
timeline

2021
12 Weeks

Tools
Adobe
Figma
Webflow
SEMrush/G.A.
Figjam/Miro
Typeform

roles
Strategy
Web Development
Visual Design
Consulting
Project Management

Building an online presence that demystifies doulas & conveys support

SUMMARY

Innergy Birth Services provides full-spectrum doula support to mothers-to-be throughout their pregnancy and postpartum journey. I developed an online platform for their brand to easily educate prospective clients on the benefits of having a doula as well as showcase the details of their servicing suite.

My approach to this project led to a broader understanding of doula's amongst prospects, an overflow of service requests, and further solidification of retainer clients.

Team
Opportune Design Co.
1 Designer, 1 Copywriter
timeline

2021
12 Weeks

Tools
Figma
Webflow
SEMrush/G.A.
Adobe
Figjam/Miro
Typeform

roles
Strategy
Visual Design
Consulting
Web Dev
Project Mgmt
Client Mgmt
discover

understandinG the challenge

Black Maternal Mortality Crisis
Increased Demand for Doulas
Postpartum "Post-Pandemic"
Black Maternal Mortality Crisis
Increased Demand for Doulas
Postpartum "Post-Pandemic"

Doulas are a hidden solution to a chronic problem, but what keeps this solution hidden? In short, three words: jargon, visibility, and access. How might we enable those in need to overcome these barriers?

With the infant mortality rate rising among Black mothers and the need for mother-centered birthing practices growing, my team set out to build an online presence to enable our client to demystify doulas and convey the support they provide.

discover

gathering
insights

I kicked off the project by conducting two rounds of stake holder interviews. The goal? effectively identify stakeholder needs and concerns.

Our stakeholder wished to:

  • Target those in the Boston Area who are considering or expecting to give birth and looking for information about and/or to get connected to a local Doula.
  • Explore site functionalities and features to decrease friction in their client booking process.
  • Utilize stock imagery and media to capture modern motherhood and show diversity.
  • Showcase their service offerings while providing easily digestible information and cultivating a welcoming, encouraging, and supportive online experience.

Methods: Affinity Diagram, Surveying, Interviewing

process video
stakeholder guidance
"I want women of color, in particular Black women to feel like that have someone in their corner throughout their pregnancy. My brand is helping decrease the infant mortality rate in black families by providing mothers-to-be with the support they need throughout their pregnancy and postpartum " - Shamara Innocent, Owner
considerations
Lack of business photography & service offering structure
design
Informative website experience that is encouraging, simple, and stylish
media
Utilize imagery to showcase modern motherhood
features
Blog, E-Mail Newsletter & Lead Capture Integration
discover

understanding
stakeholders

process video

I kicked off the project by conducting two rounds of stake holder interviews. The goal? effectively identify stakeholder needs and concerns.

Our stakeholder wished to:

  • Target those in the Boston Area who are considering or expecting to give birth and looking for information about and/or to get connected to a local Doula.
  • Explore site functionalities and features to decrease friction in their client booking process.
  • Utilize stock imagery and media to capture modern motherhood and show diversity.
  • Showcase their service offerings while providing easily digestible information and cultivating a welcoming, encouraging, and supportive online experience.

Methods: Affinity Diagram, Surveying, Interviewing

the bottom line
"I want women of color, in particular Black women to feel like that have someone in their corner throughout their pregnancy. My brand is helping decrease the infant mortality rate in black families by providing mothers-to-be with the support they need throughout their pregnancy and postpartum " - Shamara Innocent, Owner
considerations
Lack of business photography & service offering structure
design
Informative website experience that is encouraging, simple, and stylish
media
Utilize imagery to showcase modern motherhood
features
Blog, E-Mail Newsletter & Lead Capture Integration
define

Defining
focus areas

Comparative Audit
project pillars

In order to create alignment for the project, I worked alongside the design team and stakeholders to create project pillars. These served as the core compass of the project to prevent scope creep and reinforce objectives, as all project decisions and discussions should be able to be routed back to one of these pillars. The idea being to create a balance between stakeholder gain and user need.

We utilized insights from foundational research, stakeholder interviews, and the comparative audit to do so.

define

Defining
focus areas

In order to create alignment for the project, I worked alongside the design team and stakeholders to create project pillars. These served as the core compass of the project to prevent scope creep and reinforce objectives, as all project decisions and discussions should be able to be routed back to one of these pillars. The idea being to create a balance between stakeholder gain and user need.

We utilized insights from foundational research, stakeholder interviews, and the comparative audit to do so.

Comparative Audit
project pillars
define

establishing structure

For this new build, it was pertinent to establish a service offering and content structure that aligned with user needs. After discussions with my team and client about features, competitors, and offerings, I set up a card-sorting activity and began organizing key pages and content (see process video).

Method: Open Moderated Card Sorting, Visual Site Map & Page Flow

process video

In addition to a traditional SEO forward XML site map, I create a content forward version to identify page sections and linking conventions. This served as a conversation tool with the client to revisit offering priority and classifications.

Concession: I advocated to bring the external intake form in house to keep more users on page however, the client preferred to keep their existing process.

Using the site map as a base, I began to expand the section for each page to include a quick visual representation of layout as well as show the path and relationships between them. For this build the goal was to funnel the majority of the traffic to the booking page either direct to service offerings or the FAQ section. This is my preferred method in addition to a traditional page/site flow.

define

establishing structure

process video

For this new build, it was pertinent to establish a service offering and content structure that aligned with user needs. After discussions with my team and client about features, competitors, and offerings, I set up a card-sorting activity and began organizing key pages and content (see process video).

Method: Open Moderated Card Sorting, Visual Site Map & Page Flow

In addition to a traditional SEO forward XML site map, I create a content forward version to identify page sections and linking conventions. This served as a conversation tool with the client to revisit offering priority and classifications.

Concession: I advocated to bring the external intake form in house to keep more users on page however, the client preferred to keep their existing process.

Using the site map as a base, I began to expand the section for each page to include a quick visual representation of layout as well as show the path and relationships between them. For this build the goal was to funnel the majority of the traffic to the booking page either direct to service offerings or the FAQ section. This is my preferred method in addition to a traditional page/site flow.

design

setting
the tone

In a time where the potential complications of birthing can trigger emotions of fear, anxiety, and uncertainty, I aimed to create a warm, welcoming, and inclusive experience to disarm users and send a message of encouragement and support.

  • Color & Media: Using the client logo as a base I created a color pallet that played upon the traditional colors associated with birth, blues and pinks. With the intent to disarm and sooth I muted the base colors, introduced a rustic red and added a grounding tan color. I carried this pallet through the site by incorporating it into the visual design of section elements, illustrations, and photography treatments. My imagery choices were fueled by an awareness that my client wished to convey a modern version of motherhood and did not exclude black and brown people. For the home page I went with media that matched this narrative and held the illustrations for services only. Since illustrations are usually associated with children and illustration I saw this as a great way to convey services and rope in the modernization of motherhood.
  • Typography & Icons: The display serif for headings was chosen because it commanded attention without being too feminine or masculine. The weight of the heading also paired well with the rustic red to call attention to key messaging. Lined icons were used sparingly to add another layer of communication for service offerings.
  • Copy Direction: I collaborated with a UX copywriter for this project and guided her to utilize phrases that sent messages of encouragement, comfort and support. I directed the copywriter to lean into Innergy Birth Services can alleviate user fears and concerns.
  • Wireframes: Utilized to help plan main pages and the "mega" navigation as well as to gain stakeholder feedback. I then built a Low-Code Prototype in Webflow and began further tweaking the design from there which ultimately became the base for the final build.
  • Method(s): Brainstorming, Mood boarding, Media & Typography Sourcing, Sketching, Wire framing, Low-Code Prototyping
mood board
Style Guide
Media & Copy Direction
Sketches & Wireframes
design

setting
the tone

mood board
Style Guide
Media & Copy Direction

In a time where the potential complications of birthing can trigger emotions of fear, anxiety, and uncertainty, I aimed to create a warm, welcoming, and inclusive experience to disarm users and send a message of encouragement and support.

  • Color & Media: Using the client logo as a base I created a color pallet that played upon the traditional colors associated with birth, blues and pinks. With the intent to disarm and sooth I muted the base colors, introduced a rustic red and added a grounding tan color. I carried this pallet through the site by incorporating it into the visual design of section elements, illustrations, and photography treatments. My imagery choices were fueled by an awareness that my client wished to convey a modern version of motherhood and did not exclude black and brown people. For the home page I went with media that matched this narrative and held the illustrations for services only. Since illustrations are usually associated with children and illustration I saw this as a great way to convey services and rope in the modernization of motherhood.
  • Typography & Icons: The display serif for headings was chosen because it commanded attention without being too feminine or masculine. The weight of the heading also paired well with the rustic red to call attention to key messaging. Lined icons were used sparingly to add another layer of communication for service offerings.
  • Copy Direction: I collaborated with a UX copywriter for this project and guided her to utilize phrases that sent messages of encouragement, comfort and support. I directed the copywriter to lean into Innergy Birth Services can alleviate user fears and concerns.
  • Wireframes: Utilized to help plan main pages and the "mega" navigation as well as to gain stakeholder feedback. I then built a Low-Code Prototype in Webflow and began further tweaking the design from there which ultimately became the base for the final build.
  • Method(s): Brainstorming, Mood boarding, Media & Typography Sourcing, Sketching, Wire framing, Low-Code Prototyping
Sketches & Wireframes
develop

buidling
the solution

Build Priorities:

  • Effectively funnel target audiences by implementing CTA's throughout pages
  • Demystify Doulas while conveying the Innergy Birth Services brand via a Unique/Modern Design
  • Utilize media to convey a modern and inclusive depiction of motherhood
  • Use H1's to convey emotion and body copy to promote action
  • 3 Seconds or Less page load time
  • Prioritize Common Breakpoints & Fluidity in between
  • Implement FAQ Section, Newsletter Sign Up, Inquiry Form, and Social Media Integrations

Build Result: A responsive & user-ready Webflow website that resulted in a broader understanding of doulas amongst prospects, an overflow of service requests, and solidification of retainer clients.

Build Method:  Hatch Utility Framework

THE FINAL RESULT
behind the build
reflect

would I do
it all again?

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)
stakeholder feedback
develop

buidling
the solution

THE FINAL RESULT

Build Priorities:

  • Effectively funnel target audiences by implementing CTA's throughout pages
  • Demystify Doulas while conveying the Innergy Birth Services brand via a Unique/Modern Design
  • Utilize media to convey a modern and inclusive depiction of motherhood
  • Use H1's to convey emotion and body copy to promote action
  • 3 Seconds or Less page load time
  • Prioritize Common Breakpoints & Fluidity in between
  • Implement FAQ Section, Newsletter Sign Up, Inquiry Form, and Social Media Integrations

Build Result: A responsive & user-ready Webflow website that resulted in a broader understanding of doulas amongst prospects, an overflow of service requests, and solidification of retainer clients.

Build Method:  Hatch Utility Framework

behind the build
reflect

would I do
it all again?

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)
stakeholder feedback
design & develop

Process Highlights

Build Priorities:

  • Effectively funnel target audiences by implementing CTA's throughout pages
  • Demystify Doulas while conveying the Innergy Birth Services brand via a Unique/Modern Design
  • Utilize media to convey a modern and inclusive depiction of motherhood
  • Use H1's to convey emotion and body copy to promote action
  • 3 Seconds or Less page load time
  • Prioritize Common Breakpoints & Fluidity in between
  • Implement FAQ Section, Newsletter Sign Up, Inquiry Form, and Social Media Integrations

Build Result: A responsive & user-ready Webflow website that resulted in a broader understanding of doulas amongst prospects, an overflow of service requests, and solidification of retainer clients.

Build Method:  Hatch Utility Framework

process video
THE FINAL RESULT
reflect

would I do
it all again?

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)

With this being my third doula project I wanted to make sure it stood out from the others and served a functional purpose for users. I challenged myself to think of ways to present this website in a way that didn't feel like every other doula website out. This project allowed me to play with illustrations more than I had in past projects and to further refine my collaboration process.

What I would've done differently:

  • Extensive User Research & Usability Testing
  • Cleaner wire framing process, better adherence to the 12 column grid pre-development

Future Plans:

  • Reposition copy and offerings as client has expanded into an additional servicing area
  • Education & Resources section (Client was unable to produce content in time for initial build)
  • E-Commerce store (Client was unable to finalize products in time for initial build)
stakeholder feedback
next Case study

RTG Events

explore