WEBSITE REDESIGN ABE S OF MAINE

Size: px

Start display at page:

Download "WEBSITE REDESIGN ABE S OF MAINE"

Edwina Charles
5 years ago
Views:

1 WEBSITE REDESIGN ABE S OF MAINE LEANN CARTABONA ACADEMY OF ART UNIVERSITY DECEMBER 13, 2015

2 INTRODUCTION Abe s of Maine is a camera, electronics, and appliance store. I have completely redesigned their website: This presentation examines why Abe s of Maine s website needed a redesign, my entire redesign process and the end result: a more user-friendly, aesthetically pleasing website.

3 WHO IS ABE S OF MAINE? Abe's of Maine opened in 1979, and has been a family owned and operated business. Originally, Abe s of Maine began selling cameras and throughout the years expanded to sell other electronics, such as video equipment, televisions, and home appliances. After several decades of operating out of Maine and Brooklyn, the company moved its headquarters to Linden, New Jersey.

4 WHY THE REDESIGN? Abe s of Maine is a family owned business, creating a heavy reliance on customer service in their showroom for sales. The website, however, fails to transcend the high level of customer service provided in the showroom. Rather, the website is inundated with unorganized content, the navigation is confusing, and as a result, creates an unpleasant user experience.

5 THE USABILITY ISSUES: LAYOUT Let s look at the current website: overwhelming amount of text Abe s of Maine home page [ photos are too large too many different colors no white space, content is crammed These layout issues result in an absence of hierarchy of content. Ask yourself, what should I click on first? The options are too plentiful because of the numerous Quick Links ( shop, shop now ) in addition to the main navigation, and the overwhelming amount of text and images.

THE USABILITY ISSUES: NAVIGATION Main Navigation Gets lost and overlooked because of the white, small text (and because of the abundance of content surrounding it) Category names should be easier for

6 THE USABILITY ISSUES: NAVIGATION Main Navigation Gets lost and overlooked because of the white, small text (and because of the abundance of content surrounding it) Category names should be easier for interpretation redundant navigation categories Photography could be easier read as Camera Other gives no insight to the user about its content Side Navigation Redundant (these links are in the main navigation!)

7 COMPETITORS Best Buy Apple Amazon Walmart e-bay B&H Photo & Video Adorama

TARGET DEMOGRAPHICS 18 50 years old middle to upperclass homeowners career or hobby in the arts (photography, film) purchase high end products REDESIGN OBJECTIVES To determine and clarify the website

8 TARGET DEMOGRAPHICS years old middle to upperclass homeowners career or hobby in the arts (photography, film) purchase high end products REDESIGN OBJECTIVES To determine and clarify the website s hierarchy Organize and style navigation categories to make it easier for the user to locate and utilize Create a simpler, less cluttered design that is both highly functional and aesthetically appeasing.

9 PHASE I: WORKFLOW ANALYSIS WORKFLOW ANALYSIS To determine how to redesign the navigation of I created workflow diagrams for the following user tasks: PURCHASING A PRODUCT CHECKING OUT 3. SEARCHING SALE ITEMS

10 PHASE I: WORKFLOW ANALYSIS WORKFLOW ANALYSIS The workflow diagrams determined my navigation content and number of linked pages for my redesign. The next step was to design basic wireframes adhering to the workflow diagram.

11 PHASE II: WIREFRAMES WIREFRAMES After determining the workflow, I designed basic wireframes for six (6) pages for the desktop (1024 pixels): 1. homepage 2. product category page 3. product page 4. shopping cart page 5. check out page 6. search page. homepage product category page

12 PHASE II: WIREFRAMES I shopping cart page check out page search results page product page

PHASE III: RESPONSIVE SCHEMATICS RESPONSIVE SCHEMATICS: MOBILE &

13 PHASE III: RESPONSIVE SCHEMATICS RESPONSIVE SCHEMATICS: MOBILE & TABLET I created the desktop wireframes, but what about the tablet and mobile view? These devices are now increasingly used for online shopping over desktops and laptops! Building from the desktop, I built responsive schematics for the tablet and mobile devices. Desktop (1024 pixels), Tablet (768 pixels) and Mobile (480 pixels) HOMEPAGE desktop tablet mobile

14 PHASE III: RESPONSIVE SCHEMATICS PRODUCT CATEGORY PAGE desktop tablet mobile SHOPPING CART PAGE desktop tablet desktop PRODUCT PAGE tablet mobile mobile

15 PHASE III: RESPONSIVE SCHEMATICS desktop CHECK OUT PAGE tablet mobile desktop SEARCH RESULTS PAGE tablet mobile

16 PHASE IV: SCHEMATICS II SCHEMATICS II The next phase of the redesign was to actualize the responsive schematics, using Abe s of Maine content, and implement design elements. I chose two typefaces for my redesign: Montserrat (Bold, Regular) for main navigation, headings, buttons, and some product descriptions. Josephine Sans (Light, Light Italic, Regular, SemiBold, Bold, Bold Italic) for product descriptions, filters, and in the header and footer. To keep the design and layout clean, I chose to use minimal colors: white, black, shades of gray, and shades of blue

17 PHASE IV: SCHEMATICS II FOR DESKTOP [1024 PIXELS] KEY: 1. Homepage (with drop-down main navigation menu) 2. Product Category Page 3. Product Page 4. Product Category Page 5. Product Category Page 6. Product Category Page

18 PHASE IV: SCHEMATICS FOR TABLET [768 PIXELS]

19 PHASE IV: SCHEMATICS FOR MOBILE [480 PIXELS]

20 PHASE V: USABILITY & A/B TESTS USABILITY & A/B TESTING To move forward with my redesign, I needed to do further usability testing on my Schematics II (prototypes) design. In the software program, Axure, I built my prototypes to include all of the product images, information, prices. I then created two versions of each prototype (version A and version B) for all three devices (desktop, tablet, mobile) and made them interactive to test basic functions and conduct a usability & A/B test using Survey Monkey [ to get obtain high level results. TEST GOALS To determine the ease of use of the check out process, sign in process, navigation menus, and overall functionality of the site. I also wanted to discover a more efficient way of finding products and browsing products based on the users design preferences. TEST PARTICIPANTS Participant #1: Name: Mark Moshtaghi Age: 31 Gender: Male Occupation: South Eastern Tap Technician Participant #2: Name: Abby Deering Age: 30 Gender: Female Occupation: Social Media Coordinator Participant #3: Name: Jeff Luttrell Age: 42 Gender: Male Occupation: Carpenter Participant #4: Name: Katherine Gottfried Age: 32 Gender: Female Occupation: Restaurant owner

21 PHASE V: USABILITY & A/B TESTS USABILITY & A/B TESTING USABILITY TASKS & SCENARIOS Task #1: Complete a product purchase Test case scenario #1: Your mother has "new camera" on her Christmas list, specifically, the Sony a77 II DSLR Camera. The only place you can purchase the camera is Abe s of Maine s website. Purchase the Sony a77 II DSLR Camera from the website and receive it by Christmas. Task #2: Sign up for Newsletter Test case scenario #2: You want to buy a brand new TV for your new apartment. However, you are on a tight budget and the TV you want is just above your reach. Scan the home page and get the discount you will need for this purchase. Task #3: Use the Contact form and/or links in Footer navigation Test case scenario #3: You ordered a new dishwasher and need it for your party next weekend. Find out when the A/B TESTS: VERSION A & VERSION B Versions A & B of each device had variations of the following: Page layout, form design, filter choices, button sizes, text content, color choices

22 PHASE V: USABILITY & A/B TESTS PROTOTYPES EXAMPLES: VERSIONS A & B [DESKTOP homepage] VERSIONS A & B [DESKTOP checkout]

23 PHASE V: USABILITY & A/B TESTS USABILITY & A/B TESTING RESULTS TEST RESULTS The participants found both positives and negatives about both prototypes, but overall, Version B of the desktop, tablet, and mobile better for functionality, but found Version A had a better layout and aesthetic design. Version B had better form design on the check out page, newsletter sign up in the footer, but participants liked Version A s dropdown contact box on the homepage rather directly going to the Contact Page when you clicked it. Participants liked the Titles (wording) and color use on Version A better than Version B. CHANGES MADE FOR FINAL DESIGN Desktop: - Check out page: added forms to for user log in so that users can skip the shopping cart page - Home page: added a colored box around Best sellers & Featured Items to create a contrast between these items and the New Items above them - Added Order Complete Page & Contact Page Tablet: - Navigation Menu: added DEAL to drop-down navigation under Cameras + Lenses - Product Category Page: changed the Category colors to clarify which category is highlighted. - Added Order Complete Page & Contact Page Mobile: - Navigation Menu: added DEAL to drop-down navigation under Cameras + Lenses - Product Category Page: changed the Category colors to clarify which category is highlighted. - Added Order Complete Page & Contact Page

24 PHASE VI: FINAL DESIGN FOR DESKTOP [1024 PIXELS] FINAL WEBSITE DESIGN HOMEPAGE HOMEPAGE with drop-down navigation

25 PHASE VI: FINAL DESIGN FOR DESKTOP [1024 PIXELS] PRODUCT CATEGORY PAGE PRODUCT PAGE

26 PHASE VI: FINAL DESIGN FOR DESKTOP [1024 PIXELS] SHOPPING CART PAGE CHECK OUT PAGE

27 PHASE VI: FINAL DESIGN FOR DESKTOP [1024 PIXELS] CONTACT PAGE CONTACT PAGE with visible drop-down options

28 PHASE VI: FINAL DESIGN FOR DESKTOP [1024 PIXELS] ORDER COMPLETE PAGE SEARCH RESULTS PAGE

29 PHASE VI: FINAL DESIGN FOR TABLET [768 PIXELS] HOMEPAGE HOMEPAGE with drop-down navigation

30 PHASE VI: FINAL DESIGN FOR TABLET [768 PIXELS] PRODUCT CATEGORY PAGE PRODUCT PAGE

31 PHASE VI: FINAL DESIGN FOR TABLET [768 PIXELS] SHOPPING CART PAGE CHECK OUT PAGE

32 PHASE VI: FINAL DESIGN FOR TABLET [768 PIXELS] CONTACT PAGE CONTACT PAGE with visible drop-down options

33 PHASE VI: FINAL DESIGN FOR TABLET [768 PIXELS] ORDER COMPLETE PAGE SEARCH RESULTS PAGE

34 PHASE VI: FINAL DESIGN FOR MOBILE [480 PIXELS] HOMEPAGE HOMEPAGE with drop-down navigation

35 PHASE VI: FINAL DESIGN FOR MOBILE [480 PIXELS] PRODUCT CATEGORY PAGE PRODUCT PAGE

36 PHASE VI: FINAL DESIGN FOR MOBILE [480 PIXELS] SHOPPING CART PAGE CHECK OUT PAGE

37 PHASE VI: FINAL DESIGN FOR MOBILE [480 PIXELS] CONTACT PAGE CONTACT PAGE with visible drop-down options

38 PHASE VI: FINAL DESIGN FOR MOBILE [480 PIXELS] ORDER COMPLETE PAGE SEARCH RESULTS PAGE

39 CONCLUSION By changing the layout, navigation categories, color scheme, buttons, text, and links, the newly redesigned is now more efficient, user-friendly, and has a clean, sleek design to captivate users and provide a positive shopping experience

Assignment 3 User Research Report Document

Assignment 3 User Research Report Document Online Clothing Store By Chris Kazanjian, Loren Smith, Jess Hartig, and Jeremiah Lyons DESCRIPTION OF USERS User Audience Male and Female Ages typically ranging