colleaga
site audit.

My role: UX and Visual design
Tools used: Figma, Photoshop

the challenge

Design.local is a non-profit organization that creates opportunities for collaboration between organizations and problem solvers in our UX design community. I worked for Design.local as a volunteer to help other non-profit groups solve their design problems, to work with like minded people in the design community and to help give back to companies who are helping those who are less fortunate.

Colleaga is a non-profit organization that fosters innovation with a network built for the sharing of knowledge and expertise. After connecting inspired professionals, Colleaga supports them in creating innovative solutions to wicked problems in health and social systems.

Over the four week sprint, our team from Design.local worked to improve the Colleaga user experience in preparation for an event launch. During this process, we moved through the signup process and site features in order to assess the user journey, style guide, and copy. We provided the team with feedback using Figma and Google documents, as well as verbally during Zoom meetings.

original Screenshots:

Colleaga original home page
Colleaga original opportunities page

Primary Goals from Briefing

  • To build on and improve the existing unified digital brand experience that simplifies the user experience navigating through zones, programs and tools
  • To review current brand style guide
  • To recommend solutions: minor fixes, major changes

Primary Deliverables from Briefing

  • Current style guide with recommended changes
  • List of minor and major recommended changes
  • Proposal for major changes

Approach

  • Performed end to end flow assessments and audits
  • Frequently looped back to Colleaga to provide feedback and understand context
  • Ideation and design iterations evolved as understanding improved
  • Testing and iteration are in progress; implementation of our recommendations is pending
  • Team made recommendations based on our degree of expertise (design, writing, strategy, etc.)

Approach reflections:

  • A more focused briefing would have accelerated understanding of Colleaga and the scope of the project
  • Clear dates and task deadlines may have allowed for further testing and iteration prior to launch

Minor Changes / Feedback Provided

  • Persona clarity initial feedback 
  • System flow UX breakdowns initial feedback
  • Design colors, accessibility review
  • Style guide refinement 

Design Artifacts - minor changes

  • Introduced a blue palette to convey strength and reliability
  • Styled using with one colour with different hues
  • Colour bars are smaller to save vertical space
  • Buttons have brighter hue so CTA stands out
  • Paragraphs are left aligned and centred for a cleaner look
  • Banners have brighter hues – icons have 20% less “luminance”
  • Body type revised with Lato and Roboto
  • Images show people explaining ideas/concepts
Colleaga Minor change v1
Colleaga minor change v2
Colleaga style guide

Design Artifacts - additional changes

  • Additional colours added to the palate
  • Removed an extra “Join” buttons and changed text to “Learn more”
  • Removed colour bars save some vertical space
  • Added different menu treatments
  • Buttons have brighter hue so CTA stands out
  • Banners have brighter hues – icons have 20% less “Luminance”
  • Other body type suggestions: Nunito and Open Sans
  • Images show people happily collaborating around a table

Insights

Refine personas

Revisit the personas and empathy maps with focus on who the users are outside of Colleaga and what their motivations are.

Create value flows

Document the process of how value is exchanged between Colleaga and each persona during their participation; what is expected and what is gained?

UX improvements

Continue building brand quality and consistency with an expanded and improved style guide; voice, colours, word choice, layout, icons, and so on.

Multi-system flow

Reconsider the use of multiple systems for various user journeys; provide a more coherent engagement experience.

Major Change Recommendations

  • Empathy and persona refinement (focus on motivations/why)
  • Customer journey mapping by main personas
  • Style guide update: add branding and technical documentation elements
  • Value creation flows (individual and network effects)
  • Onboarding, challenges and engagement UX refinement
  • System(s) architecture assessment & recommendations (tools in use, interoperability, interconnection flow, UX impact, utility, etc.)

Impact - how we helped the organization

  • Outside & impartial perspective highlighting narrative and experience blind spots
  • Provided multidisciplinary skill sets to establish insights and deliver actionable recommendations
    • End to end-user journey experience
    • Color contrast accessibility improvement
    • Refined copywriting and streamlined material design
  • Delivered visual and written artifacts
  • Established roadmap for Colleaga to continue to action recommendations

the team

Grantley Creese

Grantley Creese

UX & VISUAL DESIGNER

Brian H.

Brian Haacke

TEAM LEAD

Michelle P.

Michelle Peart

Technical Writer

Fabio F.

Fabio Ferreira

Graphic Designer

Helen C.

Helen Chen

Design & Marketing