8 months part-time project • UX designer & developer
The Engineering Education Research (EER) is a young interdisciplinary program at Michigan Engineering. The program were to redesign their website due to the needs to support increasing number of information.
As the only designer and developer in the team, I worked with 1 project owner and 1 website manager. I proposed the new information architecture by (1) evaluating & gathering contents, (2) defining use case & user flow, and (3) validating design with usability test. I also created reusable component library, and deployed the website with customize codes on WordPress.
After meetings with project owner and program's staffs, we decided the overarching goal of this project. I also proposed a working plan as the project blueprint.
After evaluating the website, I write down most of them as design requirements in the following process. I only solved the issue that can be addressed in a very short time such as adding the call to action button to the application page.
I studied 16 other Michigan Engineering websites & 4 other Engineering Research Program websites. I recorded each of their tab and page names & its content and marked the content that was missing on the EER website.
I clicked through each tab and page then took notes on whether the categorization and naming of each page was reasonable. Then I renamed most of the tab and page names based on convention of Michigan Engineering.
.png)
I tailored interview protocol for each user group including both prospective & current students, faculties & staffs. The questions asked their past experience using the website, invited them to walk through the website and think out loud with me. Then I synthesized the result into use cases that help me conceptualize users' information seeking process. Below are some of the examples.
Below are examples of iteration based on usability test questions including:
① Where do you think is the first place you would go and find EER graduate student manual ?
② There is an open house event for prospective students, where is the first place you would go to and find out more information about it?
③ Before you click on research resource, can. you tell me what you expect to see in this page?
In the Wordpress backend, I created reusable layouts for the website manager to easily add new content into the website with existing website format.
In the end of the project, I created documents and held training sessions to make sure there were smooth transition of the work between the program's staffs & me. Although the staffs learned how to utilized the resources in the reusable component library, when I look back at the documentation, it was very much programming-oriented. I believe a more visualized and descriptive approach could be a more friendly way to documented the work.
Since this is a remote project, all of the communication took place online. Throughout the process, I learned that sometimes when there isn't a precise words to articulate thoughts, quickly send a wireframe or just sketching with the paper & pens helped me convey design concept very well. If you see me at the time, I am the person who tries very hard to make the webcam focusing on the sketch paper 🥳