2023
UX/UI Design | Responsive Website Design
Responsive Web Design
Dev Launchers
responsive redesign of online recruitment flows for global tech nonprofit
ROLE
UX/UI Designer & Researcher on a cross-functional team with 1 PM, 2 UX designers, 4 developers
TOOLS
PROBLEM
Dev Launchers is a global nonprofit that helps volunteer tech professionals upskill through open-source software projects. The organization was suffering from a shortage of volunteers and wasting resources using an inefficient third-party recruitment platform. They needed to redesign its online existing recruitment flow to:
Increase # of visitors entering volunteer funnel
Increase # of volunteer applications
Ensure alignment with the org’s design system and backend specs
SOLUTION
As the UX Designer & Researcher, I was responsible for planning and implementing all phases of the design process — from research to handoff — and aligning my team’s work with the organization’s design and tech specs.
I built component-based, responsive designs to:
provide personalized touch points
align with organization's changing design system
improve visual hierarchy & layout
FINAL DESIGNS
Easily find and apply to a role at Dev Launchers through a personalized and streamlined application funnel.
If a role is unavailable, you can view similar roles or join the “Talent Community” to be notified about matching opportunities.
Discover | HEURISTIC EVALUATION
I identified multiple (major) usability issues using a heuristic evaluation
I started by reviewing the org's personas (tech learners and experts) and identified their primary goal: “I want to build job-relevant tech skills through practical experience on a cross-functional team.”
With this goal in mind, I reviewed the existing webpage for N/N’s usability heuristics and found 3 critical usability issues:
Inconsistent visual language (within webpage/website)
Hidden CTAs
Visual/text clutter
Discover | DIGITAL ANALYSIS
Digital analytics validated site’s negative impact on UX
By reviewing the web page’s performance on Google Analytics and Hotjar, it became clear that there was a huge missed opportunity.
4k+ users directed from paid search ads in the past 3 months
They spent ~10 secs without clicking (0.2% click rate)
Then they dropped, and never returned…(71% bounce rate, 0 applications)
These findings validated my budding hypothesis: The on-site experience was confusing. Visitors didn't know what to do, or they didn’t find what they were seeking.
Discover | COMPETITIVE SCAN
Competitor websites helped identify top ways to improve clarity & engagement
After validating the website's underperformance, I conducted a brief scan on other recruitment pages. Key takeaways for Dev Launchers:
Tailored search filters —> streamlines
Splash image and header —> illustrates company culture
Clear visual hierarchy —> a no-brainer
Stay in contact opportunities —> translates interest to action
Define | IDEATION
HMW make the signup experience more streamlined and personalized?
Make the first filter more impactful
Visualize the culture
Personalize w/ sign in & save
Develop | USER FLOWS & WIREFRAMING
Our initial sketches included a role “funnel” & email sign-in to personalize the experience
Design | HIGH-FIDELITY USABILITY TESTING
Over 3 rounds of usability tests, we refined the visual language and features to achieve a 100% task completion rate
Test 1: Are there any critical errors or confusions?
Test 2: How can we improve visual language & personalization?
Test 3 (A/B Test): Do users prefer to get a heads up about signing in to apply?
Top Changes:
Simplified search “funnel”
Updated landing with a full-spread image
Updated Sign In to automatically link to Google Sign In
Kept the preferred heads-up option
Introduced “Dev Launchers Talent Community” feature to notify users about new roles
Reflection | CHALLENGES
I handled unexpected resourcing & org challenges by being proactive
Challenge 1: Redundant work due to limited onboarding and disorganized artifacts.
—> Solution: Set up calls with senior org members to figure out org processes & best practices. Guided fellow teammates through tools, processes, etc
Challenge 2: Mixup in roles due to Product Lead + 4 developers leaving in first 3 months, new Jr. UXD introduced halfway in.
—> Solution: Consolidated knowledge by creating clear versioning and file organization, coached new designer and had her “shadow” research interviews.
Challenge 3: Major changes to the org’s design system every month, disrupting designs.
—> Solution: Guided fellow designers in transitioning to new design system and designing for responsive breakpoints. Simplified design updates with components, Auto Layout, and design system.
Challenge 4: Delays in development due to team members leaving and outdated Storybook components.
—> Solution: Worked closely with new devs to explain design decisions and learned CSS/HTML to design with front-end in mind.
Outcomes & Next Steps
INTERACT WITH THE FINAL PROTOTYPE
