CECSE Website Redesign
ux design / visual design
Year & Scope
2020 / 10+ weeks
My Role/Team
UX Designer / Project team composed of myself, project manager, and a developer
Project Tools
The Challenge
The Center for Excellence in Computer Science Education (CECSE) provides resources and opportunities to computer science (CS) educators in its mission to grow an equitable CS ecosystem in Chicago. Although CECSE had an existing website created using Drupal page templates, the design was fairly heavy and unengaging. This project provided an opportunity to create a more aesthetically pleasing design with cleaner information architecture and more effective wayfinding for users.
The Process
1. Defining Everything
At the start of the project, I worked closely with a project manager (PM) to better understand the scope of the work and the motivations driving the updates. This took place as a series of meetings where we identified the target users and their goals and the known functional requirements - those already existing on the site as well as new concepts.
From our conversations, we identified three major goals for the work:
-
Improve the visual design of the site to be more engaging and energetic
-
Design and implement various new branches of site content
-
Improve the site's navigation and content organization
2. Tackling Information Architecture
One of my primary responsibilities in the initial stages of this redesign was to identify the primary buckets of work and how they affected the information architecture (IA) of the site. We had a list of features for design and implementation, but how would these fit together in the big picture? How does the site structure account for user goals and wayfinding?
To address these questions, I developed a list of user stories centered around the target audiences and goals identified in my previous meetings with the PM. This helped the team better understand the feature requests in terms of user motivations and goals. I drafted a flowchart alongside this which highlights the steps and decision points users would need to cover to reach each anticipated goal. This chart was created in tandem with an updated site map, providing two different views of the website's IA: a user-centered view, and a traditional hierarchical view. This served to help the team understand the site's navigational structure from a user's perspective and to create a skeleton for the new site that incorporates new content and goals.
3. Updating Existing Pages
The first round of design work to tackle was to update the existing pages to be more visually engaging. The original design was text-heavy and overly academic, contrasting with CECSE's vision of the site as an informal and eye-catching resource for a broad array of audiences. I first sketched out a few designs for the primary site pages (Home, About, Contact) in mobile and desktop orientations, incorporating a clean grid layout and prominent visuals. Using an Adobe XD prototype of the original site, I translated these sketches into a mid-fidelity prototype with placeholder text. To create a cleaner look, I adjusted the use of the brand's color palette on the site. Instead of using color on page backgrounds like in the original site, I used color to draw attention to important accents and images on the page, leaving the background white. I felt this worked well paired with informative text and eye-catching illustrations from unDraw.
4. Adding New Features
All new pages were added one by one according to priority, as determined by myself and the PM. I worked directly with the project's developer to identify all interactions and data points the designs needed to account for, and added each interaction into the prototype. The new pages I designed include: a page of events, an event details page with registration and waitlist functionality, and a news page with CECSE-related articles. Every design was documented via Adobe XD and Asana, shared with the developer for implementation, and subsequently reviewed for design consistency.
A flowchart encompassing target audiences, user stories, and user flows
Original homepage and About page and their redesigned counterparts
The design included several new features, including a news page, events (with registration and waitlist functionality) and sign sign-on via Google.
THE FINAL DESIGN
Reflection & Contributions
These designs were created using a fairly informal approach, and feedback was gathered from internal stakeholders. If I could change anything about this process, I would advocate more for user feedback and usability testing to validate the final designs and navigation.
This continues to be a continuing project with many different moving parts. Upon implementation of the essential parts of the site, I stopped working on this product to begin work on a different project. Throughout my time working with this team, I contributed the following: an updated site map of the website, user stories and user flows, and new designs for 21 interfaces in desktop and mobile orientation, including all site pages, all confirmation interactions (i.e. registration confirmation), and sign in/sign up functionality.