Webflow Sales Page Project

Investing Accelerator

VISUAL DESIGN - WEB DEVELOPMENT

Creating a sales funnel to help close the investing gap for women.

SUMMARY

The Investing Accelerator Program provides women with the knowledge and tools to make confident investment decisions. I was tasked with creating an online solution to bring awareness to the program and improve the enrollment process for users.

My approach to this project led to a responsive and user-ready Webflow sales page that increased program participation. The stakeholder has now been able to adjust their pricing and offering cadence to accommodate the new enrollment demand.

Team
Opportune Design Co.
1 Designer, 1 Copywriter
timeline

2022
Three Weeks

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

roles
Strategy
Web Development
Visual Design
Consulting
Project Management

Creating a sales funnel to help close the investing gap for women.

SUMMARY

The Investing Accelerator Program provides women with the knowledge and tools to make confident investment decisions. I was tasked with creating an online solution to bring awareness to the program and improve the enrollment process for users.

My approach to this project led to a responsive and user-ready Webflow sales page that increased program participation. The stakeholder has now been able to adjust their pricing and offering cadence to accommodate the new enrollment demand.

Team
Opportune Design Co.
1 Designer, 1 Copywriter
timeline

2022
Three 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

discover

gathering
insights

process video
stakeholder guidance
considerations
design
media
features
discover

understanding
stakeholders

process video
the bottom line
considerations
design
media
features
define

Defining
focus areas

Comparative Audit
project pillars
define

Defining
focus areas

Comparative Audit
project pillars
design

setting
the tone

mood board
Style Guide
Media & Copy Direction
Sketches & Wireframes
design

setting
the tone

mood board
Style Guide
Media & Copy Direction
Sketches & Wireframes
develop

buidling
the solution

Project Consideration(s):

  • An expedited delivery time was requested for this project, as the stakeholder wished to roll out the sales page in time to promote the launch. Due to time constraints, I had to forgo the surveying and testing I planned to do. 

Design Decisions:

  • Color & Media: The original brand color palette consisted of bold pinks that the stakeholder wanted to honor and utilize throughout the page design. I facilitated conversation around expanding the color palette to include variations of colors usually associated with fintech, which would mean shifting away from the bold pink and towards blue, green, purple, and black. I adjusted the hues and saturation levels of these base colors to create the overall visual mood of the sales page. I combined illustrations with photography of working minority women to play off of the education and aspirational portions of the program. 
  • Typography & Icon: For the heading typeface, I chose a display font that was feminine, modern, and legible, as the target audience for this program was minority middle-aged career women. I paired the display font with an easily scannable sans typeface. My iconography choices were driven by the need to convey complex messages cleanly. I went for icons that were a bit more complex but still had clean lines and were easy to follow and digest the meaning of alone but also when paired with supporting text.
  • Web Copy Direction: I collaborated with a UX Copywriter for this project and directed them to focus on copy and phrases that would calm and disarm users. It's no secret that many people stress over finances and ways to grow their finances. We focused on using headings and supporting copy to ease investing anxiety and highlight how the program would shift the user from uneasiness to confidence.
  • Wireframes & Prototypes: I worked my way up to Mid-Fidelity wireframes and used them to communicate the page structure and design direction to the client. I then built a Low-Code Prototype in Webflow and began further tweaking the layout and design, which ultimately became the base for the final build. 

Key Methods:

  • Stakeholder Interview, Brainstorming, Sketching, Wireframing, Low-Code Prototyping, Hatch Utility Framework

Build Priorities:

  • Effectively funnel target audience by implementing CTA's throughout the sales page
  • Decrease friction to enrollment
  • 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 Donation integration and ambassador Inquiry Form.
THE FINAL RESULT
behind the build
reflect

would I do
it all again?

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.
stakeholder feedback
develop

buidling
the solution

THE FINAL RESULT

Project Consideration(s):

  • An expedited delivery time was requested for this project, as the stakeholder wished to roll out the sales page in time to promote the launch. Due to time constraints, I had to forgo the surveying and testing I planned to do. 

Design Decisions:

  • Color & Media: The original brand color palette consisted of bold pinks that the stakeholder wanted to honor and utilize throughout the page design. I facilitated conversation around expanding the color palette to include variations of colors usually associated with fintech, which would mean shifting away from the bold pink and towards blue, green, purple, and black. I adjusted the hues and saturation levels of these base colors to create the overall visual mood of the sales page. I combined illustrations with photography of working minority women to play off of the education and aspirational portions of the program. 
  • Typography & Icon: For the heading typeface, I chose a display font that was feminine, modern, and legible, as the target audience for this program was minority middle-aged career women. I paired the display font with an easily scannable sans typeface. My iconography choices were driven by the need to convey complex messages cleanly. I went for icons that were a bit more complex but still had clean lines and were easy to follow and digest the meaning of alone but also when paired with supporting text.
  • Web Copy Direction: I collaborated with a UX Copywriter for this project and directed them to focus on copy and phrases that would calm and disarm users. It's no secret that many people stress over finances and ways to grow their finances. We focused on using headings and supporting copy to ease investing anxiety and highlight how the program would shift the user from uneasiness to confidence.
  • Wireframes & Prototypes: I worked my way up to Mid-Fidelity wireframes and used them to communicate the page structure and design direction to the client. I then built a Low-Code Prototype in Webflow and began further tweaking the layout and design, which ultimately became the base for the final build. 

Key Methods:

  • Stakeholder Interview, Brainstorming, Sketching, Wireframing, Low-Code Prototyping, Hatch Utility Framework

Build Priorities:

  • Effectively funnel target audience by implementing CTA's throughout the sales page
  • Decrease friction to enrollment
  • 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 Donation integration and ambassador Inquiry Form.
behind the build
reflect

would I do
it all again?

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.
stakeholder feedback
design & develop

Process Highlights

Project Consideration(s):

  • An expedited delivery time was requested for this project, as the stakeholder wished to roll out the sales page in time to promote the launch. Due to time constraints, I had to forgo the surveying and testing I planned to do. 

Design Decisions:

  • Color & Media: The original brand color palette consisted of bold pinks that the stakeholder wanted to honor and utilize throughout the page design. I facilitated conversation around expanding the color palette to include variations of colors usually associated with fintech, which would mean shifting away from the bold pink and towards blue, green, purple, and black. I adjusted the hues and saturation levels of these base colors to create the overall visual mood of the sales page. I combined illustrations with photography of working minority women to play off of the education and aspirational portions of the program. 
  • Typography & Icon: For the heading typeface, I chose a display font that was feminine, modern, and legible, as the target audience for this program was minority middle-aged career women. I paired the display font with an easily scannable sans typeface. My iconography choices were driven by the need to convey complex messages cleanly. I went for icons that were a bit more complex but still had clean lines and were easy to follow and digest the meaning of alone but also when paired with supporting text.
  • Web Copy Direction: I collaborated with a UX Copywriter for this project and directed them to focus on copy and phrases that would calm and disarm users. It's no secret that many people stress over finances and ways to grow their finances. We focused on using headings and supporting copy to ease investing anxiety and highlight how the program would shift the user from uneasiness to confidence.
  • Wireframes & Prototypes: I worked my way up to Mid-Fidelity wireframes and used them to communicate the page structure and design direction to the client. I then built a Low-Code Prototype in Webflow and began further tweaking the layout and design, which ultimately became the base for the final build. 

Key Methods:

  • Stakeholder Interview, Brainstorming, Sketching, Wireframing, Low-Code Prototyping, Hatch Utility Framework

Build Priorities:

  • Effectively funnel target audience by implementing CTA's throughout the sales page
  • Decrease friction to enrollment
  • 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 Donation integration and ambassador Inquiry Form.
process video
THE FINAL RESULT
reflect

would I do
it all again?

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.

Even though this was a “simple” sales page build, there were still challenges. I enjoyed experimenting with Javascript and Web flow native animations and continued troubleshooting until I was happy with the last iteration before launch.


However, if the timeline allowed, this is what I would have done differently:

  • Redesigned navigation
  • Redesigned the “client testimonial” graphics (stakeholder provided)
  • Advocated for more video reviews
  • Usability Testing

Future Plans:

  • Bring enrollment checkout in-house once the parent site redesign is complete - case study coming soon.
  • Redesign testimonial, topic overview, and tool overview sections.
stakeholder feedback
next Case study

Good Steward Active

explore