Area 51
Area 51 was an iconic mid-century modern furniture store on Capitol Hill that recently closed. Area 51 was known for their eccentric owners, exceptional and rare furniture, and a a very basic website.
Project Background
This project was an individual one-week lean UX sprint to redesign the Area 51 website user experience and user interface.
Experience Gained
During this project I gained experience in researching a client that I had no personal access to, discovering user demographics to track down and interview users, auditing an existing website, performing a real-world competative analysis, analyzing convergent and divergent user behaviors, constructing personas from user research and demographic data, card sorting for information architecture, building out a site map, wireframing, building an interactive prototype and usability testing.
Research Methods
AREA 51 A
BETTER HOME FOR YOU
http://www.area51seattle.com
UXDI PROJECT 2
Area 51 Seattle is a local Seattle business with a showroom for new & vintage furniture with a retro bent,
including mid centurymoderninspired
pieces. The business model is very much based on customer
service, pricing, and keeping it local employing
local staff and supporting our community.
Their website hasn’t been updated in a couple of years, and they are looking at streamlining their current
ecommerce platform to reflect more modern web best practices. Highest priority will always be given to the
facetoface
contact that they have with their customers, but management recognizes that there are plenty of
opportunities to better support the local community by creating a more engaging online shopping
experience, beyond what they currently offer.
We will pretend that some prioritization work has already been done with the client. We know that the
website:
MUST
● Have clear ways of locating specific products
● Support a single page for each product that can be linked to directly
● Have an efficient means of purchasing one or more products
● Steer customers toward popular products
● Establish the brand and its points of difference
● Allow customers to contact the business (including to request a product not otherwise stocked)
● Reward loyalty for Area 51 repeat shoppers
SHOULD
● Allow customers to browse products related to their current selection
● Allow customers to read and write reviews of a product
● Provide information about the store's heritage
● Reward loyalty for repeat customers
COULD
● Allow customers to shop by major furniture types
● Allow for multiple images per product
● Adapt the experience appropriately across desktop and mobile
WON'T (right now)
● Offer advanced wizardlike
'product finder' tools
● Offer online activities unrelated to purchasing products
THE CHALLENGE
You will be creating a wireframe prototype for a website. Think through the process and design
the experience of shopping online for these types of products, designed to meet the goals of
users (as represented by personas) and the business and brand goals of the company. You will
need to:
1. Create a sitemap
● Using the provided products as a guide, organize the site into logical and meaningful
categories that help customers to find what they need, and understand what they have
found.
2. Design flows for the major user journeys
● A recently relocated Seattle resident is looking for new furniture for their studio
apartment, specifically, a midcentury
modern sofa.
● A resident is looking for inspiration for a gift for his brother who loves retro furniture and
could use a sidetable.
● An interior designer needs to put in an order for some pieces that work for her local client
who loves retro furniture, to be delivered on site to her client within 2 weeks (something
that she does on a regular basis).
● OR create three flows of your own design based on interviews
Remember, the user flows should map the actions the user takes (not the computer), including
any binary (yes/no) decisions they must make.
3. Create grayscale wireframes for each page required to illustrate the user
journey
Wireframes communicate relative priority and layout of page elements to provide a general
sense of how a page may look. Your wireframes should include:
❏ Global elements (appear in the same place on all pages), such as global navigation,
masthead branding, footer navigation and information
❏ Common elements (appear contextually on individual pages), such as secondary
navigation, page titles, breadcrumb navigation, pagination controls
❏ Custom elements (appear uniquely on specific page templates), such as product
photos and descriptions, callstoaction,
pricing and sizing options, forms, related content
Specific wireframes will depend on the user journeys you design, but you should
at least include:
❏ Home page: Establishing the site proposition (including maintaining the existing
functionality), brand personality, and global navigation, and offering new and returning
users enticing callstoaction
to tempt them further into the site.
❏ Product category page: Showcasing all available products in a category (such as 'retro
sofas') and allowing for filtering of results where appropriate.
❏ Product detail page: Describes a specific product and provides options to purchase.
❏ Shopping cart: Details the products a user has chosen to purchase, allows for some
editing of those products, and for the user to proceed to the checkout
process.
❏ Checkout
pages: A linked series of formbased
steps focused on successful
completion of the transaction, including capturing personal details, card details, delivery
options, and account creation.
4. A 'clickthrough'
prototype to test with at least 4 users
Using your prototyping tool of choice, link the wireframes together to allow a test participant to
complete the given user journey scenarios.
You will be creating or researching:
● Personas
● Sample products: The client has posted most of their products on their current website.
This is not an exhaustive list of everything they sell, but should suggest the most
appropriate categorization for the website. (Use your imagination to fill out categories
you create with further appropriate products).
● Brand collateral
By the end of the project you will have:
❏ Case study presentation: telling the story of your design process and showing
iterations of your work along the way
❏ Design specification: clientready
documentation of your annotated wireframes, user
journey flows, personas, and sitemap
❏ Clickable prototype : based on your wireframes
P2 SAMPLE
TIMELINE
DAY 1
● Organizational Research
● Project Summary (With UX Vision Statement)
● Domain Research
● Competitive/Comparative Analysis
● Reach out to potential participants and make an email list
DAY 2
● User Journeys
● Task Analysis
● Concept maps
● Content inventory
● Write User Research Screener (include availability)
● Send Screener to email list
● Consent Form
DAY 3
● Context Scenarios
● Questions for Interviews
● User Interviews
● Affinity Diagram
● Card Sort study
DAY 4
● Storyboard
● Site maps
● Navigation System
● Personas
● Sketching
● Update project summary
DAY 5
● Sketches
● User flows
● Write usability test plan
● Send out screener
● Update consent form
● Heuristic Evaluation (of your sketches)
DAY 6
● Test paper prototype
● Gather data, results
● Make updates to prototype
● Turn into wireframes
● Start higher fidelity using more complete wording and information
○ Layout
○ Design Modules
○ Design Patterns
DAY 7
● Continue to work on higher fidelity (keep it grayscale)
● Write test script, plan
● Send out (same) screener
● Make prototype
DAY 8
● Consent form
● Test prototype
● Gather data, results
DAY 9
● Make updates
● Make Presentation
DAY 10
● Present presentation