UX Researcher
VIM Website Redesign
A redesigned a student-run student organization’s website using the PARC principles and a research process.
Timeline
July 2023 – Dec 2023
Tools
Figma, Miro, SquareSpace
What was the problem?
The VIM leaders felt the website failed to align with VIM’s vision and the UX team identified numerous issues with its design principles.
My Role & Process
As the UX Director, I redesigned the website using PARC principles alongside my Co-Director during the summer months. During the semester, I led a team of six to develop a research plan for the new design.
PHASE 1
1. Define
Scoping with VIM Leadership
They are seeking a sleek and modern design that embodies a chic aesthetic, aligning more closely with the organization’s identity and values. This updated look should convey professionalism, sophistication, and a sense of forward-thinking innovation to better represent their brand.
Informal Interviews
I conducted informal interviews with students to gain insights into the users' perspectives.
"I love VIM's content, but the website doesn't reflect the high quality of the magazine."
​
"Exploring VIM's website should feel as inspiring as reading their magazine, but right now, it lacks that inviting appeal."
​
"I’d rather look at VIM’s social media. Their website could benefit from being more user-friendly.”
2. Analyze
Competitive Analysis
We explored other websites that exemplify this style, carefully analyzing the elements they execute effectively to understand best practices and successful design approaches.
Vogue's website navigation is the digital embodiment of its chic brand image. Anyone imagining the site would expect nothing less than a minimalist, yet bold aesthetic that speaks directly to the trends and culture of the high-fashion world.
The Harper's Bazaar website presents a navigation experience that one would envisage as both classic and contemporary, delivering content with the grace and poise that the brand has been celebrated for over the years.
PARC Principles
We first had to analyze the VIM website.
Proximity:
Related components were spaced too far apart, making it difficult to recognize them as a cohesive group.
​
Alignment:
Corners and edges were misaligned with the grid layout, disrupting the overall structure and cohesion.
​
Repetition:
Layout patterns were inconsistent, text headings varied in size across pages, and the design lacked overall predictability.
​
Contrast:
Lacks sufficient color contrast, making the page difficult to view and navigate.
3. Design
Using the research that we gathered, we created a website using SquareSpace with a chic and functional layout.
PHASE 2
4. Empathize
Personas
We started by creating three different personas based on our user groups. This helped us understand our users wants, needs, and desires.
User Testing Interviews
Next, I asked each member to conduct a user testing interview. We concluded with 8 user testing interviews, learning more about the specifics of the functionality and usability of the site.
5. Define
Affinity Diagram
We analyzed qualitative data using an affinity diagram on Miro, identifying six key themes.
6. Ideate
Wireframes
Based on our identified themes, we created wireframes to solve them key issues.
7. Implement
In order to implement the solutions promptly, I delegated tasks to each member of the team. We were able to implement 6 new solutions that allowed for a better user experience.
CONCLUSION
