Your SlideShare is downloading. ×
3D UI & UX for Innofactor
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

3D UI & UX for Innofactor

696
views

Published on

3D UI and design-concept for a web-based shopping experience in association with Aalto University and Innofactor Plc. Beginning with Design Research, the concept for the UI was developed through Use …

3D UI and design-concept for a web-based shopping experience in association with Aalto University and Innofactor Plc. Beginning with Design Research, the concept for the UI was developed through Use Cases, Testing, Wireframes, Information Architecture and Layout Guidelines. This project was targetted towards showcasing the best of Finnish design for the Helsinki World Design Capital 2012.

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
696
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Good Morning!Design Fest ProjectFindings, Methods & Outcome for UI & Interaction Design - Dipti Sonawane & Lily Diaz
  • 2. Creative Workshop To create a 3D shopping EXPERIENCE We chose 3 fantasy stories to brainstorm our 3D world in 3 groups composed of the team designing the service. Themes • Alice in Wonderland - Topsy-turvy • Beauty and the Beast - Wandering • Ali Baba - TriggersConfidential - Not for public distribution Design Fest - UI & Interaction Team 2
  • 3. Workshop Analysis Group - Alice in Wonderland Globe Go back Enter Exploring OUT IN Places Points 1 2 3 ArtifactsConfidential - Not for public distribution Design Fest - UI & Interaction Team 3
  • 4. Workshop Analysis Group - Beauty and the Beast World Market Place Places Points 1 2 3Confidential - Not for public distribution Design Fest - UI & Interaction Team 4
  • 5. Workshop Analysis Group - Ali Baba Places Limited Points Pickup Scattered in one space Entrance Initialization Security/ of the system Personalization Picking up of By clearing out artifacts Password/Snake previous step Danger/ Challenge Points Sellable / Scattered in one space Non-sellableConfidential - Not for public distribution Design Fest - UI & Interaction Team 5
  • 6. Benchmarking - 3D Web Interfaces Navigation System - Kiosk / Carousel Sensisoft Visual Representation • 5 different kiosk in 5 different city settings • Surrounding is subtly animated and features city landmarks • Visual look depends on the city • Culture of the city is represented through http://www.sensisoft.com the kiosk designConfidential - Not for public distribution Design Fest - UI & Interaction Team 6
  • 7. Benchmarking - 3D Web Interfaces Navigation System - Panorama Coca Cola Visual Representation • Panoramic view of multiple rooms containing many artefacts • Real photographs of the rooms stitched http://www.theverybestofcocacola.com/home together as panoramic view • Buttons are used to interact with the artefactsConfidential - Not for public distribution Design Fest - UI & Interaction Team 7
  • 8. Quantitative Analysis of Navigation Systems Linear - 2/13 Analysis of 13 benchmarked 3D web interfaces (including the above websites) Node based - 4/13 Panorama - 4/13 Kiosk / Carousel - 3/13Confidential - Not for public distribution Design Fest - UI & Interaction Team 8
  • 9. Elements of 3D web Interfaces Summary of benchmarked websites realistic feel being in a space adds more value social lively more engaging 3D Interfaces dimension liveliness depth action motion colorsConfidential - Not for public distribution Design Fest - UI & Interaction Team 9
  • 10. Benchmarking - 2D Shopping Interfaces Analysed 12 Shopping Websites Parameters we looked at included: • Display of Products • Details of Products (Info) • Shopping procedure and experience • Shopping-cart display on the interface • Shopping-cart PageConfidential - Not for public distribution Design Fest - UI & Interaction Team 10
  • 11. Mood Boards / Collage Finnish Brands and History - Arabia, Iittala & Fiskars productsConfidential - Not for public distribution Design Fest - UI & Interaction Team 11
  • 12. Mood Boards / Collage Finnish Brands and History- Karevala Koru, Artek, Magisso & Marimekko productsConfidential - Not for public distribution Design Fest - UI & Interaction Team 12
  • 13. Social Media Research Facebook questionConfidential - Not for public distribution Design Fest - UI & Interaction Team 13
  • 14. Resulting Concepts / Themes Theme 1 summer nights, snow, ice, bright, fresh air, cold, Climatic Associations Theme 2 islands, trees, water, fresh air, lakes, mushrooms, reindeers Nature Theme 3 sunshine, cold, happiness, sadness, bright, bleak, black, gray, Emotions/Feelings white, silence, honesty, starkConfidential - Not for public distribution Design Fest - UI & Interaction Team 14
  • 15. Rough Sketch - 1 Islands as MetaphorConfidential - Not for public distribution Design Fest - UI & Interaction Team 15
  • 16. Rough Sketch - 2 Pier as a MetaphorConfidential - Not for public distribution Design Fest - UI & Interaction Team 16
  • 17. Final ConceptConfidential - Not for public distribution Design Fest - UI & Interaction Team 17
  • 18. User Testing 5 users tested the following parameters of the prototype: Navigation 3 point click to the product (whether the user can navigate from one place to other) Usability Whether the user was able to use the service, was it intuitive, and whether they would like to use the sevice or not Functionality Whether any of the active functions were confusing or easy, and if there are any other functionalities the users would like to have in the service.Confidential - Not for public distribution Design Fest - UI & Interaction Team 18
  • 19. Video of UserConfidential - Not for public distribution Design Fest - UI & Interaction Team 19
  • 20. Analysis of the User Tests • The visual style and concept was well received by the users • Navigation is very intuitive • Users do want to use this service • The event area needs more relevant content to be understood and used correctly by the users • There is no need for any special introduction to the service • The idea of a carousel used to showcase products was appreciated a lot • This sketch of the service was very easy for users to navigate and didn’t take too much effort or time for them to get used to • Shopping, sharing and logging in were easy and clearConfidential - Not for public distribution Design Fest - UI & Interaction Team 20
  • 21. Incorporating User and Other FeedbackConfidential - Not for public distribution Design Fest - UI & Interaction Team 21
  • 22. Incorporating User and Other FeedbackConfidential - Not for public distribution Design Fest - UI & Interaction Team 22
  • 23. Incorporating User and Other FeedbackConfidential - Not for public distribution Design Fest - UI & Interaction Team 23
  • 24. Wireframing Wireframes for the system includes: • The Concept of the service • The Graphic User Interface (GUI) of the service • Basic User Interaction • Basic Navigation of the system • Encorporates the User Feedback from the User Tests • Defines a Visual Vocabulary (representation) of the system • Functionality and Usability of the overall service • Templates for further designing of the LayoutsConfidential - Not for public distribution Design Fest - UI & Interaction Team 24
  • 25. Wireframes - Home PageConfidential - Not for public distribution Design Fest - UI & Interaction Team 25
  • 26. Wireframes - Product Page (Info-tab)Confidential - Not for public distribution Design Fest - UI & Interaction Team 26
  • 27. Front-end System DiagramConfidential - Not for public distribution Design Fest - UI & Interaction Team 27
  • 28. Collaboration All through the process, we collaborated with: • Game Design Team to refine and integrate their concept into the system. • System Developer to evaluate concept ideas for fit with backend feasabilities. • Sound Design Team for integration of background and interface sounds into the system. • 3D Design Team for development and iteration of visual style.Confidential - Not for public distribution Design Fest - UI & Interaction Team 28
  • 29. Collaboration with 3D for Visual StyleConfidential - Not for public distribution Design Fest - UI & Interaction Team 29
  • 30. Collaboration with 3D for Visual StyleConfidential - Not for public distribution Design Fest - UI & Interaction Team 30
  • 31. Collaboration with 3D for Visual StyleConfidential - Not for public distribution Design Fest - UI & Interaction Team 31
  • 32. To Sum Up! What the system offers. Guiding Factors • Process, Analysis, Testing, Iteration and Specifications. Flexible UI • Allows for adaptibility to future developments through the development of flexible and light UI. Efficiency • At any point, the user is only 3 clicks away from the product. Creativity • The store is reimagined as a magical fantasy-land that is reminiscient of Finland. • New ways to use a combination of 2D and 3D graphics in the UI. • Enhancement of the shopping experience through sound and game elements.Confidential - Not for public distribution Design Fest - UI & Interaction Team 32
  • 33. Thank You!Design Fest ProjectFindings, Methods & Outcome for UI & Interaction Design - Dipti Sonawane & Lily Diaz