Project
  • UX
Design Tools
Deliverables
  • Research
  • Competitive & Landscape Audit
  • Information Architecture
  • Wireframes
  • Prototypes

A Disconnected Digital Experience

COSI, a visionary leader in their field, was at a critical point in their business. Their digital presence, built from a patchwork of older technologies, was no longer meeting their core business needs.

The primary challenges were a lack of customer retention and an experience that failed to support their customers’ educational journey. The existing technology was not scalable for modern commerce, creating a clear strategic gap between their business goals and their customers’ needs.

Circle of Security International website homepage featuring a banner about community programs in Connecticut, navigation links for parents, professionals, learning, and directory resources, and highlights of the recent client profile redesign.

A Human-Centered Transformation

Our solution was to move beyond a simple replatform and instead craft an entirely new website experience, with intuitive UX/UI on a new Shopify platform. The objective was to deliver a design that not only looks great but also drives measurable business growth.

We performed a Competitive & Landscape Audit to understand the market and identify opportunities, as shown in our analysis of direct and indirect competitors.

A spreadsheet with four competitors listed, including URLs, purpose, year founded, revenue streams, and notes on client profile redesign in columns.

The Process

We executed a phased, collaborative approach to ensure the final product was both beautiful and highly functional.

 

A flowchart titled "Client Mapping" illustrates client onboarding phases, service provider roles, and task lists, with color-coded sticky notes summarizing key actions and considerations for seamless client profile redesign.

Step 1: Discovery & Research

  • Stakeholder Alignment: We began by engaging with COSI stakeholders to capture their vision and challenges, ensuring a shared understanding of what’s truly possible for their brand.
  • Competitive Analysis: We conducted an in-depth analysis to identify opportunities for innovation and differentiation, moving beyond trends to create an enduring solution.
  • User Journeys: We mapped user journeys and created personas to inform our design strategy, ensuring the solution was truly human-centered. This client mapping and user flow helped us understand the specific needs of parents, facilitators, and agencies, as shown in our early diagrams.

Step 2: Strategic Design

  • Information Architecture: We developed a comprehensive sitemap to create a logical content structure and enhance navigability. This included a review of the current sitemap and a plan for how key pages like the login, registration, and course lists would be restructured.
  • Wireframing: We created low-fidelity wireframes that focused on user flow and interaction, laying the groundwork for a seamless experience. This step was crucial in simplifying complex user journeys into clear, intuitive experiences. Our responsive design approach ensured the website would be fully functional and visually appealing on desktop, tablet, and mobile devices.
A dark-themed website sitemap featuring labeled boxes for sections like Header, Navigation, Facilitator Login, Your Order, Your Courses, Parents, and a client profile redesign in Resources for Parents.
A woman hugs a smiling young child; nearby, photos show hands holding, a group reaching up, and another child’s hands—visuals reflecting support, connection, and the warmth at the heart of every client profile redesign.

Step 3: Creative Excellence

  • High-Fidelity Mockups & Prototyping: Our creative resource, Hugo Broche,  breathed life into the wireframes, developing high-fidelity composites and interactive prototypes to simulate real user interactions and refine the visual design with brand-relevant color, imagery, and style. The final designs showcase a modernized, brand-aligned interface.
  • Web Style Guide: We developed a comprehensive style guide to ensure visual consistency and provide a clear handoff to the development team.
Homepage of Circle of Security International featuring the text "Building Attachment Around the World," a cartoon of an adult hugging a child, photos of caregivers with children, and highlights from their recent client profile redesign.

A flowchart showing screens for facilitator login, user registration, and a redesigned client profile within the account dashboard on the Circle of Security platform, complete with labeled navigation arrows.

Screenshot showing a navigation menu for "Practitioners" with a dropdown list and a flowchart outlining the navigation structure, assignment process for practitioners, and elements of the client profile redesign.

Wireframe showing a modal form titled "Add Attendee(s) to All Attendees" with fields for attendee details, reflecting the client profile redesign on both mobile and desktop screens.
Wireframe of a website homepage displayed on three devices—mobile, tablet, and desktop—showcasing layout variations for intervention program content and client profile redesign.
Side-by-side layouts of a course webpage on mobile and desktop screens, both featuring a client profile redesign with a white book, course title, details, and map section.
A flowchart showing screens for facilitator login, user registration, and a redesigned client profile within the account dashboard on the Circle of Security platform, complete with labeled navigation arrows.

Driving Measurable Results

The outcome of this engagement was a series of wireframes and high-fidelity designs, along with detailed documentation, which provided the foundation for the final build-out.

The client’s feedback was overwhelmingly positive, confirming that our strategic UX design and enhanced interface significantly improved user engagement metrics and overall customer satisfaction.

Screenshot of the Circle of Security International website showing a client profile redesign alongside three training options: Foundation for Beginners, Growth for Intermediate, and Specialisation for Advanced.

Client

“Your vision and creative spirit have been brought to life.”

Summary

This project is a powerful example of how a strategic partnership, combined with a human-centered design process, can transform a digital presence and drive business success.

It’s a testament to our belief that design should not just look good, but should also solve real business problems and contribute to long-term growth and success.