Timeline
January 2020 - May 2021
The Team
2 UX Directors (including me)
8 UX Researchers/Designers
2 Editors in Chief
2 Marketing Directors
2 Blog Directors
Deliverables
Qualitative research
Contextual/usability interviews
Affinity wall
Personas
Sketches
Wireframes
Prototypes
Published website
Tools
Zoom
Mural
Google Slides
Figma
WordPress
Intro
VIM Magazine is a student-run fashion magazine organization dedicated to being "the source for style" at my university. Me and another member established the UX Team at the start of 2020 with the goal of improving the user experience of VIM's website.
Problem
- How does the website need to be redesigned, if at all?
- What organization of the navigation bar best makes sense for the target audiences?
- What information should be placed on the homepage in order to best represent VIM's purpose?
- How can information for learning about VIM, contacting VIM, and subscribing to VIM's emails be most accessible?
- How should the pages that display magazines and blog posts be organized in a way that makes sense?
— COLLECTING THE DATA
User Interviews
In order to understand what users wanted to see in VIM's website, we needed to collect data from real users. Our first step was to determine which types of people to recruit to get this data from. As a team, we agreed that the types of people that visit VIM's site and would likely provide useful information to us were:
- General and prospective members of VIM
- Directors of VIM
- People outside of VIM who are interested in or a part of other fashion magazines
Methods
The method of collecting data that we conducted was interviews with a combination of contextual inquiry and think-aloud usability testing. The structure of the interview was:
- Allowing the participant to freely roam the website as they wish for approximately ten minutes or until they seem finished, while the interviewer occasionally inquires about their actions. This was included in the interview in order to gain insights about what motivations the participant has when going on the website.
- Having the participant complete four main tasks with subtasks in order to understand how well the current website is structured and in what ways it needs improvement.
— ANALYZING THE DATA
Affinity diagram
To get an understanding of the data we collected from the interviews, our team decided that affinity diagramming would allow us to best visualize the data, identify themes and patterns, and generate design ideas.
Key findings
Some key takeaways we got from analyzing the data we collected were:
- 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 who were already familiar with the site, such as directors and team members, tended to navigate the tabs easier than those who were not already familiar
- 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
Overall, participants found the website usable but there are aspects of the website that can be made better so that it is easier and more enjoyable to use.
— UNDERSTANDING THE USERS
Personas
Our team made four personas based off of the data from the affinity wall to better understand what audience we are designing the website for and identify how different audiences may interact with the website in different ways. These personas include the first time VIM viewer, the general member, the team member, and the director.
Persona: Director
Though I oversaw all personas, I specifically worked on the Director persona. Motivations, behaviors, needs and frustrations were drawn from the patterns identified from the affinity diagram. For example, "Needs efficient ways to contact other directors and view upcoming events" came from the "I am confused regarding email communications" and "It is important to me that the website is a place for me to interact with my team members" themes on the affinity diagram.
— DESIGNING THE STRUCTURE
Sketches
After determining the main groups of users that visit and spend time on VIM's website, it was time to design the structure of the website's main pages. I began this process by sketching out some ideas informed by the insights about users gained from the personas and affinity diagram. Sketching allowed me to play around with concepts and do trial-and-error of multiple potential features.
— DESIGNING THE STRUCTURE
Wireframes
After convening with my team, comparing all versions of everyone's pages together and determining what the basic outline of each page should include, specific pages were assigned to different groups of team members to design more fleshed out structures of each page. In addition to overseeing everyone's wireframes, I worked primarily on the homepage and specifically designed the top third of the homepage including the header. To gain a better idea of the design of the top third of the homepage, I created a lo-fi wireframe:
Behind the Wireframe
The wireframe of the header and top portion of the homepage was informed by the variety of sketches both my fellow team members and I created that most closely matched with what our users told us in our interviews.
For example, multiple interviewees informed us that they wanted an easier way to understand what exactly VIM was and what it stood for. Making sure users understand what VIM is about when they come onto the website is not only important to address because it is merely a desire among some users; without a clear grasp on what VIM stands for, we lose out on a lot of engagement and potential new organization members!
The solution: To ensure that all users can clearly understand what VIM is, I inserted a brief "What is VIM?" section near the top of the homepage with a button to "Learn more about VIM" which users can click on to view more details if they so choose. This section was placed near the top of the homepage to make it very easy to find, and it was kept brief to make it easy to skim the necessary information one needs to understand what VIM is about.
— MAKING THE STRUCTURE INTERACTIVE
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 our members.
Reflection
This project was an amazing first experience to lead an end-to-end UX project for an organization I have so much passion for. I learned so much about collaboration, teamwork, time management, and conflict management throughout this process. I also loved the opportunity to strengthen my UX research, UX design, interaction design and visual design skills.
What I would improve on
There are certainly aspects of this project that I would go back and change after shipping the design:
- Validate the prototype through user testing to make sure the design meets user needs and usability standards
- Focus more on information architecture to better decide placement of content such as the navigation menu
- Dabble in quantitative research, to measure the efficacy of our designs and/or current website through the statistical analysis of page clicks, bounce rates, and more
- Focus more on mobile-first responsive design, to make sure that the users who view the website on their phones and tablets can do so with as much ease as those who view it on their desktops
- Test for accessibility, to ensure that the website is easy to use and navigate by everybody regardless of disability status
Unfortunately, I was not able to delve into the above areas due to time constraints and lack of experience. Both myself and my other team members were students who were still learning UX principles and processes at different stages, and we were all very busy with coursework outside of this organization project.
Moving forward, all of the above items I was not able to devote attention to in this project will be prioritized in my next projects. I am of the opinion that things like accessibility and mobile-first responsive design, in particular, are not merely "nice-to-haves" but necessities that cannot be forgotten about in products and software that a variety of different people use and on different platforms.