MS3305 – CW2

1. MS3305 – CW2 TANZ - U1105441

2. Introduction(Project background) • This presentation is based on MS3308 projectStyla. • Styla offers: two products website and mobile application • Three user groups: Trenders, Models and Fashion Industry recruiters Website is aimedat Fashion Industries - (those who can search for fashion talents) and Trenders – (those who can showcase their skills and be recognised). Mobile app. is for Models (those who can receive advice on style) and Trenders (those who provide advice). • My focus in this presentation is the Website. Therefore, I would consider Trenders and Fashion industries in my mind while designing.

3. Design Brief Situation • Website must incorporate design theories of gamification which would motivate Trenders to participate (they can provide advice, and showcase their recognition, contribution and skills gained to Fashion industries as work experience [via application] on the website). • It must be Fashion related and responsive – to tablet or mobile for on to go use. • Its hard to find a job in a Fashion industry without having good Fashion talent or understanding but also without a digital service (like Styla) that could help you search for job within Fashion industries and provide work experience. • There are so many companies i.e. Arts Thread where industries can search for creative, talented graduates. But there is no specifically a website where Industries can search for Fashion graduates, who have practical work experience and receives feedback on their talent. Also websites are not responsive which makes it hard to use it on different devices. Gamification because - providing free advice and not being rewarded gets boring. Likewise, to Stephen King’s movie “All work and no play -makes Jack a dull boy” (King, 1980). The quote suggest that performing mundane tasks without fun will make a person boring. It also implies that if Trenders are not being benefited form Styla’s products they will not participate. Therefore, Styla should have some gamification element embedded to motivate Trenders to participate. In addition, considering Fashion industries it should be responsive design as persona suggest industry people are always on the go and busy people, those who use tablets to quick access information and search for candidates, so on.

4. Concept For the purpose of Styla, Deterding et al. definition for gamification is best suitable as he says gamification is “the use of game design elements in non-game contexts” (2011, p.14). Research from my MS3307 found that gamification motivates and enhance users performance, therefore Styla’s website will incorporate three gamification elements into its design of MS3308 project. • Trenders weekly training videos will give points • Number of positive advice will also give point and increase ranking level • It will show users progress bar of how much profile they completed (like linked in) Embedding gamification will increase user’s performance and consumption: Gamification + Motivation = Behaviorism (they will be motivated to participate) (they will use more often)

5. Testings 1 GSR (2 users) 6 2 Popapp.in (1 users) Morae observation (2 users) 5 3 Digital prototypes (2) + talk aloud + observation (4 users) Card sorting (7 users) 4 Paper prototype + talk aloud (4 users)

6. Designing the User Experience User analysis Phase Design Phase Implementation Phase • Brainstorm • Card sort testing • Navigation flow • Sketches/Paper prototypes • Wireframes • Gamification in design • Responsive design • Digital prototypes (1) • Digital prototypes (2) • Popapp.in test • Final tabs • Final mockup • GSR • Morae observation • Similar products in market • Online survey • Concept testing • Target group • Persona • User requirements • Use case diagram

7. User analysis Phase “User-centered design means understanding what your users need, how they think, and how they behave - and incorporating that understanding into every aspect of your process” (Garrett, 2011). This phase will help find the target audience for Styla’s website, and their needs and wants. This will be found from the survey results that will be used to generate a personas. User analysis Phase Design Phase Implementation Phase

8. Methodologies diagram (to understand gamification outcome) The diagram shows the flow in which methodologies will be carried out to understand whether Trenders would prefer gamification or not. If so which of the gamification element (i.e. reward, leaderboard, competition etc.) would motivate them more to participate in providing advice for free. From this methodology I will understand how and what gamification will motivate Styla’s users and increase consumption and productivity. User analysis Phase Design Phase Implementation Phase

9. Galvanic Skin Response (GSR) GSR Results (AB test) The graphs below explain the arousal theory of motivation with the use of GSR; which help understand users motivation. X-axes in the graphs explain the time taken for the test and the y-axes explain usiemens- the measurement of the arousal level. Figure 22 User 1 GSR test results found that at the start of the Test A (without reward) user arousal level was 0 usiemens for 0.24 sec, and increased from then to was 208 usiemens, again the level decreased. This explains that user was expecting the mundane task to be fun but got bored. However, Figure 23Test B (with reward) shows user’s arousal level is increasing from the very start. It also shows the user took more time doing Test B compare to Test A. This is because they found the rewarding element exciting and more engaging. Likewise to User 1, User 2 results also show very similar findings. While doing Test A (Figure 24) user arousal level had dropped down. However, when the user moved on to Test B(Figure 25) the arousal level was increasing and decreasing continuously. This explains that the rewarding elements that was added to the test i.e. chocolate (tangible) soft relaxing music, cute kittens (intangible). It also shows when user received the surprise reward (chocolate) their arousal level was at the peak. User analysis Phase Design Phase Implementation Phase

10. A - Bored Morae observation TEST A (no reward) TEST B (reward) B - Neutral Observation was used to help answer: does gamification dynamics ‘rewards’ or ‘competition’ motivates users and changes behaviours? It was used to further support GSR test results. It was done before any of the tests to incorporate the correct gamification dynamic. C – Sadness Source: (Ekman, 2003, p.118) Source: (Ekman, 2003, p.229) These emotions explain that during Test A user was bored and zero motivation was involved as there was no interactive or fun element. It shows users were happier when they were receiving reward from Write or Die (Test B), therefore there are chances the behaviour will repeat. User analysis Phase Design Phase Implementation Phase

11. Similar products in the market They have products in the market that provides advice on fashion. But there are no products that are benefiting not just the person who need advice but also the one who is providing advice and fashion recruiters. Considering this Styla have designed in own design brief, keeping three target users in mind. User analysis Phase Design Phase Implementation Phase

12. Online survey (Appendix 1) On 20 users to understand user needs and determination. From this survey results was generated in the form of graphs. User analysis Phase Design Phase Implementation Phase

13. Concept testing Would you use this service? When users were asked in the survey whether they would use such service, if they were provided, 15 users answered ‘yes’. This proves that the idea of creating such platform would be a success, and helped me to move on to the next stage, of finding out what they expect Styla to provide them. How often would you use it? Majority of the users will be using the products on weekly basis. Which user group do you belong to ? The graphs explains that 45% of user group will be Trenders. Also, 35% of Fashion industries will using this service. Considering this two personas are designed. User analysis Phase Design Phase Implementation Phase

14. Target Group According to the user research findings (Appendix 1 & 2) the three target audience requirements are: 1 • Models: • 19-23 Years old • Females • English Speakers • Living in UK i.e. London • College or University students • Smart phone users 2 • Trenders: • Females • English Speakers • UK based • Employed in industries related to fashion or style • Smart phone users What age group do you think would be most interested in this service? Most of the users assumption suggests that 16-24 years old will be most interested in this service. 30% users think 25-31 years old will prefer this service. Finally, only 15% thinks 32-37 years old will be interested. According to me, 16-24 years old are Models, 25-31 are Trenders and 32-37 segment group is Fashion industries. What phone type do you use? Majority of the users uses iOStherefore, Styla’s website would be responsive and compatible for iOSusers and also Android users. 3 • Industries: • 32-37 years old • Technology savvy • English speakers • Professionals • Fashion industry recruiters • PC, Tablet and Smart phone users. User analysis Phase Design Phase Implementation Phase

15. Trender Persona User’s segmentation allows products to meet users’ needs and satisfy users with the overall outcome. Therefore, Persona was designed, using Garratt (2011) book he which he said “market researchers commonly create audience segments based on demographic criteria: gender, age, education level, marital status, income, and so on” (Garratt 2011 p.43). Survey’s results helped design a persona i.e. it explains Trender will not work for free, therefore gamification i.e. rewarding is must, they prefer ranking and competition more dynamics more etc., keeping this user persona in mind website sketches will be designed. User analysis Phase Design Phase Implementation Phase

16. Industry user Persona Robert is always on the go, and he wants a website that’s responsive and helps him to search to creative fashion talents. User analysis Phase Design Phase Implementation Phase

17. Users requirements (Focus group) After survey, focus group was carried out with four users. To understand what would a Industry/Trender expect to get out of Styla. This results helped me to design Use Case Diagram of the two users. Trender: - Show my skills - Upload a CV - Edit my profile - Be recognised Industry: - Search for candidates - Hire talented fashion graduates User analysis Phase Design Phase Implementation Phase

18. Website Use Case diagram The following diagram shows the core ‘use case scenarios’ in which a website visitor (Industries) and Trender would engage with the website. User analysis Phase Design Phase Implementation Phase

19. Design Phase This phase provides a comprehensive approach to the design of Styla, ensuring that design meets both users requirements. User analysis Phase Design Phase Implementation Phase

20. Brainstorm Once the concept was tested and users were identified, I did a quick brainstorm on design concept, which has list of things to include in the product, tools, features, and things users expect form the website. User analysis Phase Design Phase Implementation Phase

21. Card-sort Testing – Navigation (website) Now that I knew Styla’s user groups and their requirements (from personas, use case diagram and brainstorm), I had rough idea on the type of pages they will expect from Styla’s website. So I listed them and got it tested on seven users whom fall in the identified user group. It was tested to determine what functionality, menu headings and layout order of these headings that users would expect to find when using the Styla website. Feedback received from users: • 5 people choice ‘about us’ page to be listed second and two people chose it to be third, therefore I have placed it based on the majority. • Users recommended login and logout button should be available on every page as a static area. • Changing/editing tabs name i.e. Profile page to be replaced with Trender • Registration should have subheading ‘how to be Styla’ so that it’s easy to understand who can sign up. • Include extra tabs such as Training. This testing helped me to include tabs of users interest so that Trenders are more motivated to use website as it would be more personalised. Home About us Trender How to be a Styla Training Contact us Login/logout Settings Home Profile Registration About us Contact us Settings Login/logout User analysis Phase Design Phase Implementation Phase

22. Card sorting Evidence User analysis Phase Design Phase Implementation Phase

23. Navigation flow on website This navigation flow was finalised from the card sort test done earlier. It explains how visitors and Trender will navigate themselves. Once the flow was correct, I moved into designing the paper prototype. User analysis Phase Design Phase Implementation Phase

24. Sketches/paper prototype (Talk aloud testing) Homepage Search page Trender Profile Registration Four users participated in talk aloud testing, where they were providing feedback and comments on things i.e. they liked the diamond shapes idea, slideshow should be wider, design is crowded, the navigation icon is too small etc. This feedback was used to make wireframes. User analysis Phase Design Phase Implementation Phase

25. Wireframes_1 & 2 Wireframes_2 Wireframes_1 According to users feedback wireframe_1 designs are not suitable for Styla as it was simple structure and confusing as content is too crowded. Therefore, wireframes_2 designs were created to understand the structure of the website in more detail. Wireframes_2 and 3 are similar, but to give feel of the colour and it was changed to purple. Using wireframes_3 mockups were designed. User analysis Phase Design Phase Implementation Phase

26. Gamification in design (wireframes_3 for trenders) 1 From the survey results it was found that 80% of users play game and 86.38% would prefer game like element in work environment. Majority have answered gamification like ranking and competition would motivate them more compare to badges and reward. Therefore Styla have incorporated ranking system and competition element where Trenders will compete with each other to stay on rank 1. 2 User analysis Phase Design Phase Implementation Phase

27. Responsive design (mainly for industries) Portfolio search page - portrait Tablet homepage - portrait Considering Fashion industries recruiters the website was made responsive (as designs are shown in different devices i.e. tablet and phone). Homepage - landscape Homepage - portrait User analysis Phase Design Phase Implementation Phase

28. Digital prototype (1) Having done with the paper prototypes and wireframes mockup was implemented on Photoshop to get clearer idea of the final design. Quick feedback was received from users to choose one mockup from the two. Majority of the users said design design two was better as they liked the hover effect with the name appearing. Therefore this design was chosen to be the final mockup. User analysis Phase Design Phase Implementation Phase

29. Digital Prototypes (2) (Talk aloud Testing & observation) • Tested on four users in order for users: • to understand what are the errors and good aspects of the design. • to find out what changes I can make e.g. the colour, resize the buttons, change the position etc. • Users understood how to access navigations, the diamonds hoover effect was effective, and layout was clear. User analysis Phase Design Phase Implementation Phase

30. Implementation Phase This is the last phase of designing where all the sketches, ideas, users needs and wants etc. are combined to create and make the final design live. User analysis Conceptual Design Implementation

31. Video Clip Popapp.in clip: https://www.youtube.com/watch?v=iWpekMlKlvI While doing this observation on one user, it was analysed that user was able to navigate successfully. Therefore it was known to be ‘final working design’  User analysis Conceptual Design Implementation

32. Website tabs Tabs User analysis Phase Design Phase Implementation Phase

33. Final Mockup Website Mockup User analysis Phase Design Phase Implementation Phase

34. Overall… Design process: https://www.youtube.com/watch?v=n-KsCp_1QWE&list=HL1399945339 This video summerises the process Styla went in, in order to create final designs.

35. References • Deterding, S., Dixon D., Khaled, R., & Nacke L. (2011). From game design elements to gamefulness: Defining “gamification”. In Proceedings of the 15th International Academic MindTrek Conference: Envisioning Future Media Environments, Tampere, Finland, ACM, pp. 1-15. [Accessed: 24 April 2014]. • Garrett, J. J. 2011. The elements of user experience. Berkeley, CA: New Riders. • Ekman P., (2003) Emotions Revealed: Recognizing faces and feelings to improve communication and emotions, New York, Henry Holt and Company LLC • King S., (1980) The Shinning Quotes, Available on: http://www.imdb.com/title/tt0081505/quotes. • Usabilityprofessionals.org, (2014). UXPA Publications: "Designing the User Experience" Poster. [online] Available at: http://www.usabilityprofessionals.org/upa_publications/ux_poster.html. [Accessed 13 May. 2014].