1 / 42

Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker

UI DESIGN PROPOSAL. THE NEXT GEN IOS APP FOR AEO. Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker. Introduction. User research and careful design process – mobile app allows users to interact with product Combines original design of the AEO App with some Recommendations

oistin
Download Presentation

Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI DESIGN PROPOSAL THE NEXT GEN IOS APP FOR AEO Caitlin Depp | Daniel Hanson |Kristen Kuron | Lamont Parker

  2. Introduction User research and careful design process – mobile app allows users to interact with product 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

  3. iOS7 GUIDELINES • We stripped away the user icons and focused on text • 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.

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

  5. RECOMMENDEDDesign Style

  6. RECOMMENDEDDesign 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

  7. RECOMMENDEDCOLOR SCHEME & TYPOGRAPHY • Navy Blue, Whites and Dark Grays (gray scale) • Simple Font Scheme • Helvetica: straight , thin lines • Followed suggestions from user research

  8. USER RESEARCH & TESTING

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

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

  11. HOW DO THEY USE THEIR PHONE • 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

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

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

  14. NAVIGATIONAL & OTHER ELEMENTS

  15. NAVIGATIONAL PAGES • 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). • By creating content on distinct layers, we add depth and flexibility to our design while minimizing clicking and page loads.

  16. IPHONE MOCK-UPSVISUALCOMPOSITIONS

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

  18. Maintained elements in main header and FILTER and SORT buttons • Retained horizontal layout • Maintained color scheme • Changed main navigation to the side and added a “drag” and “pull” option • Switched the placement of product details • Arranged categories differently RECOMMENDEDProduct Display Page

  19. RECOMMENDEDDETAIL PAGE • Many things on this page are kept similar to the current AEO app design • Added a “Hang” button for AE Closet feature

  20. AE VIRTUALCLOSET

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

  22. AE CLOSET NEWSFEED • Shows Items Corresponding to a User’s Saved Tags • Allows Users to Subscribe to Particular Styles and Products

  23. THE AE CLOSETCANVAS PAGE • Allows Users To Create Outfits by Grouping Items Together • Users Can Tag and Share Outfits • Allows Users To Share and Create Fashions Democratically

  24. WHAT’S YOUR STYLE? QUIZ PAGE

  25. WHAT’S YOUR STYLE? QUIZ PAGE • The Style Quiz Is An Interactive User Engage • Purpose To Draw The User Deeper Into The App • Encourage Consumer Consumption

  26. STYLE QUIZ SAMPLE QUESTION

  27. THE STYLE QUIZ RESULTS PAGE

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

More Related