Overview page (scroll over the picture to view the whole page design)
Lingyuan Li
IxD | UX
Redesign of the CEM Web Portal
A better experience for users to obtain information from the web portal
Background
This project deals with redesigning Clemson University's Construction Engineering and Management (CEM) program web portal to support the needs of faculty, students, and staff in the CEM specialization.
Updates:
The redesign has been adopted by the school! Check the updated Clemson Construction Engineering and Management (CEM) website based on our redesign!
Team:
Lingyuan Li, Terri Barber, Akshay Kulkarni, Heather Watkins
My roles:
Conducted interviews; Processed and analyzed the data; Designed; Made low-fidelity wireframe and high-fidelity visual design; Made and Iterated the prototype; Did usability tests; Wrote the report
1. Identify User Needs
Problems
What makes people perceive the old web portal as low quality? What do people expect from the revamped web portal?
Interviews
To get a better understanding of the problems the old CEM web portal faced:
8 in-depth semi-structured interviews
Transformed interview data to need statements, primary needs, and secondary needs
Survey
To establish the relative importance of needs to find out key needs:
Importance survey, 7-point scale
Needs that get high rating scores are key needs
What we learned
Not providing easy access information and comprehensive information about the program
More engagement needed for students
Stakeholders
Students (main), faculty (main), staff (main), technical support, parents, sponsors, prospective hiring recruiters, prospective employees
Constraints
Based on the Clemson University server
Follows Clemson University web design guidelines
2. Set Target Specifications
Create Metrics
Converted the items on our needs list to metrics.
Generated metrics of various types: objective (i.e., time, percentage), binary, and subjective
Competitive Benchmarking
Other universities’ CEM websites as our potential competitors
The selection criterion includes the university's ranking, reputation, and current web design.
Set Target Specifications
The minimum value of a metric required for the web portal to be feasible
The ideal value that we could hope to achieve for our metrics based on the collected information
We also sent the subjective metrics survey to the stakeholders in order to gather unbiased metric ratings on the original web portal.
3. Conceptual Design
Concept Generation, Selection
Generation: using the concept generation methodology (Ulrich and Eppinger, 2016) with the user needs and target specifications in mind.
Selection: using the method outlined by Ulrich and Eppinger (2016) to complete iterative concept screenings
Reference selected: Purdue’s CEM web portal (highest scores in the competitive benchmarking analysis)
Limits and exclusions: The concept design solution of the web portal needs to follow the design principle of the Clemson University department website. This is to ensure consistency in design and reflect Clemson's values and priorities.
Wireframes
Based on the final concept we selected, I created low-fidelity wireframes via Figma. I did a thorough examination of the wireframe by identifying a list of features incorporated into the system to align with the key primary needs that were found in Phase 1.
Improve
We reached out to our client and stakeholders again to get feedback and suggestions to improve the wireframe as well as some information needed for the content of the web portal.
4. Finalize the Prototype
Prototype in Figma
UI Design
The color theme - Clemson Orange (#F56600) and Regalia (#522D80) by following the principles of Clemson University’s department website design.
Usability Testing & Heuristic Evaluation
12 tasks. Task example: “You are a news reporter looking to write a feature on a CEM expert. Find the location where you can reach out to the program.”
Follow-up survey: subjective metrics survey again; SUS
Iteration 1: Corrected staff information; added more contact information
Iteration 2: Created research overview page; re-specified content of student page
Iteration 3: Improved student page; updated realistic up-to-date photos
Nielsen’s 10 usability heuristics
-
Previous CEM web portal - Overview page (scroll over the picture to view the whole page)
-
Previous CEM web portal - People page
-
Previous CEM web portal - Research page
-
Redesigned CEM web portal - Overview page (scroll over the picture to view the whole page design)
-
Redesigned CEM web portal - People_Faculty page (scroll over the picture to view the whole page design)
-
Redesigned CEM web portal - Research_Projects page (scroll over the picture to view the whole page design)
-
Redesigned CEM web portal - Academics_Degree page ((scroll over the picture to view the whole page design)
-
Redesigned CEM web portal - Academics_Admission page (scroll over the picture to view the whole page design)
-
Redesigned CEM web portal - Contact page (scroll over the picture to view the whole page design)
50%
of ideal value specifications satisfied while Purdue's satisfies 3% and the old web portal satisfies 0
87
in user satisfaction score, which is much higher than the average website score of 68 (Sauro, 2011)
100%
of the marginal value specifications satisfied while Purdue's satisfies 67.6%
Adopted
Our redesign has been adopted by the CEM program and put into practical use!