VIM Magazine Redesign
January 2020 - April 2021
Background
Founded in 2010, VIM is an entirely student-run fashion beauty & lifestyle publication at Michigan State University. The mission of VIM is to work collaboratively and efficiently to produce the best college fashion publication in the country. In 2020, the first UX team was created and aimed to redesign the website to create a more interactive and enjoyable experience to users.
My Role
UX Director – Oversaw final decisions for UX Research, Design, and testing.
The Team
Co-UX Director: Catherine Davis
UX Team Members: Sam Abele, Elena Bulthuis, Anaija Johnson, Chase Maples, Phoebe Peterson, Haley Sinclair & La Min Way
Problem
Before the UX team, founded in 2020, no team was in charge of maintaining the VIM website. The website was mainly used to view blogs that the Blog team uploaded to the site. As a result, it was not accessible, visually appealing, and both members and people generally didn’t want to interact with the website. As a team, we decided the first thing we wanted to accomplish was redesigning the website so users could better understand the mission and values of VIM.
Process: User Research (Spring 2020)
Contextual Interviews
To begin our user research, we conducted contextual interviews with 8 participants. In our interviews, we asked our participants questions regarding the organization of the navigation bar, our online presence, and what they thought VIM represents. Our participants fit into one of three groups: an individual interested in VIM but not a member of the organization, VIM Member, and VIM Leadership. I acted as both the interviewer and note taker for two contextual interviews. We planned to conduct all the interviews in person, but due to COVID-19 we switched to using Zoom to conduct interviews. Through Zoom we were able to see how participants navigated through the website and could screen record for future analyzation.
Affinity Map
After collecting and analyzing all of our research we went on to creating an affinity map to organize our findings and document ideas to supplement our findings.
Our Findings:
- Our audience wanting to see more media and behind the scenes content
- View a clearer navigation bar
- Be more informed about upcoming meetings and events.
User Personas
Our team then split into 4 groups to create a persona deck to ensure we were aware of the different people visiting our website. We often revisited this deck to make design decisions.
We Considered:
- Motivators
- Behaviors
- Needs and Frustrations
Process: User Design (Fall 2021)
Low Fidelity Wireframes
With all of our user research completed the team moved on to the design phase of our project. We first started with creating low fidelity wireframes to share our personal ideas. I designed lo-fi wireframes for the home, blog, and issues page. In my designs, I prioritized incorporating different forms of interactive media throughout the page(s).
High Fidelity Wireframes
Final Prototype
After the team compared wireframes with each other we concluded that the common features that should be included on our About page.
The Common Features: Subtabs to navigate specific information like FAQ and Team Directors, a mission statement and description at the top of the page to clearly indicate VIM’s mission, and contact information towards the bottom of the page
Lastly, our team created an interactive prototype through Figma to truly understand how our design ideas would work and if it aligned with our user research. Once our initial prototype was completed, we met with various VIM members to test our prototype and observe how users preferred our redesign to the original website. In our testing we found that members were happy with how the website operated but wanted to see more color. As a result, we added more pops of color throughout the site to highlight our brand identity. Once we changed our website’s user interface, our Editors in Chiefs approved of the redesign and we set off to implement our designs to WordPress.
Final Outcome: Releasing the Redesigned Site (Spring 2021)
We released our redesigned website in Spring 2021 and received numerous compliments on the usability and aesthetic of the site. However, due to some complications with our blog posts, we had to take it down and correct some issues with the data in the site. We released the site again in the Summer of 2021 and planned to improve the site’s accessibility in Fall 2021.
What I Learned
Initial releases are never perfect, but with a drive to think outside of the box and fix user problems you can continue to improve the website
User testing after creating prototypes and redesigns is so important as it provides UX Teams with important insight on the strengths and weaknesses of your site
Others teams/departments may not understand your decisions, remember to always advocate for the user and show higher ups the reasoning for your design choices. Empathize with not only your users, but where others teams are coming from, help them understand the importance of creating an unforgettable experience for the user.