ROLE
ROLE
ROLE
UX/UI Designer
UX/UI Designer
DURATION
DURATION
DURATION
Winter 2024
~ 4 months
Winter 2024
~ 4 months
SKILLS / TOOLS
SKILLS / TOOLS
SKILLS / TOOLS
Web Design
Visual Design
Rapid Prototyping
User Experience
Figma
Web Design
Visual Design
Rapid Prototyping
User Experience
Figma
TEAM
TEAM
TEAM
Khadija Dial – Designer
Jasmine Kwon – PM
Cobi Stancik – Designer
Tiffany Yan – Designer
Bell Chen – Engineer
Jason Zhao – Engineer
Khadija Dial – Designer
Jasmine Kwon – PM
Cobi Stancik – Designer
Tiffany Yan – Designer
Bell Chen – Engineer
Jason Zhao – Engineer
CONTEXT
Net Impact UW is a chapter of the global nonprofit that empowers students to create social and environmental change through business practices. The goal of this site redesign and branding was to improve usability, align with the chapter mission, and increase engagement from active and newly recruited members.
Net Impact UW is a chapter of the global nonprofit that empowers students to create social and environmental change through business practices. The goal of this site redesign and branding was to improve usability, align with the chapter mission, and increase engagement from active and newly recruited members.
MY ROLE
As a UX/UI Designer, I was heavily involved in the redesign process from start to finish, which included:
As a UX/UI Designer, I was heavily involved in the redesign process from start to finish, which included:
As a UX/UI Designer, I was heavily involved in the redesign process from start to finish, which included
Meeting with our client bi-weekly to identify pain points and understand their needs and goals for the new site.
Meeting with our client bi-weekly to identify pain points and understand their needs and goals for the new site.
Rapidly developing wireframes and prototypes for the site’s new structure & design.
Rapidly developing wireframes and prototypes for the site’s new structure & design.
Rapidly developing wireframes and prototypes for the site’s new structure & branding.
Collaborating with both design and coding members to align on content updates and branding elements.
Collaborating with both design and coding members to align on content updates and branding elements.
Collaborating with both design and fron-end developers to align on content updates and branding elements.
PROBLEM
Net Impact's existing site lacked a clear structure, making it difficult for members to locate relevant information about events, initiatives, and membership. Additionally, our client expressed how the original design did not accurately reflect the organization's professional, sustainability-focused branding, which impacted its ability to attract new members and partnerships. As we met with our client, the president of the Net Impact chapter, we took note of their key goals and wishes for the site redesign.
Net Impact's existing site lacked a clear structure, making it difficult for members to locate relevant information about events, initiatives, and membership. Additionally, our client expressed how the original design did not accurately reflect the organization's professional, sustainability-focused branding, which impacted its ability to attract new members and partnerships. As we met with our client, the president of the Net Impact chapter, we took note of their key goals and wishes for the site redesign.
Modern and clean design
Modern and clean design
Modern & clean design
Our client strongly expressed their wish to refresh their chapter's branding to feel more contemporary and updated.
Our client strongly expressed their wish to refresh their chapter's branding to feel more contemporary and updated.
Our client strongly expressed their wish to refresh their chapter's branding to feel more contemporary and updated.
Low site maintenance
Low site maintenance
The chapter's executive board changes annually, so we designed the site for low-maintenance updates to ensure smooth role transitions.
The chapter's executive board changes annually, so we designed the site for low-maintenance updates to ensure smooth role transitions.
The chapter's executive board changes annually, so we designed the site for low-maintenance updates to ensure smooth role transitions.
Effective recruiting
Effective recruiting
The chapter wanted to regularly recruit new members throughout the year through their events and site.
The chapter wanted to regularly recruit new members throughout the year through their events and site.
The chapter wanted to regularly recruit new members throughout the year through their events and site.
FINAL REDESIGN
FINAL REDESIGN
FINAL REDESIGN
Information Hub
Information Hub
Information Hub
1
1
Improved visual hierarchy using a bento box layout, making it easy for new and existing members to quickly find key information and ways to get involved.
Improved visual hierarchy using a bento box layout, making it easy for new and existing members to quickly find key information and ways to get involved.
Navigation Bar
Navigation Bar
Navigation Bar
2
2
The navigation bar was redesigned into a hierarchical structure to support scalable content. A clean dropdown system organizes pages clearly, improving user experience.
The navigation bar was redesigned into a hierarchical structure to support scalable content. A clean dropdown system organizes pages clearly, improving user experience.
Past events were consolidated under a single section, highlighting recent events while still providing space for archival content.
Past events were consolidated under a single section, highlighting recent events while still providing space for archival content.
About Page
About Page
About Page
3
3
The original About page was a long, static text block. We improved readability and engagement by breaking it into sections, adding a hero image, enhancing text hierarchy, and applying the chapter’s signature color scheme.
The original About page was a long, static text block. We improved readability and engagement by breaking it into sections, adding a hero image, enhancing text hierarchy, and applying the chapter’s signature color scheme.
The original about page contained a long block of text which felt very static and disengaging. To address this, we broke the text into smaller, visually appealing sections, incorporating a large hero image of the chapter's past meeting, stronger text hierarchy, and their signature color scheme to improve readability and engagement.
The Process
The Process
Site Mapping
Site Mapping
I began with a draft sitemap but realized the chapter’s extensive past events would overwhelm users if placed in a single dropdown, cluttering navigation.
I began with a draft sitemap but realized the chapter’s extensive past events would overwhelm users if placed in a single dropdown, cluttering navigation.
To address this, we consolidated the past events into a dedicated "Past Events" section. This allowed us to emphasize the chapter's recent activities while providing an organized space to archive and update older events.
To address this, we consolidated the past events into a dedicated "Past Events" section. This allowed us to emphasize the chapter's recent activities while providing an organized space to archive and update older events.
To address this, we consolidated the past events into a dedicated "Past Events" section. This allowed us to emphasize the chapter's recent activities while providing an organized space to archive and update older events.
UI Design
UI Design
COLOR — I retained Net Impact’s established green and blue palette for consistency. Ocean Base highlights content cards, buttons, and backgrounds, while Teal Blue emphasizes CTAs and key text. The scheme also reflects the chapter’s sustainability mission.
COLOR — I retained Net Impact’s established green and blue palette for consistency. Ocean Base highlights content cards, buttons, and backgrounds, while Teal Blue emphasizes CTAs and key text. The scheme also reflects the chapter’s sustainability mission.
COLOR — Due to Net Impact being it's own established chapter, we kept the original color scheme of greens and blues to maintain consistency with other chapters. Ocean Base acts as a primary accent color, appearing in content cards, buttons, and subtle background elements. This provides strong emphasis for call-to-action buttons and important text elements. This color scheme additionally aligns with the chapter's mission of sustainability.
TYPOGRAPHY — I chose General Sans as the primary typeface to ensure readability while giving the site a professional yet welcoming feel that appeals to all students.
TYPOGRAPHY — I chose General Sans as the primary typeface to ensure readability while giving the site a professional yet welcoming feel that appeals to all students.
BUTTONS — The original site lacked effective CTAs, so I added clear, strategically placed buttons for key actions like joining, registering, and exploring initiatives. They were visually distinct and aligned with the chapter’s branding to improve user engagement.
BUTTONS — The original site lacked effective CTAs, so I added clear, strategically placed buttons for key actions like joining, registering, and exploring initiatives. They were visually distinct and aligned with the chapter’s branding to improve user engagement.
Visual Pattern
Visual Pattern
Visual Pattern
Color Palette
Color Palette
Color Palette
Redesigned Home Page
Redesigned Home Page
— Centralized design that effectively showcases key information.
— Centralized design that effectively showcases key membership information
Original
Original
Redesign
Redesign
To streamline member recruitment, I integrated the membership sign-up directly on the landing page, eliminating the need to redirect users. The primary goal of the page is to instantly provide prospective members with a clear understanding of the chapter’s core values and ideals.
To streamline member recruitment, I integrated the membership sign-up directly on the landing page, eliminating the need to redirect users. The primary goal of the page is to instantly provide prospective members with a clear understanding of the chapter’s core values and ideals.
Redesigned Events Tab
Redesigned Events Tab
Redesigned Events Tab
— Optimized events tab to scale with the chapter's future
— Optimized events tab to scale with the chapter's future
— Optimized the events tab to scale with the chapter's future
Original Design
Original Design
Redesign
Redesign
Using the bento box grid layout, I effectively centralize key information for members to refer to, ensuring that important details like upcoming events, initiatives, and resources are easily accessible at a glance. This layout not only improves navigation but also provides a clean and organized structure that enhances the overall user experience.
Using the bento box grid layout, I effectively centralize key information for members to refer to, ensuring that important details like upcoming events, initiatives, and resources are easily accessible at a glance. This layout not only improves navigation but also provides a clean and organized structure that enhances the overall user experience.
Using the bento box grid layout, I effectively centralize key information for members to refer to, ensuring that important details like upcoming events, initiatives, and resources are easily accessible at a glance. This layout not only improves navigation but also provides a clean and organized structure that enhances the overall user experience.
Within the Past Events tab, event cards are neatly aligned, each featuring a brief blurb with key details about the event. This organized layout makes it easy for users to browse and revisit the chapter’s previous activities.
Contact Us Page
Contact Us Page
Contact Us Page
— Making it easy for members to stay updated with a simple contact us page
— Making it easy for members to stay updated with a simple contact us page
— Making it easy for members to stay updated with a simple contact us page
A dedicated page for members to easily connect with relevant social network accounts and subscribe to newsletters. This page was intentionally designed simply to simplify the membership recruitment process.
A dedicated page for members to easily connect with relevant social network accounts and subscribe to newsletters. This page was intentionally designed simply to simplify the membership recruitment process.
A dedicated page for members to easily connect with relevant social network accounts and subscribe to newsletters. This page was intentionally designed simply to simplify the membership recruitment process.
Consulting Page
Consulting Page
Consulting Page
— A future chapter initiative for members
— A future chapter initiative for members
— A dedicated page for the chapter's future initiatives
NEXT STEPS
Usability testing with members will guide improvements to functionality, navigation, and design. SEO strategies will boost visibility, while a clear maintenance plan ensures the executive board can easily update content with minimal effort.
Usability testing with members will guide improvements to functionality, navigation, and design. SEO strategies will boost visibility, while a clear maintenance plan ensures the executive board can easily update content with minimal effort.
TAKEAWAYS
Over 11 weeks, client meetings helped us refine the design through iterative feedback. Working within time and resource constraints taught us to adapt, prioritize impactful changes, and communicate clearly to meet the client’s vision. I also collaborated closely with developers for the first time, learning to defend design decisions and support implementation by translating designs into code.
Over 11 weeks, client meetings helped us refine the design through iterative feedback. Working within time and resource constraints taught us to adapt, prioritize impactful changes, and communicate clearly to meet the client’s vision. I also collaborated closely with developers for the first time, learning to defend design decisions and support implementation by translating designs into code.
Over the course of the 11 weeks, me and my team had numerous client meetings, each helping us further refine the design through iterative feedback and critiques. Working within the constraints of time, resources, and the chapter's evolving needs, we learned to adapt quickly and prioritize the most impactful changes. Through this project, I quickly understood the importance of continuous iterations, having flexibility, and the power of having clear communication when it comes to delivering a product that meets both the client’s vision and their needs. Additionally, It was my first time working extensively with a team of developers! I was able to not only learn how I can defend my design rationals, but also assist in supporting them by translating my designs into lines of code!