VIM MAGAZINE
Website Redesign
OVERVIEW
Founded in 2010, VIM is an entirely student-run fashion beauty & lifestyle publication at Michigan State University that publishes a bi-annual print magazine, along with two bi-annual digital issues. Starting in Fall 2019, I helped found the UX Team to make sure that our member's work is recognized in the best possible way. During this redesign, I...
-
Targeted projects within my "Writing, Rhetoric, Cultures, & Community" and "Researching Experience" courses to practice and review ethical research skills.
-
Applied a human-centered design approach to enhance the user experience of the magazine's website, showcasing dedication and passion for improving usability of the site.
-
Implemented Figma designs through Wordpress to create the online source for style at Michigan State University.
SURVEYS
I created a Google Form to VIM members to get a better understanding of their reasoning for joining and what motivates them to continue to work for the organization. The survey also served to discover how VIM members communicate and their frustrations within the community.
-
Distributed a short online survey to my team, general members, and team directors.
-
Gathered demographic information about the members and insight on their personal goals.
-
The most complex input I received was regarding the spirit of the community. There were contradictory opinions when asked if the VIM community was considered inclusive or exclusive.
RHETORICAL ANALYSIS
I studied various digital artifacts with multiple methods of critical analysis to understand VIM's current strategies in presenting their identity and informing the site's users. The analysis built the case that VIM members are united in their efforts to prepare themselves for the fashion industry, through the formation of a credible organization that showcases talent and allows students the opportunity to experience work that translates to the real world.
COMMUNITY PROFILE
I built a profile to get a better look into VIM's interactions by writing up an analysis of their interactive Instagram stories, PowerPoints presented at general meetings, their popular Pinterest page, email chains, and an interview with one of the previous Editors-In-Chief. All of this was used before advancing to the next step: the personas.
PERSONAS
These personas were used as an example when the team decided to create personas together. After the first round of critique, I designed a "persona template" that I submitted to the UX Team Directors. This template was accepted and used so that our individual contributions would produce a cohesive persona deck.
The template considered current and prospective VIM members':
-
Motivations
-
Behaviors
-
Needs/Frustrations
AFFINITY WALL
-
Feedback was taken from contextual inquiry and think-aloud usability testing conducted by the directors.
-
We rearranged all the information into clusters that would allow us to then prioritize the needs for solutions
-
We added our own notes to each cluster that stated the overall problems that would need solutions
-
Our major concerns were the structure of the blog, clarification of VIM's mission, accessibility of the digital issues, and information regarding contacts and communications.
IN DEPTH TAKEAWAYS
-
There were mixed views about the organization of the tabs and subtabs - some found it easy to navigate and some found it confusing or overwhelming
-
Participants wanted to see more color in the site and found the current color scheme "dull", "boring" and "bland"
-
Participants wanted to see more inclusion of film content on the website such as behind the scenes work
-
Participants found VIM's mission and what VIM does unclear, as well as wanted to see more about what the teams at VIM do
-
Participants wanted an easier way to contact and subscribe to VIM
WIREFRAMES
-
Completed competitive analysis of other student fashion organizations
-
Each member presented four low fidelity wireframes of the Home, About, Issues, and Blog pages
-
Collaborated on what changes were appropriate based on the personas, affinity wall, and survey.
-
Break into pairs to focus on one to co-produce one high-fidelity wireframe using Figma
-
Critiqued again before submitting the final wireframes
PROTOTYPES
After the structure of the pages were designed and agreed upon by all team members, we then worked on turning the wireframes into interactive prototypes. The prototypes served as a way to implement interaction design, visual design and realistic examples of content into the design to gain better insight into how users would interact with the pages.
Each page was iterated on in our team meetings where multiple design ideas were presented and discussed among the team.