vim magazine.

the source for style at michigan state university.

screenshots of redesigned site

about vim.

VIM is an entirely student-run fashion, beauty & lifestyle publication at Michigan State University. They publish a bi-annual print magazine, along with two bi-annual digital issues. The staff is compromised of students interested in advertising, graphic design, photography, finance, marketing, public relations, video production, social media, event planning, professional writing & editing, and more.

The semester I created this project is also the semester I worked as a print designer for the magazine. My spreads can be found on my graphic design page.

Deliverables:

Personas

Wireframes

Prototype

Live Website

 

Tools:

Balsamiq

Figma

Visual Studio Code

Github

Deliverables:

Personas

Wireframes

Prototype

Live Website

 

Tools:

Balsamiq

Figma

Visual Studio Code

Github

identifying the problems.

Something I thought about was when I first visited the VIM website my sophomore year was- it wasn’t very user-friendly and hadn’t changed since. Some issues I decided I wanted to address was:

1. Does the layout of the website make sense to both new users and existing ones?
2. Are users able to achieve their goals easily when navigating the site?
3. How do I make the site both usable and visually appealing enough to make the users crave more?

I then looked into the purpose of VIM and from there, developed personas to generalize the types of users that come to the site and their needs, as well as took note of design choices from competitor sites.

persona 1

PERSONA 1
Current club members

marie claire logo
persona 2

PERSONA 2
Prospective club members

vogue logo
persona 3

PERSONA 3
Team members

cosmopolitan logo

wireframes.

After researching a bit, I came up with a layout for each of the pages I wanted to recreate: the homepage, the about page, a blog post page and a category page. and Here’s a couple wireframes I made of a homepage and an example blog post page. I found that wireframing makes the process of creating a website a lot easier, as it gives me a visualization of where I want things to go without having to pull actual images and create actual text.

wireframes of redesigned site

page prototypes.

homepage prototype
article page prototype
about page prototype
category page prototype

reflection.

A few things changed from the wireframes due to my limited knowlege of HTML & CSS at the time. However, it was my first big web design project and I’m very proud of all the knowlege I’ve gained from it. A lot of things I incorporated, I learned on my own through YouTube tutorials and forums like StackOverflow. I was even able to teach myself a bit of Javascript!

If I could change anything, though, I would conduct real research on real users so that I could get accurate information on the needs and wants instead of just assuming. Then from there, do user testing and redesign as needed.

get in touch.

I love opportunities to connect and strengthen my design skills and build new skills along the way. So, feel free to shoot me an email!

E     john6238@msu.edu

Made by Anaija Johnson in WordPress. 2020.