top of page
Hiring portal mockup

MME Studio: The Transformation

My Role:

UX/UI Designer

Project:

Web Portal Redesign

Responsibilities:

UX Design

UI Design

HTML/CSS 

Presenting 

 

Timeline:

Summer 2022 -  4 Month Internship

Overview 

First Glance

MME Studio is a department portal for the Mechanical and Mechatronics Engineering (MME) department at the University of Waterloo. It’s used by students, faculty and administrators alike. It houses a teaching assistant (TA) hiring platform and a space management database, with more applications to come in the future.

 

I used my skills to improve the user experience and interface design for the portal.

design process

Design Process

My Impact

Students are now less likely to miss their deadlines in the TA hiring rounds.

Reduced requests from users to make manual overrides to the application.

Overall satisfaction and positive reactions to the portal redesign from users. 

Former MME Studio Interface 

It was up to me to reimagine how MME users would interact with this portal, consider their best interests, and enhance the interface design.  

Research

User-Centric Approach

I first sought out previous user feedback in order to learn their pain-points. I asked questions to familiarize myself with the most important tasks they complete, and how all of the pages correspond to these tasks. I utilized sitemaps to help me comprehend and redesign the flow for all users. 

Target Users

user icon

Students 

user icon

Professors 

user icon

Administrators

TA application user sitemaps
portal homepage sitemap

Research Findings: Students 

For the sake of this case study's length, I'm going to outline the portal improvements for the majority of users: students.

student pains, gains, jobs to be done chart

Problem Assessment

After empathizing with students and walking through the interface, I determined that I needed to focus on correcting the following issues:

thumb down icon

Lack of consistent interface design 

thumb down icon

Poor page navigation

thumb down icon

Unclear communication of hiring process 

Design

1. Fresh New Look

After many iterations, I came up with a clean look that resembled the style of other webpages used by the university. Keeping it consistent with elements that students are already familiar with was appreciated by the administrator.

mme style guide
user login page mockup

This new page ties together the Waterloo Engineering look with university branding and one of the faculty's buildings. 

Log In 

Student apply now page

I reformatted the form layout so students can apply with ease, with a better use of screen space. 

TA Application: Apply Now

2. Improved Navigation

A bit of renaming of elements and reorganizing of pages left the portal in a much better state, with a shallow learning curve and efficient navigating.

redesigned navigation interface
MME Homepage mockup

I promoted a more natural flow by adding a navigation bar with the profile, log out, help section, and bug report pages. This left the main area of the page clear for navigating to different applications.

Home Page

Student profile mockup

I merged all profile sections into one page to efficiently provide the user with their information, status and to upload their resume. 

Student Profile

3. Improved Clarity

With added information and statuses about the hiring process, the concept became easier to grasp, and user tasks became more apparent. 

student status
student status
Student TA Dashboard

I introduced an "Important Dates" section to outline deadlines that were previously not displayed. I also advocated for statuses and a task list. 

TA Application: Dashboard

Implement

Coding Contribution

Once my designs had been approved, I began making the changes to the portal using HTML and CSS. I was introduced to the framework Bootstrap and was able to learn and work more efficiently. With my limited coding experience, I was able to provide the visual foundations of the interface, and simple elements such as navigation bars, input forms and buttons.

bootstrap logo
visual studio code logo

Results

A Success!

In the end, I received an “outstanding” on my evaluation, and was offered to come back for more work in the future. I was told that the new portal had “nothing but positive feedback” from users.

 

Having the opportunity to improve and add on to an existing application used by a whole department in my university was a rewarding experience that I’m very proud of myself for accomplishing.

thanks a lot, we really appreciate those designs you made
Final Prototype

Interactive Prototype

Press "R" to restart

Reflection

Constraints 

All my designs had to be approved by the portal admin before implementation began, and they were not always available for meetings. This unfortunately delayed the progression of the project at times, but it always kept me ahead with time to explore alternate options for designs and features.

 

Being the first and only person with user experience and design skills on this project, I was often times left with minimal user feedback and information on target users to reference. I was also not required to conduct my own research. But I was able to use my intuition and came through with improvements.

Takeaways

​I learned quickly that the portal admin wanted an overall improvement of the portal's interface, but they didn't want it to stray too far away from the original look. This challenged me to think in ways that I usually wouldn't, and I had to rationalize my decisions for certain changes. In other words, there had to be a balance of familiarity and improvement.

This was also my first time coding professionally and I found it to be a positive experience. I now have a clearer understanding on a developer’s responsibilities, so I’ll be able to better collaborate with them in future projects.

bottom of page