UX_Portfolio 2011


Published on

Mash up of UI & UX work_2011

Published in: Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX_Portfolio 2011

  1. 1. Design Archives UX + Interaction Design + Design Research + Visual Communication DesignMarch 2013; London DERICK [d3 0] 6 + Adrian D’Costa derickad@yahoo.com 07832 846317
  2. 2. contentshereforthRESUME ..................................................................3UX + Interaction Design case study 1.......................5UX + Interaction Design case study 2.......................13UX + Interaction Design case study 3.......................18Design Research...........................................................22Visual Communication & Graphic Deisgn................. 26
  3. 3. overviewI have a passion for the application of qualitative and quantitative research towards creating compellingpeople-focused narratives across services, artifacts, and media especially technology. All of which is aimedtowards achieving optimal & measurable people sensitive solutions through a memorable end user experience.personaldetailsDate of birth - January 3rd, 1982Mobile - 07832 846317Email - derickad@yahoo.comLanguages Known - English, Kannada and Hindi (intermediate)educationCommunication Design (2001 - 2006 ) at Srishti School of Art, Design and Technology; Bangalore, India resume`MA Interactive Media (2010 - 2011) at University of the Arts London - LCC; LondonlatestworkexperienceProduct Manager - from 2012 January – To dateCoupons.com Limitedhttp:/uk.couponsinc.comResponsible for identifying new areas of opportunity for creation and evolution of products that levy on currentand future technology trends, and the implementation of these concepts.Core product assigned: www.beforeishop.co.ukWas responsible for the platform’s management, maintenance and evolution. Activities that this included were;on-going usability tests, constant iterative changes based on insights and reworking the user flow, defining andmanaging the KPIs for the service, working with the marketing team to promote product, working with businessteam to constantly evaluate and empower business proposition, working with a trans-Atlantic development teamat company HQ to implement changes in an agile development environment.skillsets,systemsandmediaUser interface design; usability studies; paper prototyping; system flowcharting; information architecture; contentmapping; information graphics; questioning and interviewing; data analysis techniques; analytics; graphic andprint publications; web production; sound production and video/ motion graphics;
  4. 4. ux+interactiondesignUser Experience has always been at the core in the way we live our lives, by way of how we choose todo things. An experience, either good or bad has a memorable impact on our lives.I believe UX can create magic, and now technology has reached a point where it can now actualize it.Hence UX to me does not lie in a pure science approach as prescribed in HCI, but a fantastical journeythrough everything. For example the city in case of an locative app the ux also should include ele-ments to generate an ecosystem in the physical space that is in harmony with the product. It is morethan just the product; it is the ecosystem around it that should be part of the ux. With this in mind Ipursued Interactive Media for my MA – To make magic.*Being hard to show this in isolation there are three projects showcased as brief case studies here.
  5. 5. beforeIshop.co.ukbeforeIshopTM is the smartest supermarket shopping list builder in the UK. We compare hundreds ofin-store offers and add our exclusive deals to make your shopping list full of great savings.beforeIshopTM is owned and powered by Coupons.com, a world leading digital marketing andpromotions company headquartered in Mountain View, California .My role with in the project is lead UX designer and Product Manager. I work closely with the ProductDirector, to translate Business requirements into products and features that would empower users.Taking these features and functionality forward, I define user journeys, task flows and use casescenarios. I then proceed with the creation of iterative wire frames and mock-ups which lead to thefinal design for that iteration/version. Also of note, was that I facilitate the agile development sprintsand usability testing.
  6. 6. beforeIshop.co.uktaskflow  Click to watch on you tubeThe platform allows users to create a shopping list of items and then browse a catalog of in-store offers based on what they have on their list. Theaim of the platform is to empower users to be frugal and help save money and effort. The above flows were created using Microsoft Viso.
  7. 7. beforeishop.co.ukpen&paper-strategy  e DefiningPersonas Painpointsmapping Wireframingsolutions StoryboardingcontextUsing pen and paper a series of exercises were undertaken to establish guidelines and parameters for the service and platfrom. These were furtherdeveloped into ‘problem areas’ that became the design challenge for for the user experience design.
  8. 8. beforeIshop.co.ukwireframes eSelected wireframes were then refined into detalied wire frames and mockups. Pen and paper lead to balsamiq which in turn ended in Fireworkmade mockups.
  9. 9. beforeIshop.co.ukfinalinterfacedesign highlights Clear call to action Bringing hidden value content up front Clear markers and sections for types of actions and information De -cluttering of information and visuals Creation of new section to enable power usersThe new www.beforeishop.co.uk, based on feedback and usability tests of earlier version.
  10. 10. beforeIshop.co.ukfinalinterfacedesign  seThis version also introduced a new section on the platform -’shopping list’ as an outcome of user expectations and behaviours. This version saw asuccessful increase in traffic and use; Unique visitors went up by 106% based on the new design’s ‘SEO friendliness’, page views went up by 84% andpages per visit was up by 4% - all numbers based on a September 2012 to February 2013 period.
  11. 11. beforeIshop.co.ukcloserlook  se  Problem area: Chronologically ordered list Problem area: the registration was perceived to Problem area: Users did not notice the featurebased on input with no organisation be long and tedious resulting in a drop off. that allowed them to change their supermarket preference.Solution: Reworked it to auto-populate items Solution: The registration was converted into ainto core categories and also allow the user to vertical form which physically occupied less Solution: The redesign saw the feature get amove and change these categories space, & moved onto a light box so the user clear presence on the top of the list area, and doesn’t feel like that have left the page they clear indication of its state were on
  12. 12. beforeIshop.co.ukroadmap  seEstablishing a very real road map of features and enhancements for the product, in an agile developement environment. The features wereweighted against both boons to the company and boons to the user and effort required to implement to define a ROI based ranking.For beforeishop.com2012
  13. 13. hauntedlondonHaunted London is a locative and interactive storytelling experience based upon a haunted trail in theheart of old London city. The user explores a relatively unknown trail starting from St. Paul’s andending near Farringdon. The trail explores haunted landmarks within this catchment area.The ‘app’ is story / narrative that is embedded within a haunted trail in London. As the user walks the MA Final Major Project, done in collaboration with Filipotrail, at specific locations they are required to perform certain tasks unlocking the next part of the trail Bonio, Narges Jalali, Simona Profumo and Hara Mihailidouand narrative as they go along. This experience has been designed as a two-user experience to satisfy under the banner of Locathink. The app is undergoing post beta development. The Project Has been shortlistedthe safety concerns that individual users may have. But to make the experience truly immersive, we as a finalist for the BIMA 2011 Awards.have ensured that both users have individual experiences, which are both collaborative and sequential. LCC - 2011
  14. 14. hauntedlondonusertaskflow e LEGEND user 1 user 2 VIDEO 1-1 VIDEO 1-2 TRIGGER 3 TRIGGER 4 H A UNTED M AP 4 google maps A UDIO 16 A UDIO 17 Triggers H A UNTED M AP 1 A UDIO 5 A UDIO 6 Audio TRIGGER 1 TRIGGER 5 TRIGGER 14 Video A UDIO 1 A UDIO 7 AUDIO 22 Task TRIGGER 2 TRIGGER 6 TRIGGER 15 Tools A UDIO 2 TASK 7 A UDIO 18 VIDEO 3 VIDEO 2 TASK 3 A UDIO 8 Feedback T TASK 1 A UDIO 3 VIDEO 2 TOOL 7 Haunted Map TOOL 3 T TOOL 1 C A ME RA AR EXECUTION Overview Map EXECUTION EXECUTION FB EXE FB EXE FB EXE DIALOGUE 5 TASK 4 A UDIO 9 VIDEO 2 AUDIO 19 TASK 8 VIDEO 2 A UDIO 4 TOOL 9 TOOL 8 TASK 2 DIALOGUE EXECUTION CAMERA ar TOOL 2 6 FB EXE EXECUTION EXECUTION FB EXE FB EXE Click to watch on you tube VIBRATION DIALOGUE 7 DIALOGUE 1 H A UNTED MAP 2 OVERVIEW MAPUsing Bluetooth the app will synchronize both devices and start the app when they both at the designated start location. The app will then directthem to location one. Once they reach a location, based on GPS tags the app will start a narration of the story and history behind the location.
  15. 15. hauntedlondonwireframes se Google Map at feedback, i.e. image of Google Map displaying Haunted Map just location 0.1 - 0.3 the whole walk with showing following guided path towards destination next destination on the right and knock twice to see if he’s there. Ok A.R. PHOTOCAMERA PLAY PAUSE PLAY AUDIO GOOGLE PROMPT TOOL HAUNTED MAP MAP Overview Map back Emma’s Story St. Bartholome Overview Map Overview Map back " # & $ % % ( # - ) 0 1 St. Bartholomeu’s St. Bartholomeu’s Church Church Read More jfksdlfklsd- Read More Are you sure you kdjiklciao adoc l;amio want to reset the - kjdoej kooiemc lkxmoe application? keinrnx. swopm e iow - R P Q I H G F Cancel D E B C sleimz.x lkxcmoie djojd Ok A 8 4 @ 9 8 7 6 5 4 2 3 He’s not there... blah blah ejlkem kwo kdjiklciao adoc l;amio sear coeme mearoerihy kjdoej kooiemc lkxmoe maybe your friend is ma diocaro rottoinculo more useful keinrnx. swopm e iow EMMA’S STORY sleimz.x lkxcmoie djojd RESET STORY EMMA’S STORY draw tool reset tool MAP - DRAWING EMMA’S STORY OVERVIEW MAP - RESET FEEDBACK OF OVERVIEW MAP PENTAGRAM RESET ACCOMPLISHED TASKThe app follows a linear narrative which the user needs to unlock at various points to proceed with the story. This implied that the logic was assimple as ‘if conditions met then go to next’. This was a UX challenge in choosing the activities and locations more than the traditional technologyaspect. In this project the city itself became an ‘interface’ and that to an interface cast in stone literally. UX here involved choosing the best loca-tions, paths and touch points - tasks, to supplement with our app.
  16. 16. hauntedlondonpersonas seBased on the user research conducted, we defined our target users as short-term tourist and immigrants between the age group 25 – 35, who maybe in London to learn English or get some work experience. This evidently means that they are preoccupied through the day in most cases at col-leges or learning centers, and have free time only from evening on. Being in the city for a while they enjoy walking as a way to explore the city as ittakes them through hidden pathways and non-commercial locations. The personas were created based on a synergy mapping of the user researchinsights (inset picture of post-its).
  17. 17. hauntedlondonfinalinterfacedesign se Click here to see advert videoThe final Haunted London iphone app (under development) - a BIMA awards 2011 finalist project2011
  18. 18. myelephant&castleUsing the principles of a hidden narrative, My Elephant & Castle is an interactive and locative feedbacktool, aimed in this context to generate and gather feedback on the proposed 1.5 billion poundsrenewal plan for the area. Initial user research highlighted a lack of information and interest of theproposed projects which involved the demolition of some of the most iconic structures in the area likethe 1965 built shopping centre.The web app highlights the keys aspects of four of these iconic structures based on hard facts thenpresents the user the choice to either keep or destroy the building, which happens based on personalbiases, experiences and memories. At the end of the app the user is shown a series of others user’svideos based on his/her choices about the structures that are in contradiction / opposition to theirchoice aimed at generating a critical self-reflection on the subject.
  19. 19. myelephant&castletaskflow Click to watch on you tubeThe web app essentially without informing the users makes them into ‘directors & editors’ to some loose extent. The user based on his/ her choiceis short listing pre tagged videos into a sequence / playlist for that session.
  20. 20. lowfidelitymockup &castle myelephantThe web app was inspired by city building games and pushing that ‘gamification logic’ the idea of giving the user control over what they would likein their catchment arose. This aspect of empowering them inevitably results in refection to make a choice, a genuine refection and reaction unlikedetached survey responses used to gather feedback on the same subject.
  21. 21. finalinterfacedesign &castle myelephantMy Elephant & Castle - Web app2010
  22. 22. designresearchA designer to me is someone with the ability to define key problems within an ecosystem or context.Immersing, understanding situations and scenarios; A designer is able to clearly define problem areasand identify triggers and influences for the same. With this understanding and thinking process thedesigner can then become the catalyst or an advocate for change, either using his / her skill sets todevelop solutions to address the problem or facilitate systems and structures that would do the same.The process of immersing myself within a context, understanding it, empathizing with it and finallyinternalizing it to support my design thinking and process has always been an area of immense inter-est to me. I strongly believe in the idea of, not asking people what they want, but observing and un-derstanding what they need. Personally I believe this is where good design originates.
  23. 23. index2005 research design Click to view presentation on slide share Click to watch on you tubeIndex 2005 was an international design exhibition based on future scenarios. We had to choose a topic which fell into one of five categories issuedby Index, to generate a future scenario five years ahead, create personas and then design either products or services to impore the quality of life.My problem area was the decreasing age of the average alcoholic. So I tacked the problems of alcoholism and the final outcome was a short filmand concepts for a series of products and services.Index 2005, Denmark2005
  24. 24. designresearchdigitalimaging se Click to view presentation on slide shareThis project offers a brief examination of the changing culture of photography and attitudes towards it in India as it moves from traditional analogphotography to digital photography. Using certain design methodologies and process I showcased how user centric research and quantitativevisualization can be used to enrich and define features that help in a development of a more ‘consumer oriented product’ which took into accountregionally focused solutions instead of generic ones, ported from different cultural contexts.Real world Project commissioned by HP labs India2006
  25. 25. designresearchmobiletrends se Click to view presentation on slide shareThe study is aimed at identifying the usage of mobile phones among the ‘Bottom of the Pyramid’ (BoP) users, especially those who use mobilephones as a way to sustain/grow their livelihood. The intention is to document the users’ key behaviour patterns, trends and needs with respectto communication devices. The outcome will be to identify the unmet needs & potential business opportunities for mobile products/services forthese users.Onward Research and Innovation2008
  26. 26. visualcommunicationCommunication is fundamental to the very existence of a modern, progressive society and plays a veryimportant role in all walks of life. The process of communication is fascinating requiring a considerablecreative ability coupled with an analytical mind, the ability to scrutinize and highlight the core issuesand then use the appropriate media tools to appeal to the different cross sections of society. It is thisstrength of the communication process that appealed to that I pursued Communication Design as myspecialization within the spectrum of design.
  27. 27. infographicsproductscenario se Laura doesn’t buy her own camera. Its gifted to her by her parents Kiosks Present all major hot spots these are the new priniting and sharing solutions. Picture assistants To help capture to perfect picctures. LCD Frame The frame displays pictures from the camera taken that day - wireless digital photo frames Dock This device removes the need for a PC to dump, burn and share images. The also acts a charging port, which sloves problems of constantly trying to plug in things.Another key point is that the dock is networked to the LCD via the internet Recorder and intellegently sends images to the LCD photo frame. Stylus Voice tags Allows for an embedded voice tag to enrich the story The Stylus allows for more telling experince.` contolled editing on the camera itself PERSONA NAME Laura details on next pageProduct usage scenario generated to highlight task flows for HP labs2005
  28. 28. infographicsusemapping se CREATION Photoshop wallpapers CONSUMPTION edit 5% 20% parents MUTILATION click! artifacts e friends CIRCULATION storage hi5.com 30% Hard disks - 80% self partner Cd’s - 15% shutterfly 5% prints - 5% blog spot 15% email 20% pets home ARCHIVING yahoo messenger 30% blurs room these though were online, they were more of a one to one sharing - sharing with a specfic person or people hot spotsUser Mapping for HP labs - digital camera audience ecology2005
  29. 29. infographicslearningsystems se Scenario No.2: Bhaiya Scenario No.2: Bhaiya A ‘Self Learning’ module mainly though it is regulated and facilitated by the training organization through the use of a fieldworker. This is an ideal model where infrastructure / technology access is a challenge. learner partners human resource e Could have access to mobile Employability + empower - Fieldworkers, Has no access to quality phone, television, dvd/vcd, ment centric NGOs reaching SMEs / Virtual teachers, training institutes due to radio and access to comput - out to remote locations, back-end experts to support remote [tier 3- towns and ers with Internet access technology providers for fieldworker, villages] locations [public / shared / own] computer/ laptops and inter- back-end mentors to monitor net and possibly a mobile students progress classroom, local partners for spaceProposed learning scenarios for an E learning projectQuick sand, 2009
  30. 30. infographicslearningsystems se MATRIX FLOW QUESTION BOARD > GROUP QUESTIONING > INDIVIDUAL QUESTIONING MATRIX FLOW ORIENTATION > THEATER WORKSHOPS > REFRESHER WORKSHOP/ REVIEW PREPARATIONS + REFRESHER WORKSHOP > COMMUNICATION WITH FAMILY??! ??! ??! ? Anonymous question board based questioning Group Questioning sessions Individual Questioning - classroom + online Meet and Greet Introduction to Theater voice and Mid course review and Correspondence with learning trust exercises refresher workshop family Platform for anonymous questioning where students write questions and put them up on a Mandatory question asking time Structures empowering the student to ask individual ques- Initial introductions and This is the first session that These could be various This would be an intense mid- Updates to family to keep softboard. The teachers address these questions at appropriate times. where students form small groups tions, both during classroom time and post class room informal conversations as ice introduces students to the exercises borrowed from course refresher cum review that them in loop, by both the and then come up with questions breakers course, the institute, the theatre and outdoor experi- looks at lessons learnt as well as do teacher and the student Gradually initiates the students into breaking inhibitions and building the spirit of enquiry, without that they want answered. faculty, the learning method- ential learning to build a rejig of the first week of theatre putting overt pressure. ologies. confidence, open up groups, exercises. Gradual step up from the question shed inhibitions, prepare for wall- building confidence and the The students realise that its a further activities. Energy is refocused and students sense of sharing and learning serious and intense 3 months get renewed vigor in entering the within a group ahead. They have some This phase would need an next, more intense phase which sense of all that is coming. external facilitator. The also includes more elements of teachers would be partici- self-learning. pants along with the students in the exercises.Proposed learning Task flows for an E learning projectQuick sand, 2009
  31. 31. thankyou document> Jumpto startof