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.
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.
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.
Challenges for student users
Challenges for academic advisor users
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.
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.
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.
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.
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.
So we decided to further simplify the homepage, and provide the main entry points on the first screen.
So we decided to include the critical infomation for students into the "summary box".
It took a while for the participants to read through the webpage information.
So we decided to break down information into smaller "chunks".
Duplication Issue, Inbalance Issue, Hierarchy, Flow, Names/ Terminology Consistancy
Main Menu Layout, Header/ Footer Information, Sidebar Menus/ Features, Reference Links (FAQs)
Free Space, Visual Elements, Browser/ System Difference of CSS
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 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.
To see how the website actually works, please visit the MDP website
"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."