Bella Tuo


UIUX
Identity Design
Editorial Design
Workshops
More Works
Posters
Thesis

About Me
Free Downloads





©2025 Bella Tuo

UIUX → The Center for Young Colorful Minds (CYCM)




Client


Boston Medical Center

Responsibilities


Brand identity design
Logo development
Web design and layout
Information architecture
User testing with teens

Tools


Figma
Adobe Illustrator
Adobe Photoshop
HTML

Duration


10 Months

AboutCYCM is Boston Medical Center’s digital mental health platform designed to offer honest, relatable support for teens navigating life’s challenges. I led the brand identity and web design, creating a cohesive visual system that balances warmth, inclusivity, and clarity. From the logo and color palette to custom icons and page layouts, every element was crafted to feel approachable, calming, and youth-centered. The visual direction combines soft, vibrant tones with clean structure—making the content both inviting and easy to navigate.

To ensure the platform resonated with its audience, we presented and tested the design with teens at a local youth center, gathering valuable feedback that directly informed the final launch.



Design OverviewThe original CYCM website was created by a team of researchers and scholars at Boston Medical Center, with a focus on content rather than design. The original CYCM website lacked a user-centered design approach, resulting in low engagement and poor usability for its teen audience. I redesigned the visual system and interface to improve clarity, accessibility, and emotional resonance for teens.


        PROBLEMS

    • Pages were dense, unstructured, and hard to navigate
    • Inconsistent use of color and typography
    • No icons or illustrations to support engagement
    • Overall experience felt static and not teen-friendly
        SOLUTIONS

    • Built a cohesive, youth-centered design system
    • Introduced a soft, vibrant color palette 
    • Designed custom icons and illustrations to guide users
    • Restructured layouts for better hierarchy and readability


    #1 Homepage Redesign: Structuring for Clarity and Ease of Navigation
                                     



    #2 Illustrated Infographics: Making Mental Health Data More Relatable
                                       



    #3 User-Friendly Access: Audio Features & Simplified Navigation




    ResearchTo ensure the redesign was rooted in purpose, I began by understanding CYCM’s mission, audience, and existing challenges.



    TARGET USERS

    CYCM’s primary audience includes teens and young adults, particularly those from historically underserved communities. The platform supports users who may be navigating emotional stress, identity struggles, or mental health challenges—and who are looking for resources that feel relevant, welcoming, and trustworthy.



    INTERVIEWS

    These conversations revealed a key tension: while the content was clinically sound, the original site lacked warmth, clarity, and emotional resonance—especially for teen audience.



    DESIGN CHALLENGE

    The original CYCM site felt clinical and static, with dense content, unclear navigation, and no visual or accessible features—making it difficult for teens to engage meaningfully.





    Understand & Organize

    INFORMATION ARCHITECTURE

    To simplify navigation and improve clarity, I reorganized CYCM’s site structure to better reflect how teens search for support. The new information architecture emphasizes emotional clarity, faster access to help, and reduced cognitive load.




    Design ProcessTo ensure the redesign was rooted in purpose, I began by understanding CYCM’s mission, audience, and existing challenges.


    ITERATIONS

    Over the course of the project, I developed 10+ versions of prototypes, 5 different color themes and conducted weekly meetings to ensure the platform remained engaging, and aligned with user needs.

    Clients pointed out, ‘Teens need to feel invited in, not just impressed.’ So we explored a palette that balances energy and approachability. Red, orange, and pink struck that balance—playful, bright, and emotionally warm without leaning too far into one identity.




    BRAND IDENTITY

    To create a more approachable and cohesive experience for CYCM’s teen audience, we shifted the visual direction toward a warm, inviting color palette. I led the redesign of the logo, focusing on playfulness and clarity. The original logo was overly saturated, difficult to read, and lacked visual harmony. Our goal was to craft something minimalist yet expressive—something that feels like a smile when you first land on the site.  Check out one of my proposal slides



    Illustrations

    I proposed creating a set of custom CYCM characters to make the site feel more friendly, playful, and engaging for teen users.





    Final Design
    Home Page




    About Us
    Our Feed
    Resources
    Contact



     

    User TestingWe conducted in-person user testing at the Boys & Girls Clubs of Boston, where teens interacted with the CYCM website and shared overwhelmingly positive feedback.



    User Testing

    Participated teenagers described the experience as “fun and playful,” praised the “information and article [as] very inclusive and clear,” and noted it was “easy to navigate for help”—offering both affirmation and inspiration for future improvements like adding homepage videos and more interactive features.



    Reflection     As the lead designer of this project, I had the opportunity to explore a wide range of design directions—from logo proposals to interactive features that made the platform more engaging and accessible. Through continuous iteration and collaboration, we shaped a website that not only looks visually cohesive but also serves as a trusted, youth-centered resource. I believe good web design goes beyond aesthetics; it should invite users in, guide them with clarity, and offer real value. It was incredibly rewarding to see teens respond with excitement and ease while using the site. Knowing that the platform resonates with them and provides meaningful support to the community made this project especially fulfilling.