Tufts Music Engineering
Improving usability and boosting engagement for the Tufts Music Engineering Program website
Improving usability and boosting engagement for the Tufts Music Engineering Program website
TIMELINE
July to September 2024
ROLE
UX designer and web developer
SKILLS & TOOLS
User Interviews
Figma prototyping
Web development
Wordpress
DELIVERABLES
+ Mid-fidelity Figma wireframes
+ High-fidelity Figma prototype
+ A live Wordpress website for the Music Engineering program at Tufts
OVERVIEW
The Music Engineering program at Tufts began in 1998 as an interdisciplinary program across the School of Arts and Sciences and the School of Engineering. The program has grown over the years, evolving to have three distinct tracks that students can pursue in the minor.
The Tufts Music Engineering website is a pivotal entry point for the program, with information about related courses, minor requirements, current faculty, and past projects and research. However, the information was presented in a confusing way that made it difficult for users to find the information they sought. Further, the design, information, and links were out of date, giving the image that this program was not active and thriving.
I worked with the directors of the Music Engineering program to redesign and develop an entirely new program website, establishing a welcoming look and feel and providing all the important, updated information to its users, increasing interest and engagement with the Tufts Music Engineering program.
Take a look at the live website:
Original Website
New Website
STAGE 1: RESEARCH
During the research stage of the project, I conducted a user interview with a student minoring in music engineering to gather firsthand insights into the specific needs and challenges related to the website. In addition, I performed market research to examine how other programs present similar information on their websites, identifying key features and best practices. To ensure the website content was accurate and up-to-date, I collected essential data, including precise course numbers, official minor checklists, and faculty bios, which would form the foundation for the site’s structure and content.
STAGE 2: DESIGN
In the design stage of the project, I focused on refining the information architecture by reorganizing content, such as removing student-related sections and merging tabs for a more streamlined navigation experience. I created Figma prototypes to visualize the design and iterated on them based on ongoing feedback. This included making adjustments to the navigation bar and layout to improve usability. Once the initial designs were ready, I presented them to the directors for review, gathering valuable feedback to further refine and enhance the overall user experience.
High-Fidelity Figma Prototype
STAGE 3: DEVELOPMENT & TESTING
During the development stage, I transitioned from design to implementation, diving into WordPress to bring the vision of the new website to life. Over the course of a few weeks, I quickly learned to customize the site using the Elementor plugin, ensuring it closely matched the design. I made further edits to refine the layout and user interface, incorporating design feedback from users to fine-tune details. Once everything was in place, I published the site live, ensuring all elements were fully functional and accessible.
FINAL DESIGN
You can explore the final product here: Music Engineering Website.
Since then...
I've seen students open the website and explore course options in ways they couldn't have before, demonstrating how a user-centered design can help increase awareness of and engagement with the program's current offerings.
Arcadia Ohnemus arcadia.ohnemus@gmail.com LinkedIn