I came into APFM as the first person on the product team. I built and hired the team of UX/UI and research. As this was a new team I was helping to build we wanted to craft a team vision statement that allowed us all to align under a single mission.
design thinking
To begin this large project, my team developed segmented personas , defined user journeys, and conducted user studies to help identify where the current sites were missing the mark. We wanted to understand what our users were thinking at the various steps along a very emotional journey. As part of that understanding, we made use of a design canvas that forced us to define the problem, the direction to solve the problem, and how to evaluate success.
User Journeys & Personas
Understanding the user and their journey are key factors that help facilitate better design thinking. When we know who we’re designing for, and understand their emotional journey, we can better empathize with where they are, what they want, and then create experiences that align with their expectations.
My team developed segmented personas and journey maps, and conducted user studies to help identify where the current sites were missing the mark. We wanted to understand what our users were thinking at the various steps along a very emotional journey.
Community page Before:
Key Insights & Drivers
The community page is a key page within the site. This is the page that users look at to determine if a specific facility is right for their family. The legacy page had a number of issues that we identified and set out to correct.
No identifiable value prop
No visible CTA
Not mobile friendly
Outdated grid
Community metadata below fold
Confusing phone number placement
Header color contrast tested poorly
Muted tones in brand are outdated
community page after: decisions & impact
Updates
Improved image gallery
Value prop and messaging added and designed as a widget component with image, phone and action oriented CTAs.
Grid across all pages was updated and responsive.
Metadata (SEO content) above the fold satisfying user requests and business requirements.
Updated header for better accessibility
Mobile optimized with “Window Shade” functionality for “always visible” value-prop and CTA.
Results
Increased time on page
Decreased bounce rate
Increased page scroll depth
Increased page interaction
Increased qualified lead form fills
Styleguide & Design Patterns
As we set out to completely update the visual brand treatment, we also defined and created new styleguides and pattern components in order overhaul each site in a consistent way. The component driven library elements allow the design team to move in an agile way, adapt to dev sprints, and keep design ahead of engineering teams ensuring we’re never a blocker.