The Equilibrium Website

A website redesign to improve web presence, website UX
and research journal branding.

My Role

UX Designer

Usability Researcher

Web Developer

Context

Personal Project

June 2018 - Oct 2018

Tools Used

Personas

Sketch

HTML, CSS, JS


The Problem & Opportunity

I had the opportunity to redesign The Equilibrium's website to improve usability and increase the journal's online presence. The original website was hosted with Google Sites, which meant customization difficult and design was limited to specific themes. I utilized HTML, CSS, and JavaScript to rebuild and redesign the journal's website.


User Interviews

I interviewed 6 undergraduate students and 4 instructors (i.e. professors, lecturers, etc.) because they were the journal's main stakeholders. I found 4 themes:

1. Get the Quick & Dirty

Students and instructors are busy people! Providing quick links can be helpful.

"I want to be able to easily find what I want right from the start. I don't want to have to scroll somewhere to find the information I'm interested in."

2. Why Should Someone Care?

What makes this journal important or interesting? To a student? An instructor? A random visitor?

"I think the mission of the journal is really important and it provides an amazing opportunity to get student work out there. "

3. How do You Get Involved?

Provide some call to action. If someone likes the journal, how can they get involved? Be specific and have multiple ways to get to the pages that detail how people can get involved with the journal.

"I first heard about a publishing opportunity at The Equilibrium through a professor. I only wanted to know where I can submit my research to be considered."

4. Is This Journal Reputable?

People want to know whether or not this journal is something worth looking into or getting involved with. Provide evidence of past success and/or of works in progress.

"I've never heard of The Equilibrium before. But apparently, they already have 4 complete journals out! It was amazing to see student work come together into an impressive product."


Personas

In order to include all of the journal's target users, I created personas to identify each group's goals, need, and attitude. These personas helped guide my designs to ensure they addressed user needs.

Alex

Freshman student
Looking to get involved
Interested in research

Alex is looking for a way to get involved in an on campus organization. He found university resources and attended club fairs, but he still doesn't entirely know which one to join.


Goals

  • Find out what an organization does and has to offer a member
  • Know who to contact/where to go if he has questions

Frustrations

  • Needing to really dig for information he's looking for

Erika

Senior student
Visual Arts major
Trying to get published

Erika wants to publish her honors thesis research. She's looking for a on campus journal that isn't just for science majors. She just wants to know what she can do to get thesis published.


Goals

  • Find out if she is eligible to publish her research at this journal
  • Understand the submission and editorial processes

Frustrations

  • Not having a transparent policy and/or clear steps to follow

Devon

Professor
Biology Department
Very busy

Devon likes to keep up with student opportunities to pass along to her students. She's very busy with teaching and her own research lab, so she doesn't have much time to really read entire websites.


Goals

  • Learn the quick facts of an organization from the website
  • Be able to pass along resources/info to her students

Frustrations

  • Not having a website link to give to people so they can look

Wireframes

I used Sketch to create low-fidelity website wireframes of the website to visualize layout, information placement, and outline the information architecture.

Additionally, I put the wireframes in an interactive prototype and tested the website design. I asked 5 people (ranging from students, staff, and faculty) and observed what they did when given an objective. These lightning test rounds helped validate my deisgns, so I proceeded to develop the website pages using HTML, CSS, and JavaScript.


Homepage

The homepage was the biggest opportunity to improve branding and usability because it is the first page that visitors see when they go on the website. The old website homepage had minimal information as to what The Equilibrium was. The only content was an events calendar that was empty for more than 90% of the time, which meant that the rest of the page was empty.

In the redesign, the landing section of the homepage is a maroon geometric background in order to create a stronger brand image. Additionally, I included quick links below the journal name for users to easily access the information they want: what the journal is, what it does, and how to get involved with the journal. In addition to quick links, there are short information blurbs to give more information about each section.


Application Pages

Submitting a manuscript to publish is different from applying to join the journal's editorial board. Thus, I changed the site's architecture. I created two separate pages: one "Submit" page for authors to learn how to submit their research for consideration and one "Join" page for students who want to join the journal.


Publication Pages

These pages were the biggest opportunity to expand our readership and show people what we do. The original page only had links to the online readers. However, there was a lot of new information to include and we wanted the website to be a hub for all journal publications.

I included sections for the online readers, our involvement with eScholarship, and individual articles in order to be a showcase of the journal's work, the organization growth, and increased involvement with the UC San Diego and UC system community.


Usability Testing

I conducted a series of usability tests to ensure that the redesign was addressing the pain points and original problems. I tested with 9 people total, 3 people in each of the persona categories I identified. I asked them to accomplish tasks (e.g. find out how to submit a research piece, how can you contact the editorial board, where can you find past issues, etc.) and to think aloud when attempting to complete the tasks. During the task, I observed and noted their mouse movements and their spoken words. Additionally, I asked them debrief questions as well.

2/3 of participants clicked on the homepage quicklinks

The other 1/3 went to the gobal navigation bar.

All participants could find the journal contact information

... but it should be way more obvious.

Easy to use and navigate

"Definitely couldn't get lost in this website."

"I like it, but I don't love it."

Navigation and information hunting was easy, but the visual aesthetics could be better.


Next Steps

I think one of my biggest weakness as a designer, and also based on the usability tests I performed, is visual design. So, I will be revisiting the aesthetics of the website and find ways to make the visual design more appealing.

Additionally, the journal is growing! As more issues are published and the journal becomes more established, policies will change. As the journal changes, the website will need to change and address any different or additional user needs as well.


Reflection

Redesigning an entire website (even if it's a site that only has a few pages) took a lot of time. But, I found that I not only enjoyed the UX side of this project, but also the coding and development of a website from scratch. This experience forced me to really understand the nuances of the HTML, CSS, and JavaScript. This process was a practice of trial, error, and Googling, which has, ultimately, made me a better designer.


View my other projects!