Emancipate-Her
Cultivating a blog that gives a voice to women embracing their freedom.
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.
1 Designer, 1 Copywriter
2021
8 Weeks
Figma
Webflow
SEMrush/G.A.
Figjam/Miro
Typeform
Web Development
Visual Design
Consulting
Project Management
Cultivating a blog that gives a voice to women embracing their freedom.
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.
1 Designer, 1 Copywriter
2021
8 Weeks
Webflow
SEMrush/G.A.
Figjam/Miro
Typeform
Visual Design
Consulting
Project Mgmt
Client Mgmt
understandinG the challenge
gathering
insights
understanding
stakeholders
setting
the tone
buidling
the solution
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
would I do
it all again?
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.
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.
Process Highlights
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
would I do
it all again?
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.
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.
