Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design practice Project - MSc HCI


Published on


Published in: Design
  • Be the first to comment

Design practice Project - MSc HCI

  1. 1. Portfolio Design Practice MSc HCI-E Student Index Design timeline 02 Observation 03 Ideas Elaboration 04 Idea validation 05 Wireframing 06 Visual design 07 Storyboard 08 Video 09 Thoughts about the process 10 *All the sketches / design artifacts presented were done by the author of the present document.
  2. 2. Design timeline Process for design, define ideas and create a final prototype. W1 W2 W3 W4 September W1 W2 W3 W4 October W1 W2 W3 W4 November Design and iterations Design definitions Visiting Cambridge Validate Ideas Prototype Observation Validate Design Presentation Thoughts about the process: When I just realized about the design process for Design practice course, I proposed to my group the idea to follow a more "LeanUX" process. I did the planning for take advantage of each stage. Trying to have fresh ideas and hypothesis and test it over the weeks. However, the majority of the group was not aware of this "Lean" way to work. Hopefully, in a more design related scenario it will be useful to have a class about agile development and techniques.
  3. 3. Observation ↑ Fig. Early sketches for explore the relationship between the users and their smartphones on the street. Sketches as a exploration tool. PERSONA Source Outcome Personas. Alan Cooper A persona is a way to model, summarize and communicate the research done about people who have been observed. It is an archetype, a nutritious mix of patterns of behavior. “Personas are archetypes built to identify our real users profile, needs, wants and expectations in order to design best possible experience for them”. EDNAResident of MillRoad Was a Teacher She moves through the city by bus She loves movies and watch tv Ability to be surprised WOM capacity Time to spend in cultural stuff Technology WOM Interaction times Fear to be exposed socially Less Less Less Less Less Less More More More More More More “I know you think I’m old- fashioned but I’m quite happy the way I am. I don’t need the internet. I’ve got the radio and the tele and that’s enough for me.” Process for research the users. We did an a deep interview with the stakeholders team at MillRoad. From that experience, we extracted the data and created a Persona in order to define the user. Additionally a series of sketches were useful to determine the future interaction schemes. One insight gathered was: it is difficult to the users to grab the phone, read a Qr code with a specific app, and finally get information or an augmented reality experience. There is too many steps and only will work with a few segment of users.
  4. 4. Ideas elaboration The most difficult part was to define the user model of interaction. Older people will not interact with a complex system. It should be simple to use; easy learn and easy to stop to use. Older people do not interact publicly with their smartphones; they do in a safety environments, they feel exposed using artifacts on the street. Moreover, define a way to educate on the use of the system, was the starting point to define the interaction model and location. User Knows how to interact See others interacting Interact Learn how to Interact ↑Diagram. Model to think the learning process. → Sketch. User steps to interact with the possible design. SKETCHING Source Outcome Sketching User Experiences. Bill Buxton Sketching is a powerful tool. Sketching is an expression of thinking and problem-solving. It is also a form of visual communication, to be more effective with all the workgroups. If Ernest Hemingway, James Mitchener, Neil Simon, Frank Lloyd Wright, and Pablo Picasso could not get it right the first time, what makes you think that you will? — Paul Heckel ↑Sketches was a useful tool to explore the ways to interact with the environment.
  5. 5. Ideas validation During the design process, a few ideas were created by the team. Some of the ideas were discarded for not consider our main persona as an important participant. The team defined the condition of not interact with any device as the most important rule to validate the ideas. The following ideas lasts until the validation session Mix of C-Box & Evaluation Matrix Source Outcome MScHCI Class 5. Lab project. The group defined a few important elements to evaluate the ideas, such the tech feasibility, ways to interact, costs of implementation and innovation. “If at first, the idea is not absurd, then there is no hope for it.” Albert Einstein Tech Feasibility One user Daily use “I have seen it” Users interact Small users target Not fun Affordable Magic Many users One time interaction Wow! new idea Stands alone Huge target Awesome fun! Expensive Augmented reality Time travel Bus proyections We did define and choose the "Time Travel" idea because it represents: 1. A real tech feasibility. 2. Many users interacting with the system 3. A possible interaction each time the user got the bus stop 4. A quite innovative and creative idea 5. Require the users interact with the system 6. It is possible to reach a huge amount of people 7. It is affordable to implement
  6. 6. WIREFRAMING Source Outcome Information Architecture. Morville & Rosenfeld Wireframing it is a design tool, to communi- cate the main elements of the interaction. Also Communicate the flow and relationship between the pages or stages of the system. It shows in simple lines and boxes the size, position and hierarchy of the components. 03 Wireframes 01 Fancy a trip down memory lane? Stand on the blue circle 02 Ladies, raise your right hand Gents, raise your left hand 05 Ladies, raise your right hand 03.1 Ladies, raise your right hand 03.2 Mill Road Project 06 You at the Empire Ballroom, 1950 “She loves me, yeah, yeah, yeah!” The Beatles played here in 1951 04 That's great. You're amazing! ↑ Wireframes on a sketchbook ↑ Wireframes made with Adobe illustrator.
  7. 7. VISUAL DESING Source Outcome The UX Book. Rex Hartson Visual design is the stage of the merge the information of the wireframes with the final look and design guidelines. The team defined a color palette from the original Mill road design website. One of the goals of the look and feel was be related to the actual develop- ments. ↑ Visual design captures.
  8. 8. STORYBOARD Source Outcome MSc HCI-E Class 6. Nicolai Marquardt Storyboard is a practical tool to visualize a sequence of events related to the design. It tells the story about how to use or relate to the interface or design. "Stories are a communal currency of humanity." Tahir Shah, in Arabian Nights
  9. 9. VIDEO FLY TROUGH Source Outcome Author A video is useful to put the interactive system in a place and context. It shows clearly the position on the street, the scale between the user, the element and the other elements around like the transportation system and also, other users. Click on the center to watch the online video>
  10. 10. Thoughts about the design process One of the challenges of the design practice course it is not work with only design related people. The majority of the group has not experi- enced on design processes. That fact provoked that the main process was slow but steady. In a more advanced situation, the process, hopefully, will be more agile. Less structured, not following all the "waterfall" steps and try to validate all the steps and ideas. What we did. Research Identify the user Align Goals Design Prototypes Validation Online research Primary Persona Stakeholder´s goals Design workshop Wireframes Consultant vision Interview Sketching Visual design Stakeholder vision Questionaries Validate ideas Storyboard Sketching What we could have done. Research Identify the user Design Prototypes Prototypes Validation Online research Persona Early design Design workshop Wireframes User testing Interview Scenarios Validation Low fidelity prototypes Visual design Re- design Create Hypothesis Journey Map Validation Validation Idea Validation Waterfall approach. The course tends to put the students into a Waterfall process. With consistent and deliverables based structure and timing. This structure made not possible to test the designs and ideas in early stages. Moreover, the waterfall process requires much time to develop all the deliverables of each stage. Lean UX approach. The new methods on the market like the "Lean UX" one. Allows to the design teams to validate each part of the process. Even the first ideas. Validate each step or deliverable allows to the team to take more precise and cheaper decisions.