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:

Interaction design, UX research, visual design

1. Identify User Needs
Redesign of CEM Web Portal (2020)

Interviews

At the discovery phase of the project, I designed interview guidelines based on the client's requirements and previously tested interview questionnaires. We conducted user interviews in order to get a better understanding of the problems the original CEM web portal faced.

  • 8 in-depth semi-structured interviews (faculty member, prospective faculty, current students, prospective students, and staff)

  • Transformed interview data to need statements

We determined primary needs and secondary needs by adopting the affinity diagramming

Survey

After sorting out all the need statements, we established the relative importance of needs to find out key needs

  • Importance survey

  • 7-point scale

  • Needs that get high rating scores are key needs.

Benefit Proposition

Easy to access information; comprehensive information about the program; more engagement from students

Stakeholders

Students (main), faculty (main), staff (main), technical support, parents, sponsors, prospective hiring recruiters, prospective employees

Assumptions and Constraints

  • Replacement of existing web portal

  • Based on the Clemson University server

  • Follows Clemson University guidelines

2. Set Target Specifications
Redesign of CEM Web Portal (2020)

Create Metrics

Provides quantifiable data on how a product performs. We converted the items on our needs list to metrics. We generated metrics of various types: objective (i.e., time, percentage), binary, and subjective.

Competitive Benchmarking

Ensures that the web portal can compete with the current market. We took other universities’ CEM websites as our potential competitors instead of other departments’ websites. To focus on representative quality competitors, the selection criterion includes the university's ranking, reputation, and current web design.

Set Target Specifications

Provides a list of specifications the team wishes to meet. We determined the marginally acceptable value which is the minimum value of a metric required for the web portal to be feasible, and the ideal value which is the best possible value that we could hope to achieve for our metrics based on the collected information.

Extracting subjective metrics from the target specifications, we sent the subjective metrics survey to the stakeholders in order to gather unbiased metric ratings on the original web portal.

3. Conceptual Design
Redesign of CEM Web Portal (2020)

Concept Generation & Selection

The concepts are generated with the user needs and target specifications in mind by using the concept generation methodology (Ulrich and Eppinger, 2016).

  • decompose the problems by primary needs

  • search internally and externally to generate initial concepts

  • explore systematically to eliminate infeasible solutions and couple subproblems that could not stand alone to consider

  • reflect

Using the method outlined by Ulrich and Eppinger (2016) to complete iterative concept screenings.

  • select the reference: Purdue’s CEM web portal as it got high scores in the competitive benchmarking analysis.

  • choose the selection criteria to rate our concepts based on key needs: adequate information, usability, structure, navigation, and features.

  • rate concepts compared to the reference; rank concepts

  • combine and improve concepts; select one or more concepts

  • reflect on the results and process

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.


Overview page (scroll over the picture to view the whole page design)

Overview page (scroll over the picture to view the whole page design)

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

Prototype in Figma

UI Design

Once I improved the wireframes based on stakeholders' feedback, I started designing the final screens in Figma.

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 that 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 (Nielsen, 2005)

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!