We Are Open Circle
4 month end-to-end UX Research, Design, Testing & Front-end implementation
Website re-design for Organizational Development company. Special focus on Information Architecture and UX Copywriting.
Tools used: Figma, Miro, Invision, Illustrator, Photoshop, Lightroom, Premiere, Zoom, Hotjar, SquareSpace
Problem
Unclear messaging, inconsistent read patterns, lack of CTA
Hypothesis
If we create more user-friendly content chunking, it will solve the 60% drop off rate
Solution
Connect with user by focusing on their problems,
instead of leading with marketing slogans
Success Metrics
-Bounce rate ↓ from 67% to 51%
-Page views ↑ 7%
-Search traffic ↑ 325%
Issues from Audit:
OLD Homepage
click for video preview
Confusing messaging- unclear what service is provided
Inconsistent Hierarchy- text body & image cards not uniform
Unclear Task Flow- users aren’t funneled in any particular direction
No proof of demand- clients page is just logos
Text heavy- Scrolls past fold, no clear F or Z read pattern
Lacking hooks of engagement- no videos or ways to interact with offerings
OLD Product Description Pages
Continuity & Closure issues
No consistent text & image cards
Text Heavy
no clear read pattern
Overall, the site was Feasible✓ Viable✓ Usable✗
User Research, swot analysis, data
click to listen to user test
“…maybe that’s some of my hesitancy… I need a sure thing and something that works with the schedules. Something sure, tested, reputable, working.”
User Tests- 6 persons via Zoom
I gave consistent tasks such as “find a page/link that you feel describes what this company does.
One that you could forward on to a colleague”
80% of users failed this task.
I kept this task consistent through the end, so that I could have consistent data points/metrics to fall back on.
recorded user sessions on Hotjar
Tested users both familiar and new to stakeholder’s program
(aligned with Proto-Persona).
Helped me understand how user Thinks, Says, Does and Feels.
Hidden motivations behind users that aren’t vocalized/shared.
Dealing with DE&I initiatives, curious/hesitant how WAOC actually works, what the commitment, cost and scheduling looks like. Helped me understand competitor analysis, and user motivations (Gain Creators, Pain Relievers)
Through continued Hotjar user recordings, I also started noticing that we may have an issue with the site’s signifiers- I was seeing a lot of recordings where users clicked on Bold text or images that were NOT clickable links.
User Focused Hypothesis:
Workers today need a framework for having conversations within organization,
but we have observed that many fear a backlash for sharing negative feedback,
or are intimidated by company's "just push through" norm of operating
User Insight:
People working in teams are often partially or fully digital, this creates barriers to communicating with existing teams and managers need help establishing company culture.
Value Proposition:
We Are Open Circle provides modeling of a new framework for conversations. When everyone's talking, and nobody's listening, We Are Open Circle's Beyond Listening program teaches teams how to challenge and work past assumptions.
Card sorting & task flows
Zoe’s Journey Map
Provided the User with highly scannable, basic information at the Awareness stage of conversion, and ways to contact the company for more information with clear + consistent CTA’s.
At Interest- referral programs from past participants, seasonal offers and podcasts accessible.
At Desire we have quickly understandable offerings and easy sign up process, and
at Action we maintain the login portal..
2 plot twists
Stakeholder changed their offerings (eliminated 1 page),
which resulted in a re-working of the card sort and secondary navigation
We also set Task Flows to 2 outcomes- Podcast of Email contact, though in later stages of testing decided to rework these to a software description page & Newsletter signup because they had better click performance
user test spoiler alert
Originally, I wanted to sort the navigation based on “what, how and why” but this failed user testing.
Ended up designing the site to serve as a resource to the busy, stressed out user
design artifacts and iterations
Constraint to remember- I would be implementing designs on Squarespace version 7.0
Traditionally in UX Design, there’s a developer hand-off stage that can involve a bit of back and forth and helpful if the designer knows some basic HTML, Java and React. I knew during contracting that I’d design this end-to-end with Squarespace implementation, so I did have to tweak some of my mid-fi prototypes to be in line with the functionality of the template I intended to use and the 7.0 version of SS.
Process
Sketching- Pen & Paper
Lo-Fi Blockframes- iPad
Mid-Fi Mocks- Figma
Hi-Fi- Squarespace
Iterations- Copy, Feature prioritization & offerings
Handoff- Recorded videos so team could maintain. Referred a marketing manager I thought aligned well
UI Style Guide
Rough outline, keeping Squarespace in mind and merging brand’s marketing documents. Two word calls to action, earth tone colors (HEX codes provided), consistent logo of orange circle.
Logos
We are branding users to recognize the circle, the title case for offerings, miniscule text for parent company of WOC. Stakeholder intends to offer more programs down the line..
I come back to this often
There’s a meme that has the double diamond here as
“make a Miro until your computer catches on fire” → “make a Figma until your computer catches on fire”
and this brought me joy :)
Iterations
Lo Fi
*video consent granted for portfolio on following 3 clips
mid fi
HiFi Iterations
Based on User Test who aligned with updated User Persona: someone in Director/VP position who manages team of 10-40 people remotely.
Final Tweaks
Accessibility and A/B Testing UX Copy
A Success!
User clearly identified demographic, offerings, correctly guessed at software structure and retainer model.
Positively aligned with subconscious messaging “warm, inspirational, left me wanting to know more”
Tour the website below, or visit We Are Open Circle
hi-fidelity mock
Information Architecture Implementations
Reduced Cognitive Load
Incorporated negative space, clearer content chunking, consistent and frequent calls to action and video/audio samples
Gestalt Principles
Re-branded Beyond Listening logo to be similar and consistent to parent company- We Are Open Circle
Hierarchical
People given priority, focus on diversity and quotes of life changing participation
Topic Schemes
Results, Resources, Offerings pages with 2ndary navigation
80% of users completed tasks quicker
Reduced misclicks, successful use of CTA’s
4 weeks following implementation, bounce rate decreased, page views increased and search traffic tripled. Scroll heatmaps also indicate increase from 24-54% of users making it to the bottom home page.
75% of users over the past 30 days made it 3 scrolls on About Page to the founder bios
hotjar recording before
hotjar recording after
You can see users mouse move around less and visit more pages via clicking. Reminder that both of these videos are sped up to 4x actual speed. Also for anyone curious, these were both from new IP addresses (not returning users)
benefit feature desire
Contact me if you want to learn more about my handoff to Marketing/Social Media Manager, a quiz we’re implementing, and further SEO steps I integrated into Squarespace