Colorado Mesa University

University website overhaul, tackling UX/UI and full-stack development for 50+ department websites 💥🚀

Coversion Rates

Final result contributed toward an 18% increase in conversion rates.

Consistently positive post-launch survey responses and feedback from target audiences. Increased accessibility by 13 points.

UX/UI Improvements

Decreased reliance on site search, Improved event/goal tracking, “Welcome mats” for personalized experiences based on user type.

Site engagement

UX Buy-in

Facilitated workshops and presentations of user research to generate buy-in for UX practices within our department.

Challenges

Rejuvenate a visually outdated university website consisting of multiple content contributors across more than 50 campus departments. Heavy focus on recruitment channels, but limited UX focus for current students. Limitations on no-code templating options for CMS users.

Audiences:
High school juniors and seniors, current students, parents and faculty.

Business goals:
Recruit new students, help current students, staff and faculty complete various university-related tasks, increase traffic and engagement, improve university’s online presence visually and functionally.

I don’t really use the campus website because I don’t know where to start. Everything I’ve seen is just for new students, so I just ask my professors.
— Current Student
I want to go to a college that gives me that warm fuzzy feeling. I don’t think the website really represents CMU and the way it feels to be here.
— Prospective Student

Solutions

I led a complete redesign for Colorado Mesa University’s website, including the UX/UI design, research, design system, responsive templating structure, web development setup, front- and back-end development, and setup within our CMS – Cascade.

Tools:

Adobe XD • Photoshop • Dreamweaver • Optimal Workshop • InVision • Google Analytics

HTML • CSS • JavaScript • Velocity (Cascade CMS) • Bootstrap 4

  • Conduct qualitative and quantitative user research and use findings to build initial wireframes. Conduct Google Analytics and competitor analysis. Hold focus groups with current students , prospective students and campus staff.

  • Used research findings to lead a workshop with my team to create our fist in-house customer personas.

  • Redesign the entire website to appeal to a high school and college student audience.

  • Create an atomic/modular design system with components for custom templating within Adobe XD and our CMS.

  • Build the new site using HTML5 and upgrading to the Bootstrap 4 framework. Develop in Velocity for back-end content management system.

    Bonus: Continue development and launch the new site during COVID-19 while still meeting our deadline.

  • Integrate accessibility best practices into the new site following W3C conformance standards. Conduct research with disabled students to guide site accessibility and development.

Atomic Design System

Next
Next

The Maverick Network