User Experience Design

Yesterday, I was considering the structure for my i-doc experience. After several drafts, I settled on a wireframe that is achievable.


The documentary will begin with a landing page that introduces The Handbag Project and the concept of ‘unpacking’ gender theory. As the site will operate largely through audio-interviews and self-exploratory clicking, there may be a short audio introduction on the landing page to briefly explain the concept.

landing page.jpg
A mock up of the landing page


From here, the user reaches the home-page. It consists of three bags visible on the screen with the offer to unpack them. I want the design here to be simple and crisp. I still haven’t decided on the aesthetic of the presentation, but perhaps when hovering over each bag, they unzip, open or a shown from a different angle.

A mock up of the landing page

The home-page has a menu bar down the bottom with links to other supplementary pages, such as ‘about’, ‘participants’ ‘contribute’ and ‘credits’. It also displays a Facebook link and the project’s hashtag, which are further explained under the ‘contribute’ page.

Clicking each bag leads to a new page that examines its contents. Once finished, the user can return back to the homepage.

There is a loose linear structure to each bag, and their positioning would cause the viewer to work intuitively from left to right. However, it does not matter which order the user takes, as the linear narrative is contained within the pages that follow.

These three pages will be unique in what they display but similar in design. The user will hover over the articles within the bag, and certain items will be clickable and invite the user to listen to short audio interviews given by the owner of the bag. These interviews will answer questions that ‘unpack’ the reasons why women carry certain items with them, as well as the versions of femininity they carry in their bags. Potentially, a list of the items will be included as would be the case in a museum.

Potentially, the item clicked upon can increase in size and HD quality during the interview, so that the user can examine it more closely while listening to the speaker. I often find that listening to an interview while having nothing to engage the eye can cause the user to become restless, so this will entertain them for the short duration of the audio clip, while adding another layer of interactivity.

items mock up.jpg
Mock up of page

The entire user experience will be straightforward and easy to navigate. The grid-like formation will be intuitive to follow and the monochromatic colour scheme will reinforce the empirical nature of the visual data represented.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s