work samples -> 01

alldocs.com website prototype

Description

To develop a deeper understanding of the applied interface design process – from strategy and research through to implementation and modification - the goal of this project was to develop a fully functional HTML prototype of an ecommerce website using traditional interface design methodologies.

This project was completed in partial fulfillment of the BCIT Applied Interface Design course requirements.

Timeline

August – October, 2007 (six weeks)

supporting documents

Challenge

To develop all project components – company identification and goals statements, competitive analysis, user scenario analysis, website wireframes and site graphical design, low/medium/high fidelity prototypes, and usability testing – within a six-week course timeframe.

To develop a website interface that intuitively guided users through the purchase process for DVD movies and digital download movies equally well.

Execution

Starting from a blank canvas, I initially conducted some research into interesting but not currently well-represented products on the internet. The product had to have the qualities best suited to the online retail channel. I selected documentary films as they are few comprehensive vertical sites (excluding amazon.com) that specialize and cover the market really well.

To capture the hypothetical company’s business model, I created a visual design (logo and colour palette) as well as a summary business description document (mission, goals, target audience, growth potential). Understanding these components shaped the initial client discovery – user scenario identification, competitive analysis, and key website mandatory features and design elements.
The low-fi prototype, initially created in pencil and paper and transferred to OmniGraffle so they could be easily modified and updated, consisted of eight main website pages, including cart checkout pages. I created several mockups of the shopping cart, testing and reiterating the design so that I could effectively achieve a one-page cart checkout process.

The next iterations of the website, from medium to high fidelity models, were influenced and modified by usability testing at each stage. Each set of usability tests was conducted using individuals outside of class and not familiar with the site’s design. A short report was created following each test to document changes and site progress.

The medium-fi prototype, created in Illustrator, was exported to Photoshop and sliced. Images were imported into Dreamweaver to finish the HTML prototype.

Results

The final high-fi prototype was completed in HTML several days in advance of the presentation deadline. I received full marks on the project.

Skills/Technology Used

OmniGraffle
Illustrator
Photoshop
Visual design
Dreamweaver
Strategy & research
Wireframing
Usability testing
Prototyping