UX DESIGN FINAL PROJECT



Similar documents
TIPSHEET WEB SURVEY TIPS

3 Ways Your Web Design Can Better Connect You to Your Audience

presented by Maxmail

Haslingden High School

How to Build a SharePoint Website

Evaluation Form for Etrade.com

Joomla Article Advanced Topics: Table Layouts

NEPA/DO-12 Web Based Training Design Document

Client Questionairre. Website Design Checklist

Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business

Business Analytics Enhancements June 2013

DESIGN. Basic Principles of

How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For

After you complete the survey, compare what you saw on the survey to the actual questions listed below:

Contents. Downloading the Data Files Centering Page Elements... 6

Instructional Technology, Educational Foundations and Leadership

DRUPAL WEB EDITING TRAINING

Working with the Ektron Content Management System

DISCOUNT DEALER PROGRAM

How to create pop-up menus

Carbine Design. Carbine Design. Validation and Design Guide

Report Card Template Navigating Techniques

Hello. What s inside? Ready to build a website?

Web Design - Part 2. Topics. More web design: Page design: Contents Non-textual elements Common web design issues

Aviva. Mobile Style guidelines v1.0

Cactus Commerce ~ Expert Usability Review of High Profile e Commerce Web Designs

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

Microsoft Office 2010: Introductory Q&As PowerPoint Chapter 1

Webropol 2.0 Manual. Updated

Joomla! 2.5.x Training Manual

QUICK START GUIDE FOR CLUB WEBSITES

WEBSITE DESIGN CONSIDERATIONS

Web Developer Jr - Newbie Course

GENERIC AGENCY STATEMENT OF WORK. Website Redesign Project Generic Company

Terminal Four (T4) Site Manager

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

Designing a Logo. Design 1

1.0. Target Market Ecommerce Analysis

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

Textiles Arts and Crafts

Microsoft PowerPoint 2010 Computer Jeopardy Tutorial

User Guide January 10

Getting Started with WebSite Tonight

NDSU Technology Learning & Media Center. Introduction to Google Sites

Creating a website using Voice: Beginners Course. Participant course notes

starting your website project

Microsoft Office PowerPoint 2013

Allied Marketing Storefront Guide

Joomla! Templates Explained

MICROSOFT OUTLOOK 2010 READ, ORGANIZE, SEND AND RESPONSE S

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

User Guide. Chapter 6. Teacher Pages

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Designing & Writing for the Web

Personal Portfolios on Blackboard

Setting Up Your Online ecommerce Shopping Cart

A quick guide to setting up your new website

Lesson Plan. Course Title: Web Technologies Session Title: Web Site Planning & Design

TheWebStyleGuide. Because you have nothing... if you don t have style. Web Communications we ve got style.

GUIDE: How to fill out the Excel spreadsheet Introduction There is a total of 31 fields Purpose of this guide General Notes: Very important:

PowerPoint 2007: Basics Learning Guide

Content Builder: How-To Guide

Module One: Getting Started Opening Outlook Setting Up Outlook for the First Time Understanding the Interface...

BRAND REHAB. Four Steps to a Bigger, Better Brand

Google Sites: Site Creation and Home Page Design

Web design build questions to ask new clients David Tully Web Designer/Developer

PowerPoint 2013: Basic Skills

SEARCH ENGINE OPTIMISATION

Overview of Microsoft Office Word 2007

PowerPoint 2013 Basics of Creating a PowerPoint Presentation

Message from Marketing & Creative Services

Microsoft Outlook 2007 Calendar Features

Caldes CM12: Content Management Software Introduction v1.9

collab.virginia.edu UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series

How to Create Pages Editing the Home Page two column layout.

The psychology behind creating successful marketing

Nationwide Marketing Storefront Guide

Document Services Online Customer Guide

Secrets of Online Marketing for Offline Businesses Mini-Course by Chapter 4 Design Secrets Of Websites That Sell

Intellect Platform - The Workflow Engine Basic HelpDesk Troubleticket System - A102

Edline Manual Design Guide Version: September 2011

WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT

Microsoft PowerPoint 2010

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

Creating an with Constant Contact. A step-by-step guide

Planning for your new web site

Edline Manual Design Guide Version: November 2011

Using JCPS Online for Websites

Catholic Archdiocese of Atlanta Outlook 2003 Training

This process contains five steps. You only need to complete those sections you feel are relevant.

State of Nevada. Ektron Content Management System (CMS) Basic Training Guide

Penn State Behrend Using Drupal to Edit Your Web Site August 2013

Web Design Foundations ( )

Microsoft Publisher 2010: Web Site Publication

MICROSOFT OUTLOOK 2011 SEND AND RESPOND TO S

Add an E-Commerce Catalog to your Website

Microsoft Word Track Changes

Transcription:

UX DESIGN FINAL PROJECT WEBSITE redesign www. sewsimplymonkey.com By Carolyne C. Hao

I m choosing to redesign www.sewsimplymonkey.com because unfortunately, it was one of the worst websites chosen from www.webpagethatsucks.com. So here s a list of questions and answers during my usability test. 1. What strikes you first when you look at this site? It s got a lot of text, a lot of BOLD letter words. It almost defeats the purpose of bolding, as if everything and nothing is important. 2. Does it seem interesting for you to browse? No 3. Why not? It has way too much information. It lacks any structure or organization, a user would get annoyed with the long text very easily and quickly. 4. How do you like the color used on the site? I don t like the choice of color used here at all. It s a very pale yellow against big black bold out words. It s just visually unappealing. 5. How do you like the graphics and photos on this site? I don t like any of the graphics because one they are too small and insignificant, and they are too simple and just too elementary level. As far as the photos, they all are poorly representations of the product this site is trying to sell. The site is not selling monkeys, yet they have pictures of monkeys, instead of emphasizing on the clothes for monkeys. Besides, all of the photos are not aligned or of same size, so again visually very distracting. 6. Is it easy to navigate through the site? No, because its just got too much information and all are on one long page instead of categories or folders. There s so much information that you lose focus and lose any patience to read through all the words. WEBSITES THAT NEEDS HELP Two websites that have very poor design are www.rainbowprimates.net/index. html and www.sewsimplemonkey.com. Both are extremely unappealing with no consistent navigation areas, poor use of color and contrast.. www.rainbowprimates.net/index.html has a pastel purple color background with very light texts and boring fonts with very minimal information about the site, no clear indication of what the page is about. As for www.sewsimplemonkey.com it has an over abundant amount of information crowding the entire page. All you see are paragraphs in BOLD. Both website lacks in any sort of organization, styling or visual excitement. Both lack any types of header/logo, no consistency in navigation area, poor proximity and alignment. Color and graphics are distractive rather than enhancing. For www.rainbowprimates.net/index.html I would first change the overall color and contrast of the site to something more universal and appealing to the general public. Then I would create a header/logo with a menu bar directly under and take out the flashy QuickTime plug-ins. I would organize the content in a more consistent manner and take out the click here for hyperlinks. For www.sewsimplemonkey.com I would create a company logo and make the menu bar horizontal instead of vertical. I would use short paragraphs and bullet points in a consistent matter for fonts and sizes of all meaningful and useful content. The color will be revised to neutral and dark earth tone contrast. Only purposeful graphics will be used to enhance the appearance. 7. What would you change to make it a better site? - create a logo or banner for the company - change the color scheme that would be either soothing or more attention grabbing - reduce the long text and use bullet points - make photos more aligned and uniform sizes - it needs better organization, use grouping or categories - it needs a check out shopping cart - design better graphics - overall use less text on one page

This week, we are tasked to do research on some well-designed websites and learn what makes them great. Two of my personal favorite sites to visit are www.miniusa.com and www.tiffany.com. So I invited my friends as my interviewees as their personas fit within the retailed minded, dedicate certain amount of time browsing and researching on the web, on the look out for new, innovative ideas or products scope of what I am researching on for my redesign project. Even though my friends and I are not likely to be the targeted customers for my redesign website of www.sewsimplymonkey.com, but we are together all on-line retail shoppers, thus it makes sense to look at other websites that does online retail in a brilliant way. Below you will find a summary of the feedbacks we encountered as we browsed Mini Cooper and Tiffany s online sites. COLOR SCHEME DESIGN & INFO For Tiffany s, we immediately loved the clean and elegant look of the layout and the color scheme. The home page and all the associated links had the white background with the signature Tiffany blue surround and all of the dropdown menus have the same color as you hover over them without clicking. The photography of the products is just gorgeous! Every page had a different kind of layout, but there s just enough information to fill the page without crowding it with text and pictures. We all loved that the site fills up the entire screen without scrolling downwards, instead it has a bar to navigate left to right so it maximize the product shots, very well done. On top of retail product descriptions of text and photo and pricing, the site also has a more corporate side to it. We love the information of Tiffany s history, corporate culture and pop culture etc. It showed us stories and definitely captivated our interest and imagination. Overall, Tiffany.com is inviting, informative, user friendly and interactive. We really enjoyed our browsing experience. I used Color Scheme Designer to help in selecting an accented analogic color scheme of orange, beige, pink and complementary of blue. Primary Color: FF7800 BF7330 A64E00 FF9A40 FFB573 Secondary Color A: FFAD00 BF9130 A67000 FFC140 FFD273 Secondary Color B: FF0D00 BF3730 A60800 FF4940 FF7A73 Complementary Color: 028E9B 1E6D74 015C65 35C0CD 5EC4CD For Mini Cooper, we also really loved their color scheme and layout. Although it s completely opposite of the white and tiffany blue, instead its black and grey with white text. It focuses all the color on the actual cars. The visual impact is interesting in a dark and mysterious way that made us very curious. The menu bars were very interactive that the user doesn t necessarily have to click on it before it shows a dropdown of what s behind the tabs. The best thing about the Mini Cooper site was how incredibly engaging and interactive it is with the user. When you want to build a customized Mini, the site gives you all the possibilities with real color, parts, specs and pictures and it updates once you make a selection. It is very easy and friendly but at the same time, captures interest and made us want to see more and more. This ultimately is a very successful design that it makes the visitors want to explore and maybe end up making a purchase. Again, we loved this site and wished there are more websites like this.

WIRE FRAMES COLOR WEB COMP

PERSONA RESEARCH Name: Mary-Jo Shaffer Gender: Female Age: 57 Marital status: Divorced Lives: Lincoln Nebraska Income: $-$$ Occupation: school cafeteria lunch lady CELLPHONE & ICON DESIGN Mary-Jo is a twice-divorced lunch lady currently living in Lincoln, Nebraska. Her education is high school and she is working at the same school where she graduated. Mary-Jo takes a lot of pride in her independence. She loves craft and small furry animals. She often shops at weekend farmer s market and county fairs; she s also a frequent Wal-Mart shopper. With very limited experience on the internet, Mary-Jo has never done any online shopping. Key goals & behaviors: The website must be easy to navigate Online shopping be very simple Availability on stock Fast delivery Possible FREE shipping Customer service line open 24/7 Attitude to Technology Very little experience Afraid of computer breaking down Online shopping NOT reliable Key Drivers Going out to family reunion or interest groups Key Goals and Needs I need to know they have free shipping or return just in case the cloth don t work out I need to have someone to answer my questions right away when I place my order Pain Points Anxiety level would rise when customers like Mary-Jo experience any issues during and after her online shopping. It is crucial that premium customer service is provided when these occasion arise. SewSimply MONKEY