Explore

Mini Case Studies

Table

Table

Name

Summary

Process Highlights

Would I do it all again?

F.E.W.

Filling Empty Wombs is a nonprofit organization headquartered in Plantation, FL, that educates and empowers individuals impacted by infertility through grants, scholarships, and community support.

I developed a sales page to enable this new organization to build rapport, garner support from donors, and establish its inaugural ambassador program.

My approach to this project resulted in a responsive and user-ready Webflow sales page that increased donor flow and ambassador sign-ups.

Project Consideration(s):

An expedited delivery time was requested for this project, meaning there wasn’t much give or desire from the stakeholder for interviewing or testing. I was granted one session with the stakeholder and provided with an organization powerpoint to use as the information and branding base.

Design Decisions:

Color & Media: The stakeholder wished for yellow to be the primary color for the sales page and to see alternative imagery choices, as infertility traditionally is paired with dark colors and depressing imagery. To properly execute this ask, I needed to create a visual balance, as yellow tends to be a tedious color to use in design. To do so, I utilized a mix of gradients, accents, text treatments, and selective use of their brand blue to draw the users eye to pertinent information throughout the design. To depict infertility in a modern manner visually, I sourced stock photography of women that sent messages of strength, power, and support. Finally, I utilized stock video to trigger emotions around family and children where users were encouraged to donate.

Typography & Icon: I chose a heading typeface that complemented the brands logo and played well with the desired text treatments. Stylistically this modern typeface helped amplify the message of strength and resilience without sacrificing softness. I paired it with a sans typeface that could, visually, hold its own weight and not overpower the heading typeface. In regard to icons, I chose a lined style and used Lottie animations to help bring them to life, to entertain and delight while also conveying key messages.

Web Copy Direction: I directed the

UX Copywriter

⁠

for this project to focus on phrases that conveyed impact, support, and empowerment. I also wanted to ensure that the copy was not only SEO friendly, but concise and digestible to clearly communicate the work done by the client and reduce the cognitive load of anyone coming to gather information or deceide on whether to donate or be involved.

Wireframes & Prototypes: I began with Lo-Fidelity wireframes to communicate the page structure to the client. I Identified five key sections based off the original communication of stakeholder and user needs. There were two more iterations to better hone in on content, ui, and functionality. I then built a Low-Code Prototype in Webflow and began further tweaking the design, which ultimately became the base for the final build.

Key Methods:

Stakeholder Interview, Brainstorming, Sketching, Wire Framing, Low-Code Prototyping, Hatch Utility Framework

Build Priorities:

Effectively funnel target audiences by implementing CTA's throughout sales page

Decrease friction to donation and information sourcing

Utilize media to convey a modern and inclusive depiction of infertility

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.

I enjoyed the challenge of representing infertility in a modern way that was not dehumanizing while experimenting with Lottie files and native Webflow animations to create micro-interactions.

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

Utilized tools like usability and A/B testing to further advocate for expanding the brand color palette, as the excessive use of Yellow and low contrast is something I would have liked to avoid.

Future Plans:

Transform the current build from a sales page to a website

Expand the color palette for a better contrast ratio

Iterate website development to Improve the overall WCAG score

Investing Accelerator

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.

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.

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.

GSA

Good Steward Active is an elevated athleisure brand for those who prioritize comfort but want to make a statement.

I crafted a series of one-page and multi-page website rollouts to determine demand and streamline the user purchase path.

My approach to this project led to continued product launches and rollouts and a Shopify migration to better support demand.

Project Consideration(s):

This project consisted of various roll outs with different designs and products and ultimately ended in a final design that was converted from a live Webflow prototype to a Shopify Website. The project is currently under complete ownership of the stakeholder.

Design Decisions:

Color & Media: The stakeholder wished to prioritize their own photography for this project and to stick to their color palette of black and white. I was able to get approval from the stakeholder to incorporate gray into the design for more dimension. The desire was to keep the color muted to amplify the product photography.

Typography & Icons: Because simplicity was a priority I selected one typeface to use throughout the project. I leaned on the font varieties within the typeface to create variety and dimension within the type. When icons were ultimately included in the design, I chose clean lined icons to add a layer of personality to the overall design.

Web Copy Direction: I collaborated with a

UX Copywriter

⁠

for this project on the site copy as well as the product titles and descriptions. I directed them to focus on messages of simplicity, effortlessness, and comfort while also taking liberties to be playful with the messaging where appropriate.

Wireframes & Prototypes: I began wire framing a few mid-fidelity options for a one page shopping experience with the goal being to tease new products and push users to purchase by eliminating all other use options. Once the winning design was chosen I then built a Low-Code Prototype in Webflow which ultimately became the base for the final build fort that round. We then iterated again for the stakeholders next launch keeping the one page shopping experience and doing a staggering roll out of a new page that would allow users to temporarily shop a prior product launch they missed. This continued on and informed category, layout, and content choices for the next two design rounds. The focus for these rounds were to see how best to showcase categories on the home page and mega navigation and to decide on whether or not to have a permanent prior collection flash sale page. These rounds lead to the final design which then was converted from a live Webflow prototype to a Shopify Template and ultimately live site.

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

This project was, by far, one of the most complex projects I’ve completed. Luckily I never shy away from a challenge. From the various iterations and short turnaround times to ultimately needing to convert the Webflow website to a Shopify template, of which I had no experience whatsoever, this project proved to be one born of self-learning and resilience.

Future Plans:

This website is currently under the ownership and maintenance of the stakeholder.

Emancipate-Her

Emancipate-Her is a personal blog created by Erin Janelle dedicated to the emancipation of women. Erin needed an online home for her blog that captured her personality, goals, and intentions.

My approach to this project led to a unique boutique-style responsive and user-ready Webflow blog with steady traffic and subscriptions.

Design Decisions:

Color & Media: Because Emancipate-Her was a new concept, the stakeholder did not have any pre-created branding materials. I received two rounds of photography to use as a base for design direction. Using tools like

Adobe Color

⁠

, Illustrator, and Procreate, I created a color palette from the second round of photography and abstract background illustrations to complement the photography and color palette choices. The overall visual tone for this project was light, airy, and fun.

Typography & Icon: Since color, media, illustrations, and animations were going to be used to bring delight, air, and fun to the project, the role of typography in the project became solely to communicate information. I chose one base sans typeface and used it for the headings and body text throughout the site.

Web Copy Direction: The stakeholder produced all copy for the project and wrote from their voice. I then used layout and treatments to amplify that voice.

Wireframes & Prototypes: There were four revisions of wireframes for this project. The initial wireframes were based on the first photo shoot and built in Adobe XD. The stakeholder then wished to take a different design direction informed by the second photo shoot. I pivoted to create new wireframes within the newly established look and feel and switched to Figma for better collaboration with 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 Website page

Decrease friction to consumption of blog content

3 Seconds or Less page load time

Prioritize Common Breakpoints & Fluidity in between

Implement social media and mail sign-up integration

This project was my first ever rodeo with CMS’ and blog functionalities in Webflow as well as Webflow animations. I thoroughly enjoyed the challenge as well as the creative freedom given to me by the client.

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

Expanded blog page structure

Refined the interior blog page structure

Usability Testing

Future Plans:

Now that the client has a few blogs up, and more on the way, I have permission to iterate the blog page and interior pages.

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.