Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker.

Slides:



Advertisements
Similar presentations
Research Methods and Usability Guidelines for Ecommerce Web Sites Mary Czerwinski Microsoft Research Note: Many of these slides came from a Keynote address.
Advertisements

HTML Tags and Their Functions
Chapter 3 – Web Design Tables & Page Layout
PRIORITIZING WEB USABILITY. Introduction  How the Book Study Was Conducted  Tested 69 users ages Broad range of job backgrounds and web experience.
Chapter 13 Web Page Design Studio
ORGANIZING THE CONTENT Physical Structure
M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.
Style guide exercise Symbian 3 Nelli Kihniä, Hung Nguyen.
Theming for V12 Revolution
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Sriram DRUPAL GCI What is a drop down menu? A drop down menu is a menu of options that appears when an item is selected with a mouse. The item.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Microsoft PowerPoint 2013 An Overview.
Microsoft Excel 2013 An Overview. Environment Quick Access Toolbar Customizable toolbar for one-click shortcuts Tabs Backstage View Tools located outside.
Navigating Your Website. What is Navigation? Website navigation is what helps visitors find information on your site. Navigation can be images, links,
Creating a Poster It is easier than you think! 1.
1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Website Evaluations Kelsey Newkham Leanna Orsak Billy Safa.
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Website Content, Forms and Dynamic Web Pages. Electronic Portfolios Portfolio: – A collection of work that clearly illustrates effort, progress, knowledge,
Getting Started with Dreamweaver
DESIGNING FOR IOS. iOS uses the following themes:  Deference. UI helps users understand and interact with the content, but never competes with it.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
NAVIL GONZALEZ ANDREA CANTU MAGALY LUNA Heuristic Evaluation.
State Term Contract & State Purchasing Agreement Website Innovative Ideas towards Improving Your Buying Experience DMS State Purchasing IT Team.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
E-commerce usability guide provides guidelines and advice for implementing easy to use e-commerce websites. It focuses on online catalog/selling functionality.
IFacion Design Iteration Iteration 1 Iteration 2 Iteration 3 From blogs to popular Youtube stations, young women who have a passion for fashion find different.
© 2012 The McGraw-Hill Companies, Inc. All rights reserved. word 2010 Chapter 3 Formatting Documents.
1 Word Lesson 3 Formatting Documents Microsoft Office 2010 Fundamentals Story / Walls.
Introduction to Web Page Design. General Design Tips.
Macromedia Studio 8 Step-by-Step MACROMEDIA FIREWORKS 8 Project 2: Experience Bank Logo.
Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,
Creating a poster is easier than you think.
Database Applications – Microsoft Access Lesson 7 Designing Custom Reports Updated 11/13 27 Slides in Presentation.
Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
Elements of Website Design. Homepage ● first page of the website ● website title ● general introduction ● authors or creators information ● date updated.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
Chapter 4. Learning outcomes This Chapter will partially cover the learning outcome No. 2 i.e. Design presentations that use animation effects. (L02)
WEBSITE REDESIGN PROPOSAL Daniel Sterling (818)
Web Site Development - Process of planning and creating a website.
Positioning Objects with CSS and Tables
Assignment 1: Explain, Review and Discuss the use, features and benefits of Websites Chosen client’s business area: Retail.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
Unit 13 – Website Development FEATURES OF WEBSITES.
Learning Aim A.  Websites are constructed on many different features.  It can be useful to think about these when designing your own websites.
COMP 143 Web Development with Adobe Dreamweaver CC.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
GroupMap Starter’s Guide Think Better Together Plan, brainstorm, discuss and prioritise for action. © GroupMap Pty Ltd |
Microsoft Excel 2007 Noris Bt. Ismail Faculty of Information and Communication Technology Tel : (Ext 8408) BCOMP0101.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Create and edit web pages 4
Section 7.1 Section 7.2 Identify presentation design principles
Database Applications – Microsoft Access
Fixed Positioning.
CSC 581: Mobile App Development
The poster title goes here and here
UTILIZING AE + AERIE APP: AN IN-STORE EXPERIENCE
12 Ways to Visualize Your Slides Using PowerPoint Design Elements
Presentation transcript:

Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker

INTRODUCTION User research and careful design process – mobile app allows users to interact with product User research and careful design process – mobile app allows users to interact with product Combines original design of the AEO App with some Recommendations Combines original design of the AEO App with some Recommendations We have a proposed new feature that combines social-media, customizable outfits, and style tipping We have a proposed new feature that combines social-media, customizable outfits, and style tipping

iOS 7 GUIDELINES We stripped away the user icons and focused on text We stripped away the user icons and focused on text We utilized the iOS 7 themes of deference, clarity, and depth We utilized the iOS 7 themes of deference, clarity, and depth We embellished with care while remembering that the content and functionality are at the core of our design decisions. We embellished with care while remembering that the content and functionality are at the core of our design decisions.

1. Emphasizing text and content over icons. 2. Creating a simple and consistent color scheme that reflects the AE brand. 3. Maximizing white/negative space around UI elements which helps make the overall APP feel efficient and focused. 4. Example: HOME PAGE OUR PROCESS OUR PROCESS

RECOMMENDED DESIGN STYLE

–Emphasize American Eagle Brand –Stuck To Styles Of The Current App –Less Confusing –Already Introducing New Section –Two Eagles –Current App Conventions –Flat Layouts According To IOS Guidelines

–Navy Blue, Whites and Dark Grays (gray scale) –Simple Font Scheme –Helvetica: straight, thin lines –Followed suggestions from user research RECOMMENDED COLOR SCHEME & TYPOGRAPHY

USER RESEARCH & TESTING

USER RESEARCH Done Early In Our Process Done Early In Our Process Testing Attitudes and Preferences Testing Attitudes and Preferences Survey and Card-Sorting Survey and Card-Sorting

45 people participated 76% people between the ages of % people between the ages of WHO DID WE SURVEY DO THEY SHOP ONLINE 65% of the people say they shop online 20% say they frequently buy clothes online.

67% of the people have an IPhone 74% of the people say they use their smart phone for MOST tasks (including surfing the web and other applications) 66% use Facebook HOW DO THEY USE THEIR PHONE

60% Frequently Or Regularly Shop At AE HOW DOES AE FIT IN 76% say shopping online 57% say finding a store 40% say looking for style tips If they had an app for AE what would they use it :

Done later in our Process Done later in our Process Testing Compositions and Ideas Testing Compositions and Ideas Morae, Card-sorting, and Interviews Morae, Card-sorting, and Interviews USER TESTING

NAVIGATIONAL & OTHER ELEMENTS

NAVIGATIONAL PAGES Designing our overall navigational scheme to be flat, task-oriented, content-centered & experience driven Designing our overall navigational scheme to be flat, task-oriented, content-centered & experience driven Subtle animations such as our Pop- Out side-panel and dynamic menus (Ex. See Shop Page Widget). Subtle animations such as our Pop- Out side-panel and dynamic menus (Ex. See Shop Page Widget). By creating content on distinct layers, we add depth and flexibility to our design while minimizing clicking and page loads. By creating content on distinct layers, we add depth and flexibility to our design while minimizing clicking and page loads.

IPHONE MOCK-UPS VISUAL COMPOSITIONS

RECOMMENDED HOME PAGE Retained elements in the main heading Retained elements in the main heading Retained color scheme Retained color scheme Replaced search button with a button for site navigation Replaced search button with a button for site navigation Made the navigation horizontal and in table format Made the navigation horizontal and in table format Stayed within iOS 7 guidelines Stayed within iOS 7 guidelines

RECOMMENDED PRODUCT DISPLAY PAGE Maintained elements in main header and FILTER and SORT buttons Maintained elements in main header and FILTER and SORT buttons Retained horizontal layout Retained horizontal layout Maintained color scheme Maintained color scheme Changed main navigation to the side and added a drag and pull option Changed main navigation to the side and added a drag and pull option Switched the placement of product details Switched the placement of product details Arranged categories differently Arranged categories differently

RECOMMENDED DETAIL PAGE RECOMMENDED DETAIL PAGE Many things on this page are kept similar to the current AEO app design Many things on this page are kept similar to the current AEO app design Added a Hang button for AE Closet feature Added a Hang button for AE Closet feature

AE VIRTUAL CLOSET

AE CLOSET INTRODUCTION Bundle Of Three Features that Encourage User-product Interaction Bundle Of Three Features that Encourage User-product Interaction Reflects popularity of social media and interactive apps Reflects popularity of social media and interactive apps

AE CLOSET NEWSFEED AE CLOSET NEWSFEED Shows Items Corresponding to a Users Saved Tags Shows Items Corresponding to a Users Saved Tags Allows Users to Subscribe to Particular Styles and Products Allows Users to Subscribe to Particular Styles and Products

THE AE CLOSET CANVAS PAGE Allows Users To Create Outfits by Grouping Items Together Allows Users To Create Outfits by Grouping Items Together Users Can Tag and Share Outfits Users Can Tag and Share Outfits Allows Users To Share and Create Fashions Democratically Allows Users To Share and Create Fashions Democratically

WHATS YOUR STYLE? QUIZ PAGE

The Style Quiz Is An Interactive User Engage The Style Quiz Is An Interactive User Engage Purpose To Draw The User Deeper Into The App Purpose To Draw The User Deeper Into The App Encourage Consumer Consumption Encourage Consumer Consumption

STYLE QUIZ SAMPLE QUESTION

THE STYLE QUIZ RESULTS PAGE

CONCLUSION New Trends of Social Media and IOS 7 Guidelines Added to Existing Content New Trends of Social Media and IOS 7 Guidelines Added to Existing Content Product-Oriented Interactivity may Increase Brand Loyalty and Purchasing Habits Product-Oriented Interactivity may Increase Brand Loyalty and Purchasing Habits