SWE Website Redesign
Increasing member engagement and satisfy all users' needs
UX Design
Website
My Role
UX Designer/Researcher
Graphic Designer
Team
Anh Nguyen
UX Designer/Researcher
UX Writer
Kailey Terracciano
Project Overseer
Timeline
Aug 2020 - Dec 2020
(5 months)
Tools
Squarespace
Figma
Adobe Illustrator
Whimsical
Miro
Overview
In comparison to the other for SWE at UW social media and communication platforms, their website was not receiving as much engagement from members. Additionally, while SWE at UW's website is a resource to more than just SWE members, the organization felt that it wasn't catering to the needs of users beyond their member base.
In this redesign, Anh and I were tasked with both increasing member engagement and making it a valuable resource for all people interacting with it.
Design Question
How might we redesign the SWE at UW website to increase member engagement and meet the needs of all visiting users?
User Research
We began this project by conducting three initial stages of user research: Stakeholder interviews, user surveys, and user interviews. The details regarding participants and the goals of each stage are indicated below.
Stakeholder Interviews
Who
Internal executives (President, VPs of SWE UW)
To understand...
Current specific branch uses of and interactions with website, and their desires for this redesign.
User Survey
Who
SWE members, alumni, former members, nonmembers (40 responses)
To understand...
Users' relationship with SWE, their experiences with the SWE website, information looking for and if could find information, pain points, desires, etc.
User Interviews + Usability Testing
Who
1 recent alumna, 2 current members
To understand...
How use website, frequency and consistency of use, and most recent SWE website visit. Users' thoughts, emotions, and reactions as navigate through website.
Research/Usability Insights, and Design Principles
After completing our user research and affinity mapping to find common themes, we then developed our research and usability insights and requirements to refer to in our design decisions addressing user needs and desires.
Research Insights
1
A community with a shared experience
Participants value being a part of a community where they can connect and share a bond through the common experience of being a woman engineer. SWE has helped participants to foster a sense of belonging as women in an industry that can feel hostile at times.
2
Networking
Participants desire opportunities to network. They reflected on how SWE has provided them with the opportunity to create long-lasting, meaningful relationships with other women in engineering that they might not otherwise have.
3
Becoming more involved
Participants expressed a desire to become more involved with SWE leadership and/or events (e.g., volunteering, committees, mentoring) both during their time at UW and post grad.
Usability Insights
1
Lack of discoverability
Participants had to navigate through multiple pages to find the information for which they were looking. One page that caused confusion was Industry and Scholarship Opportunities where users were unsure where to find the password to access the page.
2
Information Applicability
Participants were unsure which parts of the website were applicable to them—was the information for current members, industry partners, prospective members, alumni, community outreach members, or other intended audiences? This included information under Industry and Corporate pages.
3
Difficulty Finding Events
Participants couldn't find the calendar for upcoming events when navigating the home page.
4
High text-to-image ratio
Participants felt that the pages were too text-heavy and lacked visuals representative of SWE.
Personas and User Journeys
Based on our user research, I then developed the following persona and user journey map.
Card Sorting and Information Architecture
Using OptimalSort, Anh created a card sorting sorting activity and I then clustered the responses to see if there were common themes in how users categorized SWE Website content.
Based on our user research and card sorting insights, we then developed our redesigned IA, as displayed below.
Website Design Process
Below is our end-to-end design process. Steps two and three were iterative cycles.
Here are a couple of low fidelity prototypes I made for the webpages.
Creating a Visual Language
I also developed a visual language guide to ensure a cohesive design continues after handoff.
All other elements except for the avatars were made from scratch. To the right, the paper airplane and its path highlighted in yellow show an example of how I built upon the avatars.
.png)
Accessible Graphics and Color Schemes
For all of the graphics and text elements, I tested the color schemes to make sure they are accessible for color blind users. To do so, I used Adobe Color's Accessibility Tools.
Below is an example one graphic I tested for color scheme accessibility.
To ensure color combinations used in graphics are color accessible, tested...
1
Colors used for a person (Clothes, skin tone)
2
Colors within added objects
3
Color combination of overlapping elements (e.g., people and objects)
Creating Iconography
As graphic designer, I designed all the website's icons used from scratch. Below is an example of an icon I created for the value of Inclusive Environment, one of SWE's five values outlined in the About page.
Infinity
Inclusivity
People-Centric
Environment
Heart
Inclusivity + Loving
Holding Hands
Support + Inclusivity
Final Product
View screenshots of the website before and after the redesign below.
To create a still-life presentation of the redesigned website before handoff, I created a Figma prototype below using screenshots and added interactions. You can expand the prototype to view the content more clearly.
You can also view the live SWE website below, however, the content and structure will likely have evolved as SWE UW continues to expand the resources it provides users.
Design Decisions
To explain the design decisions we made, I've annotated three of the seventeen pages created.
Reflection
I really enjoyed working on a project for such a large, empowering community, which has over 500 current members, many more alumnae, and a large community network of hundreds of middle and high students. It allowed me to take ownership of a large scale end-to-end user-centered design, further develop communication and negotiation skills in the process, and work closely with many stakeholders.
If we had more time, I would have proposed:
-
Conducting additional user research and usability testing with our user groups of community outreach students, their parents, and teachers, corporate sponsors, recruiters, and industry members
-
Conduct more usability testing to refine website design, structure and content
-
Creating a formal outline breaking down accessibility guidelines (e.g., WCAG) for SWE executive managing website after handoff
Other Work
© 2020 by Emma Sadjo.