Overview
IEEE @ UCSD's website falls short in a clear identification of the organization’s interactive passion for electrical engineering activities.
I worked closely with 3 other designers and 2 club officers to develop a new identity system that freshens up its outdated presence while upholding its original ethos of being an inclusive, fun engineering-focused club.
Role
UI/UX Designer
Visual Designer
User Researcher
Duration
2023, 10 weeks
. ݁₊ ⊹ . ݁˖ . ݁. ݁₊ ⊹ . ݁˖ . ݁ . ݁₊ ⊹ . ݁˖ . ݁
Members are not enticed to join engineering activities when the website showcases only basic information.
Previously, the website's content lacked information and instructions about the ways to get involved. The absence of a clear call to action and brand identity hindered active engagement, prompting a strategic revamp to establish a compelling digital presence.
The new responsive website incorporates a more playful brand identity and streamlines registration processes.
High contrast colors and engaging visuals to motivate member involvement.
Comprehensive and accessible subpages to educate about continuous hands-on opportunities.
Desktop: Events
Mobile: Events
Desktop: Projects
Mobile: Projects
To understand the current landscape, we researched what the website does well and poorly in context of team needs.
We interviewed 2 club officers on 3 overarching themes: website content and design, users, and current website evaluation. After gathering information, we devised a priority list of the direction and essential features necessary to execute their idea of the ideal website.
We then sought to uncover factors that may attract or deter students from joining the club.
We conducted 15 initial interviews to understand how students find information about the club and navigate through the current website. The main priorities of the participants were to identify IEEE, see details on projects and events, interact with engaging content, and apply to be a member.
Upon our findings, we analyzed how key functions have been designed in various websites.
We studied 5 websites with a significant presence on our campus or within the engineering sector to extract ways to optimize and display the functions of navigating to and signing up for activities more prominently. Our research insights led us to implement multimedia features that illustrate social and hands-on activities to allow users to engage with the most updated content available.
After reviewing our research with our clients, I defined the website's personality and tone.
Our moodboard reflected sleek, friendly traits through a muted color palette and modern, humanist sans-serif fonts.
We decided to highlight the community and inclusivity of IEEE, while evoking feelings of warmth, social responsibility, and excitement through its mission to support the electrical engineering community.
Based on client goals and user needs, I created a site architecture to ensure that users can navigate efficiently.
The stiff interface and missing details on the activities and community validated the need for smooth navigation between pages and transparency of information. I introduced new content such as Projects, Officers, and Sponsors pages to guide users in making more confident identifications.
I began to work on lo-fidelity screens of Home, Events, and Officers pages.
We prioritized mobile-first prototyping, recognizing that students often use their smartphones for quick, convenient access to information over laptops.
On the Home page, I highlighted the most important information and latest updates about IEEE, such as events, projects, and contact information, that match popular use cases.
Home
To tackle the problem of being unaware of hosted events and their registration processes, I displayed upcoming and past event details, schedules, and sign-up links on the Events page.
Events
As for discussing questions and suggestions to the officers, I implemented officer profiles with their main contact methods, Discord and email, on the Officers page.
Officers
I then held user tests and client critiques to harmonize our design and direction with their expectations.
Our clients were dissatisfied with the dull brand color. Rather than choosing a different color, we scaled back and settled on a vibrant shade of blue to emphasize the liveliness of the IEEE community.
For the Home page,
Participants felt that it was intuitive to view the events and projects on a vertical orientation.
The date and location lacked visual distinction.
Participants wanted to find the schedule information.
I realized that I unintentionally emphasized the poster image. I prioritized making the cards compact by eliminating the actions needed to see the event details. By designing clearer layout elements, I enhanced their visibility and established priorities.
Mobile: Home
For the Events page,
Participants failed to recognize that the filter tags were horizontally scrollable.
The schedule and location were not immediately noticeable.
The content was lengthy and confusing.
I increased the spacing between the filter tags to better indicate that horizontal scrolling is possible. As for the cards, I referred to the Home page style for visual consistency and optimized text for a clearer hyperlink comprehension.
Mobile: Events
The desktop design leverages the larger display, as participants found scrolling more effortless than clicking on drop-down lists. I fixed the card height and added a "Read More" link to accommodate long descriptions.
Desktop: Events
For the Officers page,
Participants expected to see the officer's name first.
The content hierarchy lacked clear prioritization and deviated from our card layout style.
Originally, I positioned the officer's title before their name to support role-based searching. However, conventional norms suggest prioritizing the name, so I rearranged the text and tweaked the typography for improved readability. I also fully utilized the page space and built more unified cards.
Mobile: Officers
The desktop version has a consistent styling of blue borders and showcases 2 cards per row. I included contact icons and handles, offering users the convenience of quickly locating officer contact information.
Desktop: Officers
For the newsletter and footer,
The newsletter appeared separate from the footer.
The language of the newsletter copy was unclear.
While the newsletter was featured on the Home page, I opted to incorporate it in the footer where users can choose to subscribe from any page. Since it was ambiguous what the subscription was towards, I provided a straightforward copy that identifies the newsletter.
Mobile: Footer
In the 1st round of testing, I discovered a primary demand of users was an overarching view of the projects, so I designed a Projects Overview page.
I removed the floating line icons to bring emphasis to the project details and added color and icons to the application status messages to better indicate project availability.
Mobile: Projects Overview
Ultimately, we produced 9 web and mobile interface designs for IEEE's website.
Our clients had aimed for a 75% increase in website traffic within 6 months. Due to restricted access to the website's metrics after our hand-off, we were unable to confirm the outcome of results.
Each page features a diamond-shaped hero layout that depicts bright, approachable club members. In the Projects pages, users can see images of collaborative efforts and accomplishments, communicating a sense of community.
From 2 paragraphs to 4 new pages, users can see all the logistics such as schedule, registration, and skills needed pertaining to the projects, project space, officers, and sponsors. Users can further interact with FAQ's, hyperlinks, and other useful content throughout the website if they seek more information or assistance.
To minimize information clutter, we replaced the monthly calendar with a more streamlined weekly calendar that organizes the officers' operating hours in chronological order with grayed out past dates and officers' schedules.
Users can click on an available officer's name in blue to schedule a meeting and add the meeting specifics onto their calendars.
Extensive proofreading and double-checking are crucial when syncing designs.
I learned the importance of documenting everything from independent design decisions to after-action reports. We initially struggled with our assets a lot; we constantly tweaked our original designs as we didn't have enough information and assets in one place.
If I were to revisit this project, I would ensure that our brand colors meet accessibility standards so that the platform is easily usable.