The MACUL (Michigan Association for Computer Users in Learning) Website ​Redesign Project

For my UX course website project, I chose to evaluate the existing MACUL ​organization website. I am currently serving as a board member and part of the ​website development team. During board discussions, we explored maximizing the ​webpage’s potential to leverage the organization's influence. Through surveys, ​discussions, and personal interactions, we pinpointed a decline in site traffic, ​detected various issues, and recognized several pain points. It is clear that a ​comprehensive update is required for the current website.

My Role:

As a MACUL board member, I sit on the website design team. I was the main ​contributor to the company website redesign, I conducted user research, ​developed wireframes, and created mockups.

Target Audience:

I identified 5 possible users for the website

• The New Teacher
• The Seasoned Teacher
• The Building Principal
• The Tech Director
• The Upper Adminstrator

Initial Concepts:

Originally, my idea was to update and fix the current site. However, once we ​looked over the survey data and the comments sent to us, it became evident ​that more was to be done to site.

In the last few years, we have observed a decrease in page visits, identified several ​errors, and learned about various user pain points linked to our site.

Two major issues were apparent upon initial review. Firstly, the Homepage was ​overwhelming, filled with a lot of information and secondly, it lacked a clear target ​audience.

It was evident that the website needed to define its target users and readjust its ​information architecture.

Since the former information architecture was lost or never created, I created one ​that followed the current page structure, I then simplified the homepage and broke ​the information out into smaller chunks. I then identified 4 personas and worked ​with the website committee to identify persona traits. presented the information ​architectures along with a variety of initial wireframes to the executive board for ​feedback before proceeding with mockups, and finally, a high-fidelity prototype ​that addressed user needs. The board is currently reviewing the page, and we are in ​the process of gathering all necessary information to update each section.

Current Information Architecture

Proposed Information Architecture

Wireframe Option 1

Challenges Faced or Constraints:

One of the challenges that I have faced during this project is that the ​web page is more massive than I imagined. At times it is overwhelming ​to think I am doing a large portion of the work alone. However, as mentor ​of mine stated “you take your time and break it down into little chunks.”

Another issue that I have been learning from is lack of information that ​has been provided to me, either through the website or through other ​resources. The website and resources often lacked detailed information ​or had broken links. I researched content gathering techniques for UX ​designers, learning the value of placeholder content while strategically ​planning for future content creation. Moving forward, I'll provide content ​templates for the team and hand off content creation responsibilities to ​the new director.

Explaining wireframes to my tech-savvy colleagues, who are ​accustomed to a hands-on approach, proved to be an unexpected ​challenge. However, this experience honed my communication skills, ​allowing me to effectively bridge the gap between design and non-​design perspectives. My colleagues gained a better understanding of ​the wireframing process, resulting in smoother collaboration.

Wireframe Option 2

Next Steps:

I plan to continue working through each page of the site, making sure to ​prioritize the core user journeys first and then building out the ​responsive pages so that they transition seamlessly to the phone.

I am also interested in exploring the inclusion of more accessibility ​features like language adaptation, speech-to-text or text-to-speech ​capabilities, and verbal picture descriptions.

Finally, I plan to incorporate user testing and gather feedback ​throughout the development process to ensure a seamless user ​experience.

Hi-Fi Designs

Click on the images to ​interact with my figma ​high-fi design.

Let’s Connect