ACM Projects Design

ACM Projects Design

Designed engaging and informative cross-platform website pages to boost student sign-ups for the program

Designed engaging and informative cross-platform website pages to boost student sign-ups for the program

Scope

Scope

10 weeks

Team

Team

3 UX Designers
5 Developers

Tools

Tools

Figma

Project Background & Constraints

Project Background & Constraints

ACM projects is a quarterly long project program for students to get exposed to AI, software engineering, and design, and the projects website’s goal is to inform students about the program and its requirements. My task was to design multiple cross-platform website pages to encourage more students to sign up for the program while having an engaging and informative experience.

Designing the ACM projects website was a challenge due to the newly elected Projects VP's revamp of the program which resulted in conflicting wants and needs from our previous stakeholder.

The lack of a clear structural vision from the new VP resulted in our ideas and designs pivoting mid way. I must now develop and conceptualize cohesive designs that align with the evolving needs of the projects program within a constrained timeframe of 10 weeks.

THE PROBLEM

THE PROBLEM

Miscommunication Is Robbing Students of Opportunities and Personal Growth

Miscommunication Is Robbing Students of Opportunities and Personal Growth

Students turn to social media for program info, but short posts don’t provide enough details and valuable information. As a result, students are not fully comprehending the program's goals and initiatives, leading to students feeling frustrated and overwhelmed and seek in other competitors' programs.

ACM projects is a quarterly long project program for students to get exposed to AI, software engineering, and design, and the projects website’s goal is to inform students about the program and its requirements. My task was to design multiple cross-platform website pages to encourage more students to sign up for the program while having an engaging and informative experience.

Designing the ACM projects website was a challenge due to the newly elected Projects VP's revamp of the program which resulted in conflicting wants and needs from our previous stakeholder.

Missing Incentives, Loss of Participants

Students are unclear about which concepts will be applied throughout the program, leading to growing disinterest

Uncertain Timeline Driving Participants Away

25% of students drop out after joining the program upon realizing they can't attend key mandatory events, due to conflicting dates

1) Missing Incentives, Loss of Participants
Students are unclear about which concepts will be applied throughout the program, leading to growing disinterest

2) Uncertain Timeline Driving Participants Away
25% of students drop out after joining the program upon realizing they can't attend key mandatory events, due to conflicting dates

1) Missing Incentives, Loss of Participants
Students are unclear about which concepts will be applied throughout the program, leading to growing disinterest

2) Uncertain Timeline Driving Participants Away
25% of students drop out after joining the program upon realizing they can't attend key mandatory events, due to conflicting dates

DEFINING THE PROBLEM SPACE

DEFINING THE PROBLEM SPACE

Understanding Wants & Needs

Understanding Wants & Needs

Conducted usability testing with 10 students to assess the current website's effectiveness in communicating information and encouraging sign-ups.

Ages 18-21

Limited Knowledge

UCSD Students

Key Voices

New Design Student

"The purpose of projects is to get creative, but the website is quite underwhelming in that aspect. Doesn’t inspire me to apply."

Freshman at UCSD

"It an overwhelming amount of information"

Software Engineer Student

"I wish there were more resources to learn more about these fields, especially if I am unable to be a participant."

0% Application Rate

0% Application Rate

0 out of 10 students would apply to the program after exploring the current website.

Key Reasons

Lack of incentives

Confused about the program's benefits

100% Found The Website To Be Unappealing & Confusing

100% Found The Website To Be Unappealing & Confusing

10 out of 10 students found the website visually unappealing and experienced navigation problems.

Key Reasons

Lack of visual appeal
Poor text hierarchy
Text-heavy

60% Were New To Design, AI, Or Coding

60% Were New To Design, AI, Or Coding

6 out of 10 students stated that they were new to at least one of these fields.

Key Reasons

New students
Trying to learn and break into these fields

Validating Findings With AI

Validating Findings With AI

A sample size of 10 individuals is small, which could result in misleading and non-representative data. We wanted to ensure our findings are accurate and representative and with the help of AI heat maps, we were able to see what elements students were exploring and not viewing. The heat map indicates that dense blocks of text were not viewed, aligning with actual user behavior and our usability tests.

DESIGN IDEATION

DESIGN IDEATION

What Makes Students Apply To Other Programs?

What Makes Students Apply To Other Programs?

When asked how students gain exposure to new projects and technologies, students expressed that they often participate in popular hack and designations. By understanding user preferences and analyzing competitors' strengths and weaknesses, we are able to create strategic design solutions.

ACM Diamond Hacks

Pros

Unique theme

Story telling

Engaging visuals

FAQ section

Cons

Confusing track section

UCLA Designathon

Pros

Minimalistic

Story telling

Clear incentives

FAQ section

Cons

Lack of visuals

Not very engaging

UCR Designation

Pros

Unique theme

Use of animations

Contact section

FAQ section

Engaging

Single flow

Cons

Lengthly for one singular page

WIREFRAMES

WIREFRAMES

Crafting Experiences That Inspire Creativity & Applications

Crafting Experiences That Inspire Creativity & Applications

HIGH-FIDELITY DESIGNS

HIGH-FIDELITY DESIGNS

Inspiring Innovation, Empowering Future Leaders

Inspiring Innovation, Empowering Future Leaders

LANDING PAGE

HOMEPAGE

Story Telling - Building Blocks For Success

Purpose and New Incentives

Our website emphasizes a beginner-friendly, building-block approach, guiding students through the first steps of their tech careers.

Including a "Why" section, showcasing the program's purpose, outlining the benefits students can gain, and highlighting past students' creations provides a comprehensive understanding of the program. This approach not only clarifies its objectives but also inspires potential participants by showcasing tangible outcomes and success stories.

Igniting Potential – Inspiring Future Innovators

Through a vibrant and engaging theme, we aim to spark creativity and inspire students to take the first step in their tech journey.

HOMEPAGE

Story Telling - Building Blocks For Success

Our website emphasizes a beginner-friendly, building-block approach, guiding students through the first steps of their tech careers.

Igniting Potential – Inspiring Future Innovators

Through a vibrant and engaging theme, we aim to spark creativity and inspire students to take the first step in their tech journey.

LANDING PAGE

Purpose and New Incentives

Including a "Why" section, showcasing the program's purpose, outlining the benefits students can gain, and highlighting past students' creations provides a comprehensive understanding of the program. This approach not only clarifies its objectives but also inspires potential participants by showcasing tangible outcomes and success stories.

HOMEPAGE

Purpose and New Incentives

Including a "Why" section to highlight the program's purpose, benefits, and past students' creations clarifies objectives and inspires potential participants by showcasing success stories and tangible outcomes.

RESOURCES PAGE

Empowering Exploration with Simplicity

I designed with simplicity in mind to ensure users can easily find what they're looking for without feeling overwhelmed.

Effortless Resource Discovery

Our filter allows students to find more specific resources based on their desired category.

RESOURCES PAGE

Empowering Exploration with Simplicity

Our website emphasizes a beginner-friendly, building-block approach, guiding students through the first steps of their tech careers.

Effortless Resource Discovery

Our filter allows students to find more specific resources based on their desired category.

ABOUT PAGE

New Students, Meet the Experts

Our new banner encourages students to reach out, build valuable connections, and deepen their interests by engaging with specialized board members.

Connect by Specialization

Our new banner design which is categorized by specialization, enables students to easily locate the contact information for the projects team

RESOURCES PAGE

New Students, Meet the Experts

Our new banner encourages students to reach out, build valuable connections, and deepen their interests by engaging with specialized board members.

Connect by Specialization

Our new banner design which is categorized by specialization, enables students to easily locate the contact information for the projects team

PAST PROJECTS

Discover Impactful Past Projects

Students can get a sense of the exciting projects they could createstudents can get a sense of the exciting projects they could create

PAST PROJECTS

Discover Impactful Past Projects

Students can get a sense of the exciting projects they could create

RESULTS

RESULTS

After Exploring The New Website…

After Exploring The New Website…

100% of the previous users would apply to the program

10 out of 10 participants would join the program driven by clear incentives and a better understanding of the program's purpose.

100% of the previous users would apply to the program

100% of the previous users would apply to the program

10 out of 10 participants would join the program driven by clear incentives and a better understanding of the program's purpose.

My Takeaways

My Takeaways

Stakeholder Collaboration

Stakeholder Collaboration

As a UX/UI designer, I ideated and executed designs that satisfied stakeholder needs and expectations, while collaborating with developers to ensure feasibility. This involved facilitating weekly meetings and maintaining open communication to gather and implement design feedback and satisfaction.

Flexibility

Flexibility

Sudden changes in stakeholders and expectations required me to quickly adapt and ideate and implement new designs, ensuring alignment with evolving needs.

Developer Handoff

Developer Handoff

I ensured all my design elements including frames, components, and variables are all organized and ready for development.

Tying Experiences & Data To Create Solutions

Jenna Bui © 2024

Tying Experiences & Data To Create Solutions

Jenna Bui © 2024

Tying Experiences & Data To Create Solutions

Jenna Bui © 2024