UMSI Professor Portfolio
Redesign and development of a professor's website to be responsive, accessible, and aesthetic
. . .
Overview
Roles
Web Designer
Web Developer
Web Developer
Client
Ceren Budak, UMSI Assistant Professor
Timeline
December 2019 (1 month)
Skills
Wireframing, Responsive web design, Web accessibility, Web development
Team
Noelle Enkema, Chelsea Ma, Sydney Vollmar
Tools
Figma, Github, HTML, CSS
Problem
Our team of 4 was paired with Ceren Budak, an assistant professor at UMSI, to redesign and redevelop her personal portfolio website. To kickoff the project, we first identified the main problems of the current website:
- Lack of Responsiveness: the current website is purely static, consisting of the same exact screen regardless of the viewing device.
- Lack of Accessibility: The website is not designed with all users in mind, especially those who may have poor vision and utilize screen readers. The key accessibility issues included poor color contrast and the lack of alternative text and hover states.
- Inconsistent Design: The current website features many differing font sizes and misaligned elements.
- Poor User Experience: Some parts of the website do not function how one would expect them to, confusing and frustrating users. For example, clicking on the logo in the navigation bar does not do anything.
Problem statement: A major redesign is required to improve the professor’s portfolio website and make it responsive, accessible, and user-friendly.
Exploring some of the usability issues with the current website
Mobile and tablet views of the current website with illegible text
Solution
Our team redesigned and redeveloped the UMSI professor’s website to be responsive and accessible, meeting the web accessibility standards of WCAG 2.1. The final product satisfied the client’s needs and was even voted the best redesign of the class.
. . .
Design
Design Goals
Taking the key problems of the existing website, our team translated them into concrete goals that we would strive to achieve in the redesign.
- Responsiveness: The website and all its content should be responsive, allowing the site to be accessible on all devices. To achieve this, different media queries should be used for mobile, tablet, desktop views.
- Accessibility: The website should be designed with all users in mind, making sure to follow the web accessibility standards of WCAG 2.1.
- Consistency: Color, typeface, margins, and UI elements should be consistent throughout the website.
- Conintuity: The redesigned website should remain familiar with its users, in terms of both interaction and appearance.
Ideation & Sketches
Our team first started exploring possible designs through sketching. In addition, we defined the overall layout of the website using a grid system. This approach allowed us to seamlessly transition from design into development, as the website’s content could easily be made responsive using CSS Grid.
Sketches of the redesigned website's grid layout
Wireframes
After agreeing on the direction of the redesign, our team created wireframes of the website.
Wireframes of the home page, featuring mobile, tablet, and desktop views
Style & Typeface
To help us achieve our goal of creating consistent designs, we defined the color, typeface, and components of the website.
High Fidelity Design
Finally, our wireframes were translated into high-fidelity designs with the help of our style guide.
Mobile and desktop views of the redesigned website
. . .
Development
Final Product
Following the design phase, our team coded the redesigned website with HTML and CSS, utilizing Github as version control.
. . .
Accessibility
Accessibility Tools
To meet our goal of satisfying the WCAG 2.1 web accessibility standards, our team utilized the online accessibility checkers of WAVE, AXE, and W3, successfully passing all 3 with no errors.
Screenshots depicting the results of the accessibility checkers
. . .
Reflection
Mobile First
Designing and developing mobile first encouraged us to focus on the content of the website, allowing us to create a more practical and usable product. Additionally, designing mobile first increased the efficiency of our project.
Defining the Style Guide
Before creating high-fidelity designs of the website, a style guide was created to define its colors and font for all different devices. Having these predefined styles allowed for an easy and efficient design and development process.
Coding Collaboratively
While our team had amazing teamwork and communication, coding collaboratively still gave us many frustrating and time-consuming merge errors. In the end, we utilized Google Drive in addition to Github to manage our code. As such, I took charge of gathering the team’s code changes and managing the Github repository.
. . .
Thanks for making it this far! And of course, here's another fun fact:
I am part of Revolution, the Chinese yoyo group at the University of Michigan and definitely one of the most unique performance groups on campus!
I am part of Revolution, the Chinese yoyo group at the University of Michigan and definitely one of the most unique performance groups on campus!