What a User Wants: Redefining Website Design

Posted September 4th, 2012 at 1:22 pm.

 

This post is by Mirella Deocadiz (BMC ’14), who interned at Human Network Labs this summer as a Tri-Co DH summer fellow.

Redesigning the Human Network Labs website fell under my responsibilities as the  marketing intern. Armed with a basic knowledge of website design as well as excitement at the prospect of doing something creative, I did some research into winning website designs, and came up with a color palette and basic visual concept. While not a design aficionado, I believed in my ability to create a visually pleasing website that reflected the image that the company wanted to present.

My design for the homepage currently live

My Initial Mock Up

But this bubble soon burst upon the realization that my content was unorganized, and that in my efforts to create something “pretty”, I hadn’t gone past the surface of what award-winning website designs offered. Going back through some of the examples that inspired me, I started taking notes on my experiences as a user. I found each of the websites to be easily navigated and intuitive. I found sleek, simple interfaces. I found them to be interactive. I found that the content was well-organized.

Upon the realization that I had not even considered these key characteristics, I went back to the drawing board. I scrapped what I had created and started fresh. Even though I was mixing a website builder (and my rather elementary coding “skills”) to build the site, I struggled with the concept of managing content.  I began by “paper” navigating through the website  and thinking about  how to make my menus and submenus more intuitive. With the large amount of content that my boss and I determined necessary for the site, I put everything into categories. From there, I created a site map and started organizing the web pages in that fashion.

 

The Drawing Board

Before even touching the aesthetics of each of these pages, I went through them and imagined myself as a user by asking questions: was this intuitive? Did this page make sense here? Should this page be under a different category or split into separate pages? Do I even need this information?  It seemed nitpicky and frustratingly slow. But I worked until I was happy with how each page was linked into the greater “ecosystem” of the site. The key objective of this stage in my work was to really consider whether the user was able to find the information that they needed.

With the navigation sorted out, I could focus on the relationship between the content and design: a concept that I learned from Kevin McGilivray’s Re:Humanities 2012 presentation, “Designs of Meaning.” McGilivray spoke on the importance of having a design that communicated the same things that were being communicated through the text. With this idea, I carefully considered each page and the type of information that was to be included on it. A lot of my content existed as basic text.  In order to consider the relationship between content and meaning, I started visualizing information in different modes: images, videos, and diagrams. This made me recognize that rather than including images to make the site aesthetically pleasing, it was more important to consider how the presentation and design of content could provide a way for the user to gain more information.

Diagram of Workflow, Instead Of A Description

I designed and redesigned the website several times. Each time, I refined the navigation a little more and I thought of alternative ways of presenting the information. I thought harder about the site’s users and the questions that they might ask when navigating through the website. And I realized that the aesthetic design of the website, while important, always came last. Designing for the web expands the definition of “design”; it is no longer based in just the visual aspect.

Working with different technologies to produce a website design (Hey, I’m a multimodal scholar!)

 


Filed under: Fellows,Mirella Deocadiz,News,TriCoDH Fellows by jenrajchel

Comments are closed.