Bella Tuo


UIUX
Visual Identity
Editorial Design
Workshops
More Works
Posters
Thesis

About Me
Free Downloads





©2025 Bella Tuo

UIUX → Boston University Procure To Pay




Client


Boston University

Responsibilities


Web Design

Tools


Figma
Wordpress

Duration


3 Months

AboutCYCM is 



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.



    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



    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