Multidisciplinary Design Program Website Development

Overview

I was the lead designer of a team of 3, who designed, built, and managed the website

My job responsibilities were cross-disciplinary: I researched the pain points, designed solutions to address them and to meet the stakeholder requirements, and also coded to bring the website to live.


MDP website has 4 types of targeted users: students, academic advisors, faculty (mentors), and sponsors

The main goal for this redesign was to attract more students in the upcoming Fall semester, so the users we focused on for phase one were students and academic advisors.


We started fast, iterated multiple times, and launched the new website after 4 months in August, 2016



Challenges

Primary Objective

To design and develop a functional project application section by late August 2016 for students to find and view projects, to match their skills and needs, and to submit their applications. For cohort 2016, MDP had over 50 projects with 3 to 7 pages of description each.


Our Users

Challenges for student users


  • Over 40 Projects VS. Limited Time of Students
  • “How do I know if I am a good fit?”
  • “How do I understand MDP and the related policies?”

Challenges for academic advisor users


  • "How do I help students participate in programs like MDP?"
  • “How do I communicate with the MDP coworkers effectively?”


Some Research

I created interaction map to understand what we had

web analysis

I created an interaction map for the old MDP website using Adobe Illustrator. The interaction map helped me understand how information was organized for the old MDP website. It also worked as the basis of the Nielsen’s Usability Heuristics to understand what worked and what did not work.


I conducted Heuristic Analysis to see where to improve

hueristic analysis hueristic analysis

All heuristics were applied to the MDP website. Paths were created based on user profiles (prospective student, current student, acadmic advisors, faculty, sponsor, alumni). Severity rankings were decided based on the frequency with which the problem occurs, the impact of the problem, and the persistence of the problem. The results indicated that system consistency and standards, flexibility and efficiency of use, match between system and the real world, and aesthetic and minimalist design were the most commonly seen problems within the MDP website. This process helped me understand the motivations for the MDP team to redesign the website.


I analyzed Google Analytics to understand our users' behaviors

Google Analytics Pageview Google Analytics User Flow

Data from Google Analytics told us some common user flows and what were the popular resources within the website - what is MDP, projects, course substitutions, etc. Also, the data showed who were our visitors, and what devices they used. Smaller screens were among the top, which indicated that the responsiveness of the website was crucial for the future web development.

Data also answered some questions we had about how people found the projects they liked: they used filter more often than search, and how they filtered the projects mostly was by the project types and the schools they were from.



Initial Design

I worked on rebuilding the information architecture and the navigation experience

mdp web layout IA Research

I did some research on how to design heavy-content website and found that the combo of Search, Filter, and Layout Design would help users quickly navigate within such website.

Google Analytics results indicated that in the old MDP website, students often navigate through filtering projects by majors and project types. For students who had clear interest, and for academic advisors, filtering projects by interest and course substitutions were also handy. In order to better support the experience, we added projet filter function to the website. 4 taxonomies were identified and created for the projects using PHP. Similar approach was adopted to help search other MDP opportunities within the website.



User Testing

I organized user testing to validate our initial design

User Testing

In early July, we conducted interviews and usability tests with students and academic advisors. Results from the user studies showed how students' life and academic advisors' life overlapped with MDP and how they interacted with the new website. The studies on one hand confirmed the hypothesis we had about our target audience. On the other hand, we found that students and academic advisors expressed similar interest in the website's content. In addition, academic advisors were more interested in the information in Students section than it in their own section. Therefore, in the later development, we combined the student section and the academic advisor section together.


We found our users didn't scroll down on the homepage

  • “I didn’t know it can scroll down at first.”
  • “I suspect if anyone would do that (scroll down).”

So we decided to further simplify the homepage, and provide the main entry points on the first screen.


We found a "summary box" on the project page could offer an "at glance" experience

So we decided to include the critical infomation for students into the "summary box".

Feature Box

We found the information chunks were still too big

It took a while for the participants to read through the webpage information.

So we decided to break down information into smaller "chunks".

Reduced Info Chunk


Iterations Based On User Testing

organization opportunity

We Improved The Content

Duplication Issue, Inbalance Issue, Hierarchy, Flow, Names/ Terminology Consistancy

organization opportunity

We Improved The Navigation

Main Menu Layout, Header/ Footer Information, Sidebar Menus/ Features, Reference Links (FAQs)

organization opportunity

We Improved Aesthetics

Free Space, Visual Elements, Browser/ System Difference of CSS


I also thought about how MDP staff would use it and maintain it

web system thinking

The ultimate goal of this website, as the MDP staff stated, was to help them "be more professional" in their daily operations. When I designed the website, I always held this in mind that people who would work with this website for years were the MDP team.

When I thought of the features, whether old or new, I'd always consider them as the "back-end" of this website. There were 3 features I proposed that might affect the daily operations of the MDP staff, which were online contact form, events, and online donation. I discussed all of them with the program manager, and implemented them all in the end that would cost minimal extra work for them.


I selected the WP theme and customized it for our use

I evaluated and proposed themes based on design, price, and support at the start of this project. My client and I selected LearnPress together, as it supported our needs best in displaying MDP projects. For a better experience, we created a child theme and customized the style using CSS. I collaborated with our graphic designer to create and maintain the visual aesthetic and consistency throughout the website - the buttons, the headers/ footers, the profile images, etc. were all styled using the same format and the same color palette, following the guidance of University of Michigan Style Guide.



The Outcome

The redesigned website is now live -- with significant increase of student applications to the MDP program

matching students

To see how the website actually works, please visit the MDP website

.

I Learned...

"I got a great experience of a complete website developing cycle out of this internship -- from user studies, to information architecture and layout design, to real website development and deployment. I also taught myself WordPress and basic PHP for this project."


Future Recommendations

  • Consider performance and exam back-end code when selecting WP themes.
  • Build up the website based on solid user studies and client's requirements to avoid unnecessary iterations.
  • Test compatibility and responsiveness whenever you can.