MS3305 – CW2

MS3305 – CW2

TANZ - U1105441

Introduction (Project background)

• This presentation is based on MS3308 project Styla.

• Styla offers: two products website and mobile application• Three user groups: Trenders, Models and Fashion Industry recruiters

Website is aimed at 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.

Situation(1) 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.

(2) 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.

Design Brief• 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.

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.

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.

1) Trenders weekly training videos will give points2) Number of positive advice will also give point and increase ranking level3) 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)

Concept

Testings GSR

(2 users)

Morae observation (2 users)

Card sorting(7 users)

Paper prototype + talk aloud(4 users)

Digital prototypes (2) + talk aloud + observation

(4 users)

Popapp.in(1 users)

1

2

3

4

5

6

Designing the User Experience

User analysis Phase Design Phase Implementation Phase

- GSR- Morae observation- Similar products in

market- Online survey- Concept testing- Target group- Persona- User requirements- Use case diagram

- 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

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.



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.

Galvanic Skin Response (GSR)

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 23 Test 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.

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.


Morae observation

A - Bored

B - Neutral

C – Sadness

Source: (Ekman, 2003,

p.118)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.

Source: (Ekman, 2003, p.229)

TEST A (no reward) TEST B (reward)

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.


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.


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


Concept testing

How often would you use it?Majority of the users will be using the products on weekly basis.

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.

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.


Target GroupAccording to the user research findings (Appendix 1 & 2) the three target audience requirements are:

Industries:- 32-37 years old- Technology savvy- English speakers- Professionals- Fashion industry recruiters- PC, Tablet and Smart phone

users.

3

Trenders:- Females- English Speakers- UK based- Employed in industries

related to fashion or style - Smart phone users

2

Models: - 19-23 Years old- Females- English Speakers- Living in UK i.e. London- College or University

students- Smart phone users

1

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 iOS therefore, Styla’s website would be responsive and compatible for iOS users and also Android users.


Trender PersonaUser’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.


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.

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


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.


Design Phase

This phase provides a comprehensive approach to the design of Styla, ensuring that design meets both users requirements.

User analysis Phase Design PhaseImplementation Phase

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.


Card-sort Testing – Navigation (website)

HomeAbout us

TrenderHow to be a Styla

Training Contact us

Login/logoutSettings

HomeProfileRegistration About us Contact us SettingsLogin/logout


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.

Card sorting Evidence


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.


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.

Wireframes_1 & 2

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.


Wireframes_2

Wire

fram

es_1

Gamification in design (wireframes_3 for trenders)

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.

1

2


Responsive design (mainly for industries)

Homepage - landscape

Tablet homepage - portrait

Homepage - portrait

Portfolio search page - portrait

Considering Fashion industries recruiters the website was made responsive (as designs are shown in different devices i.e. tablet and phone).


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.


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.


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

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




Website tabs

Tabs

User analysis PhaseDesign Phase Implementation Phase

Final Mockup

Website Mockup

User analysis PhaseDesign Phase Implementation Phase

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.





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].

http://www.imdb.com/title/tt0081505/quotes

http://www.usabilityprofessionals.org/upa_publications/ux_poster.html

http://www.usabilityprofessionals.org/upa_publications/ux_poster.html

Documents

MS3305 – CW2