DUB Website Wireframe

Live Axure Share Link

About
Dub is a community at the University of Washington made up of Human Centered Design & Engineering, the Design School, Informatics, and Computer Science & Engineering. Dubs offers weekly seminars featuring various professors from each department discussing a different topic each week. The Dub website is this community’s main source of information. Here, you can view a calendar of events, view recent news, blog posts, projects/research, publications, and a directory of all students/faculty involved.

The design of this website is extremely outdated and many things could be improved, which is why I am doing a redesign for it.

Design Process
First, I created a list of problems of the current Dub website. These included:

  1. Blog posts are old and outdated. The last post was from 4 years ago.
  2. The About page is missing.
  3. The calendar is not done in a visual way and it is not visually appealing.
  4. There is no login page for members to edit their content.

Then, I did some initial wireframe sketches. I did a sketch for each of the pages that I wanted to include. I used this in my next step when I made the wireframes in Axure.

2Home Page/News Page
This is the landing page for the website. My first idea is at the top of the sketch which is a list view of news. But then I decided to make this a tile layout, shown at the bottom of the sketch. When a tile is clicked, it will bring the user to the detailed news page.


1About Page
Because the current site is missing an about page, I added one which can be accessed from the top bar. There is also a side bar with more information if someone wants to join Dub and also a live feed of Tweets related to Dub.

3

Projects Page
This includes a grid layout view of all projects divided up by subject. When a project is clicked, it will bring the user to the detailed page. The detailed page has images and descriptions on the left and the list of contributors on the right.

The current Dub website’s project detail page are inconsistent amongst projects. Some projects list their contributors at the top, and some list them at the bottom. By having the list on the right panel in my design, it eliminates this problem.

5Directory Page & Login Page
The top section of this sketch is the directory page which is just a list of all members of Dub separated by title.

The middle section of this sketch shows what the detailed page would look like for a member.

The bottom section of this sketch is of a popup that would appear when the user clicks ‘Login’. After the user logs in, the top bar will say ‘My Account’ and ‘Logout’.

4

User Account Page
If a user is logged in, this is the page they can access my clicking on ‘My Account’. Here, there is a list of all of the content the user has control over. This includes their own projects, publications, research, as well as their profile page.

After this, I created annotated wireframes in Axure. The example below is of the home page which is the newspage.

home_news

After creating the wireframes, I made the wireframes interactive. My interactive wireframe can be viewed by following this link: Live Axure Share Link. All of the interactions are not available on my prototype, which is why I included annotations to tell how it would interact.

Analysis
After usability testing on one participant, I found a couple of things I could improve on. One is to include a sidebar on the home page to feature the upcoming seminar for that week. By doing this, the most important news as well as seminar will be easily accessed. Another thing was add all of the possible interactions. The participant kept wanting to press on the carousel news feed.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s