Week 7: Wireframe – Web

The purpose of this assignment was for us to practice developing wireframe mockups for prototyping websites.  We were supposed to concentrate on the interaction design, and to implement a prototype of the site. This wireframe would be considered a blueprint for a developer to follow to actually implement the site. The purpose of creating the prototype, as usual, was to be able to evaluate the preliminary design with user testing.

Deliverables:

  • Interactive Wireframe
  • Blog post

In time for next viagra uk sale the 1979 season, Candlestick was converted back to grass. This action boosts nitric oxide viagra cialis proben – a chemical that increases blood circulation. Today, getting ED treatment is not levitra generic cheap so much available in the open market; it is available in powder, tea, oil and other forms to gain major health benefits. This is an US base company. cialis sample

The Assignment

The first phase of the assignment was to analyze an existing website, and understand its current content and functionality. We were then tasked to redesign it, incorporating new requirements for the site.

The result of our redesign effort is limited to the content inventory, information architecture, site navigation, and general screen layout. We were not expected to produce a complete working site, nor did we have to attempt a rebranding with a new visual identity, nor even create visual elements for the site.

We were give the choice of working on the UW dub  website or a website of our choice. I chose to work on a redesign of my portfolio site as it is always a work in progress.

Our professor provided the following framework to as a guide for the process:

  • Analysis
  • Content Inventory
  • Information Architecture
  • Layout Template
  • Skeleton Wireframe
  • Interactive Wireframe

It was suggested that we use Axure for this assignment, although we could use another tool if we could produce all of the required deliverables.

The Process

For this assignment I followed the following steps for my portfolio redesign:

  • Analysis
  • Competitive Analysis
  • Requirements
  • Information Architecture
  • Sketches
  • Wireframes

Analysis

In reviewing my current site there are a few things that require attention.

  1. The project pages are too comprehensive.
  2. A picture is worth a thousand words – less text more images.
  3. Choose your images wisely.
  4. Videos can say a lot in a short period of time.
  5. Use narrative to .

Some questions I have going into competitive analysis are:

  1. To embed the resume or not to embed the resume, that is the question.
  2. How are others showing their process?
  3. How are others showing their contribution to projects?
  4. What is the right amount of content and how is it layed out on the page?

Content Analysis

  • About page
  • 5 documented projects
  • 1 link to prototyping blog
  • 1 project completed by not published
  • 2 projects not completed or published

Competitive Analysis

I looked through some lists of the best UX Design portfolios for some ideas of content organization, information architecture, and appropriate animations. I found two articles that were particularly helpful.

side nav

From reviewing these portfolios I was able to discover some ideas for improving mine. The image below is taken from the portfolio of Marc Thomas.  I like his use of icons for navigation, but most of his interactions are distracting.  I also like that he has a page devoted to process, however I don’t like is that he doesn’t include any examples of his work.  Marc also used a clever side navigation for the process that I really liked.

http://mrcthms.com/process

http://mrcthms.com/process

Another great example of content organization and showing process was Dan Lea who created a fictitious product to demonstrate his process. The content is strong, the process is well defined, and the reader gets a strong sense of his design thinking process.

EdLea

A great example of using interactions and images with few words to show the process is LaiYee Lori’s portfolio.  I would love to see it off Behance, but otherwise it’s one of the better portfolio’s I found.

Example 2

As far as embedding the resume, I didn’t find many examples of this to note. My question is still unanswered.

Requirements

After conducting the competitive analysis, I created a few requirements for my the website:

  • Must be responsive
  • Must clearly show my design process
  • Must incorporate a blog
  • Must incorporate more video and images
  • Must be easy to read and scan for information
  • Must include contact information

Information Architecture

I started with a list of pages that I wanted to include in the final website.

  • About
  • Portfolio
  • Process
  • Resume
  • Blog

From this list I created a flow diagram for the website’s information architecture as show below.  I wanted to create more than one way to get to the portfolio projects, so I am considering including thumbnails of projects on the home page as well as have larger images on the portfolio page.

portfolio flow diagram

Sketches

Below are some sketches of the layout for a few of the pages.

IMG_1910 IMG_1911 IMG_1912

IMG_1914

IMG_1915 IMG_1916 IMG_1917 IMG_1918 IMG_1922

Wireframes

I created the wireframes in Axure as it was suggested.  The learning curve for Axure was steeper than I anticipated.  I was able to create the layout and content fairly quickly, but learning how to include the desired interactions proved to be extremely time consuming.  As a result, unfortunately the footer in this layout is static. I also ran out of time to finish polishing the wireframe and hope to work on that a little more by adding headers in consistent locations and making the page dimensions consistent.

home

portfolio

Process

About

Here is the link to the interactive wireframe.

Analysis and Next Steps

I did a brief user test with a fellow student.  Below are some of the comments he made about the layout:

  • “I really like the separate page for process”
  • “I don’t like how the header cuts off on the sides.”
  • “I like the idea of an elevator pitch on the home page.”
  • “Your headings are inconsistent.”
  • “I really like your mouse over interaction on the portfolio page.  It’s a great idea to provide a brief description of the project.”

I am still undecided about embedding my resume.  I also am undecided about whether to make a carousel of projects on the home page, or video of an elevator pitch.  I think wither option could be a strong way to lead off the portfolio.

Next Steps

  • Fix headers
  • Recreate header to be responsive
  • Fix footer to auto adjust to content size
  • Create consistent page width
  • Finish creating the interactions

After fixing these minor things and finishing the interactions, I would like to conduct some user testing with industry professionals before I move on to the visual design and content creation.  This would provide valuable feedback on the content layout and usability.