REDEFINING THE LANDING PAGE EXPERIENCE FOR POTENTIAL MEMBERS
DESIGN CHALLENGE
ROLE
UX Designer
DISCIPLINES
UX Research Visual Design
DURATION
5 days [Aug 2023]
TEAM
Solo
OVERVIEW
This redesign case study is a design challenge. The prompt was to "Redesign an existing landing page."
For context, AnitaB is an organization that promotes women, the LGBTQ community, and women-identifying people in tech.
CONTEXT
So, why AnitaB?
AnitaB's mission holds deep personal significance for me, stemming from my upbringing as the child of two immigrant parents. I had the privilege of witnessing firsthand the remarkable tenacity and resilience they displayed in their pursuit of professional success. While not in the tech industry, they both fought against formidable odds to establish themselves in their respective careers.
It's this very belief that propels me to re-design AnitaB's landing page — to create a digital space that reflects the richness of our community and invites others to join this transformative movement.
EVALUATION OF SITE
Understanding AnitaB's status quo
To tackle the re-design, I needed to first get an understanding of where the landing page currently stood. After evaluating the site, I found there were a couple of issues that could be improved.
What do you think this company does?
What influenced your decision?
What’s your overall impression of the site?
ORIGINAL SITE
INSIGHTS
Unclear Messaging
First time users aren’t able to get a true feel for what AnitaB.org stands for.
Inconsistent Branding
The UI design came across directionless and cluttered.
Lack of Content
AnitaB.org has a lot more to offer, but doesn't illustrate that on their page.
USABILITY TEST
Users' hot takes of the site
In order to get some real life impressions of the landing page, I opted to conduct an unmoderated 5 second usability test to understand the page's overall effectiveness with 20 participants.
My goal was to understand: (1) What were users impressions of the site? (2) What did they think AnitaB.org did upon first glance?
INSIGHTS
Uncertainty about Org's Purpose
All but three participants had a clear idea of what AnitaB.org did.
Seeking engaging visuals
Participants felt the visuals felt more generic and wanted something more exciting.
THE PROBLEM
AnitaB.org's landing page has unclear messaging and the design is dated.
COMPETITIVE ANALYSIS
Unpacking the competition
I took some time to learn how other non-profits within the tech realm were attracting their members. I looked at the branding, content organization choices and messaging.
MAIN INSIGHT
All contenders emphasized the importance of storytelling to establish the foundation and purpose of their organization.
Most of these non-profit organization prioritized building connections with prospective members by having them understand why their missions mattered. Outside of that, it was key to communicate what exactly a prospective member would experience if they got involved.
OPPORTUNITY
How might we create a more engaging landing page that effectively communicates AnitaB's mission and offerings?
PROTO-PERSONA
Thinking about prospective members at AnitaB
Using the public data AnitaB has collected over the years about their target audience, I developed a quick proto-persona. It helped to contextualize what exactly these members needs were before approaching the new design.
BRAINSTORMING THE LANDING PAGE REQUIREMENTS
Compiling all my research into actionable insights
I took some time to think about what aspects were missing from the landing page. I was able to get some early sketches in of the landing page and also outline some of the pieces of content I wanted to add to page to: (1) Tell AnitaB.org's narrative. (2) Show why members or partners should get involved.
EXCERPT OF MY NOTES
FROM SKETCH TO WIREFRAMES
Bringing those actionable insights to the design
I began refining the layout as I cycled from low-fidelity to the mid-fidelity stage. By the last mid-fidelity wireframe, I had figured out how I wanted to implement the brand identity into the layout.
LOW TO MID FIDELITY WIREFRAMES
THE FINAL DESIGN
Adding in the "sauce"
Drawing inspiration from their abridged identity guidelines available online, I centered one key element—the "brilliant" mark within their logo. This mark served as a beacon of light in the midst of darkness.
I integrated the geometric facets of AnitaB.org's brand into the landing page, choosing to infuse the background with a radiant glow emblematic of the illuminating force propelling AnitaB.org's endeavors.
FINAL DESIGN
IN RETROSPECT
Staying true to the brand identity
While approaching this redesign, I was on a mission to hold onto the heart and soul of AnitaB while still giving it a fresh, contemporary spin.
Understanding existing design decisions
Instead of completely re-designing the layout, I took the approach of understanding why certain parts of the layout were there.
