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

scroll of a website before re-design

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

Gianna Keiko_WAOC-2.jpg

User Research, swot analysis, data

 
 
user test of a website

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 visitor to website

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.

 
Frame 1.jpg

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

Gianna+Keiko_WAOC-3.jpg
 

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..


 
double diamond

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

 
Frame 1 (1).jpg

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

 
Frame+1+%282%29.jpg