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.

1. Good Morning!
Design Fest Project
Findings, 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 - Triggers
Confidential - 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
Artifacts
Confidential - 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 3
Confidential - 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-sellable
Confidential - 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 design
Confidential - 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
artefacts
Confidential - 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/13
Confidential - 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
colors
Confidential - 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 Page
Confidential - Not for public distribution Design Fest - UI & Interaction Team 10

11. Mood Boards / Collage
Finnish Brands and History - Arabia, Iittala & Fiskars products
Confidential - Not for public distribution Design Fest - UI & Interaction Team 11

12. Mood Boards / Collage
Finnish Brands and History- Karevala Koru, Artek, Magisso & Marimekko products
Confidential - Not for public distribution Design Fest - UI & Interaction Team 12

13. Social Media Research
Facebook question
Confidential - 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, stark
Confidential - Not for public distribution Design Fest - UI & Interaction Team 14

15. Rough Sketch - 1
Islands as Metaphor
Confidential - Not for public distribution Design Fest - UI & Interaction Team 15

16. Rough Sketch - 2
Pier as a Metaphor
Confidential - Not for public distribution Design Fest - UI & Interaction Team 16

17. Final Concept
Confidential - 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 User
Confidential - 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 clear
Confidential - Not for public distribution Design Fest - UI & Interaction Team 20

21. Incorporating User and Other Feedback
Confidential - Not for public distribution Design Fest - UI & Interaction Team 21

22. Incorporating User and Other Feedback
Confidential - Not for public distribution Design Fest - UI & Interaction Team 22

23. Incorporating User and Other Feedback
Confidential - 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 Layouts
Confidential - Not for public distribution Design Fest - UI & Interaction Team 24

25. Wireframes - Home Page
Confidential - 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 Diagram
Confidential - 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 Style
Confidential - Not for public distribution Design Fest - UI & Interaction Team 29

30. Collaboration with 3D for Visual Style
Confidential - Not for public distribution Design Fest - UI & Interaction Team 30

31. Collaboration with 3D for Visual Style
Confidential - 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 Project
Findings, Methods & Outcome for UI & Interaction Design
- Dipti Sonawane & Lily Diaz