Introduction

This portfolio was built for my Building Engaging Prototypes course from the third period of the first year studying User Experience Design in De Haagse Hogeschool, and is meant to cover my weekly progress on a ten week scale and a final reflection meant to summarize my progress. The topics vary from paper prototypes to non-visual prototyping, A/B Testing and prototyping for the experience.

Week 1

Your prototypes (photos and descriptions, before and after the evaluation)

Initial prototype — I was not totally satisfied with the initial prototype – I was shooting for a simplified version of a music-player application, without over-cluttered features, but my design ended up being pretty sloppy, having some really unclear functions as I was not decided on what features to implement. 

Refined prototype — During the refining process, the home-page layout was changed a bit, especially the collapsable music-player, as in the initial prototype it occupied too much screen space. The music player button layout was changed as well in order to prevent accidental mis-clicks that were encountered in the testing process. Minor tweaks were made as well to improve the efficiency of the app.

17273391_10202961996727454_152775663_o

Refined prototype — The watch interface didn’t change a lot apart from the search page, which now offers the option to scroll through songs as well, as only having a voice search option was not efficient. 

Explanation of how the prototypes were evaluated. Discuss if there were any problems in conducting the test.

In order to evaluate the paper prototype, a clickable version of it was quickly compiled using Marvel App during the class, after which I had different users try out the prototype and check out all the existing features. Besides the limitations of Marvel, the testing process went smooth and helped me gather insights about what elements of my design were subject to change.

One problem that some users hit was the fact that some of the pages that they were trying to access didn’t exist, which resulted in confusion – for example, I did not have an Artist page or an Album page, only a Now Playing page, so when the user tried to click on any song other than the currently playing one, the application did not allow them to.

Another problem I have discovered with my initial prototype’s button placement was not the best one I could have went with, as they were relatively close to each other and besides causing confusion, it also caused plenty of mis-clicks. 

The findings from the evaluation by a fellow student and how you could use them to refine the prototypes.

  • Homepage is too cluttered
    • The music controls should not be visible on the homepage at all times.
      • (remove permanent controls from homepage, transform them into a slider that pops up, which includes both album artwork and controls)

 

  • Love function is confusing
    • (there isn’t a “love” button, only an add to playlist button)
      • (add “add to favourites” button)

 

  • Voice search isn’t always possible.
    • Voice search shouldn’t be the ONLY way to search. (for the watch app)
      • (add another way of searching – e.x. slider with letters )

 

  • “Add to playlist” button is too close to play button.
    • Button can be misclicked.
      • (change position of secondary controls so they’re not directly next to the primary music controls)

Week 2

Gestures:

PLAY – Palm to fist motion. PAUSE – Fist to palm motion.

VOL UP – Slide palm facing up. VOL DN – Slide palm facing below. MUTE – “O” Shape.

FORWARD – Slide right with palm. BACKWARDS – Slide left with palm.

Sounds (can be heard while the gestures play):

Besides the volume sounds, all other sounds were me interacting with different object (pen, coins, lighter, cup of coffee, etc.) above my dining table and lightly hitting the table or rolling said object on the table. All the sounds were imported into Audacity and edited to match the action the user is performing while the sound plays. For example, the sounds for volume are pitched so they start low and end up high (vol up) or the other way around (vol dn.). That sound was actually me scrolling through the dial wheel on my camera.

Reflection:

For my Initial Prototypes, I sketched out the plan on a notebook which contained raw drawings of my gestures and ideas for sounds. Most of the gestures I had picked in the beginning made it to the final cut of the in initial prototype, while all my sound ideas were replaced by other ideas, as most of them didn’t sound right or did not match the context. Some serious brainstorming was needed in order to come up with the sounds, which was in my opinion the hardest part.

For the evaluation, my user was asked to watch the video above and after it’s done, react and comment on the gestures and come up with possible improvements. My user was a close friend (classmate), and although the results may have been influenced by our friendship, the feedback received from him was unexpectedly impressive for my first time designing sounds and gestures. The gestures he understood clearly but he came up with the improvement that for rewinding and forwarding, it could have been left hand swipe left (backwards) and right hand swipe right (forwards).

While discussing the sounds used, the biggest remark and most frequent one was that most sounds were too basic, although I have to agree with that, the sound-creating part of the process I found tricky to ideate on. The creation process of the sounds was especially hard for someone with no prior knowledge of sound-recording and editing, and while my user mentioned the fact that “more positive synthetic sounds” I had no idea how to come up with such sounds using only household sounds.

Reflection (after Evaluation)

After evaluating the product’s sounds and gestures with a user, I decided a few changes could be made in order to make the product more appealing sound-wise and gesture-wise.

When discussing sounds, using another application, a more complex sound recording app, would sure come into hand, as using sound effects on my recordings would make them sound more appealing. General feedback from the test also suggested making sure all sounds can be distinguished one from another, as sometimes they were really similar, which caused confusion at times for the user.

Making the gestures distinguishable one from another was also an essential piece of feedback I received which could be used to refine the gestures, as for example forward and backward could have been changed with a gesture done with a different limb (i.e. right vs. left arm).

Conclusion:

In conclusion, using sound libraries would’ve been the easy way out in the case of sounds, but recording your own sounds makes you think about the meaning of a certain sound and makes you really think outside the box while planning you app. Thinking of gestures that would work with your app and would be easy enough for the user to remember and recall makes you think forward to the future, where everyone will be controlling their technology with gestures and voice commands.

I think starting to experience testing for sound and motion was a really fun assignment that helped explore new fields in which we had previous knowledge, and although the sound recording part didn’t go as planned, I think the project had a positive influence on my experience with prototyping, as I learned new ways to prototype that I’m sure I’ll use in the future. Using sound libraries would’ve been the easy way out in this case, but recording your own sounds makes you think about the meaning of a certain sound and makes you really think outside the box while planning you app.

Week 3

Your Wireframes

Screen Shot 2017-03-11 at 8.38.49 PM

Expert review on my wireframes (done by a fellow student)

Expert review done by Jeroen Nijkamp

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

Screen or Component What is wrong? How to improve?
planning screen the way you chose to group your fields together (departure and arrival time together and departure and arrival locations together) can be confusing. and may be unnatural place the departure time and lcoation together, along with arrival time and location together,
  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
home settings is the OV information really necessary? remove it
results screen no information presented about total travel duration include infor about total travel time
  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

Screen or Component What is wrong? How to improve?
settings tab The settings tab is on every page, but I only see the relevance on the first page, where the user inputs their data. perhaps integrate the settings into this page for a simpler design
all screens double settings tab and search tabs have only one search and settingss tab
  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

Screen or Component What is wrong? How to improve?
results page you don’t have a search bar for the results page, limiting user control add a search bar for the results
  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

Screen or Component What is wrong? How to improve?
all its unclear which page responds to which button along the bottom, and the user maybe be unclear as to where they are use feedback in the form of hover states to speak to your user and inform them of their actions
  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

Screen or Component What is wrong? How to improve?
home travel no options for tailored actions allow users to favorite a route, so that they can quickly use the routes the use every day
  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

Screen or Component What is wrong? How to improve?
every screen the main button on your bottom bar is misleading, does it lead to a metro functionality. or is it the logo of your app, as we do not see this used anywhere else we as the user don’t know what its for make it clearer and more independent
  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

Screen or Component What is wrong? How to improve?
Travel results list the list with all the different results are quite small and may be difficult to read. This may especially be true with suer with a sight handicap and/or elderly users perhaps decrease the number of results per page and increase the size of each result
  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

Screen or Component What is wrong? How to improve?
all screens no help tool visible provide a help tool
  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

Screen or Component What is wrong? How to improve?

My expert review on a fellow student’s wireframes:

Review done for Jeroen Nijkamp.

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

Screen or Component What is wrong? How to improve?
home screen The placement of time selectors (using a switch) is confusing – can you only use one at a time? Users might get confused or forget they set a time in as it’s not visible. Place departure time and arrival time together instead of having only one visible at a time.
  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
Home screen What will the maps display? It is unclear. Does it update live? Make it clear what the map does.
Results Screen Same thing about the map. Does it display location pins only after you select a route? Is it simply a map of a city until you click a route? Remove it.
  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

Screen or Component What is wrong? How to improve?
All pages What is in the menu tab? As content is not shown, does it contain extra features? Add a page detailing the menu tab / or remove menu.
Results screen Background of icons is different color than the buttons. They look like they’re not part of the routes (they look like they do something separate). Fix row striping by making icons background same color as text background.
  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

Screen or Component What is wrong? How to improve?
  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

Screen or Component What is wrong? How to improve?
Results page and Route page No visual way of telling where the user is located at a certain time, so he might get lost in the app. Add breadcrumbs or other way of orientation.
  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

Screen or Component What is wrong? How to improve?
home travel No way to save routes Allow users to save routes
  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

Screen or Component What is wrong? How to improve?
every screen Although the map makes the app look consistent, it doesn’t help with efficiency. Removing the map on some pages may help.
  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

Screen or Component What is wrong? How to improve?
Results page The list of results is weird because of the row-striping. Changing the color on the icons for the row striping may aid with the simplicity.
  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

Screen or Component What is wrong? How to improve?
all screens No help wizard available Provide help wizard
  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

Screen or Component What is wrong? How to improve?

Reflective discussion on what kind of improvements you need to do based on the expert review:

After receiving the expert review from my fellow class-mate, I started noting down the ideas that I found relevant in the expert review and thinking about ways to improve my low-fidelity prototype before starting to work for my high-fidelity one.

Some of my most relevant and useful insights were along the lines of positioning (changing stuff around so it makes more sense / is more efficient), adding a search bar on all pages (and deleting the conflicting search buttons), adding hover states (which I almost forgot about). Minor other tweaks were mentioned such as adding a favourite route function, lowering the number of results on screen so they’re more visible, making the main button less confusing (it was confusing because I forgot about hover states), or removing the OV info, although that feature I find necessary, as checking your balance is always helpful while on the go.

While most of the feedback I received was on point and helped me come up with ideas on improving my application, some of them didn’t make sense, therefore I did not keep in mind all of them, only the relevant ones to this project or the ones which were considered actual problems rather than just nitpicking. For example, “the user does not have any total travel time information”, but he has the starting and the arrival time.

Having someone else look over your work before moving on to the next step was crucial in the design process, as getting a fresh opinion on your work before continuing will guarantee if you’re on the right track, and if you’re not, it will tell exactly what is right in what field and what is wrong, and how to improve said thing. The middle button from the task bar is actually the Journey Planning page (the home page), that’s why it’s on the bottom navigation bar in the middle, not a “hidden metro functionality”, as it redirects the user back to the home page. Unlike the expert review says, the icon is not only used once – it is also used in the top bar next to plan journey.

Refined prototype:

Screen Shot 2017-04-11 at 10.17.02 AM.png

Changes made:

Departure / Arrival time are now placed together;

Double Search and Settings removed;

Hover states added;

Favourite route feature added;

Main button fixed;

List view made more clear;

Help wizard added;

Conclusion:

Having your prototype reviewed by a different person can help figure out the rights and wrongs in your design easily, as a fresh mind has a different, critical opinion on your design compared to your own opinion, and that can help you figure out parts of your design that wouldn’t stand out otherwise.

Having my product expert reviewed by a fellow student help figure out what I did wrong and aided me in coming up with solutions that will make my high-fidelity prototype more engaging and efficient.

Sources and Inspiration:

ns.nl, 9292.nl

Week 4

Your Prototypes

Screen Shot 2017-04-12 at 5.09.34 AM.png

(clickable version here and at the bottom of the article)

Expert review on my wireframes (done by a fellow student)

Expert Review (done by Jeroen Nijkamp)

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

 

Screen or Component What is wrong? How to improve?
Current Route The placement of the plus on the side of the screen to show the stops in between can be misleading. Perhaps try to place them between the start and end stop

 

  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
All The home screen icon is not a home, and can be misleading. It can make one think that its for metro exclusively. Make the home screen icon the Tripp3r Logo

 

  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

 

Screen or Component What is wrong? How to improve?
Results page Users cannot see what the duration of their route is on the results page. this means they have to calculate it themselves Include the total duration of the trip so that users can see and sort by that,

 

  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

 

Screen or Component What is wrong? How to improve?
Home Page should inform the user that the fields are required input, or at least which fields are required Include which input fields are required

  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

 

Screen or Component What is wrong? How to improve?
Home Page should inform the user that the fields are required input, or at least which fields are required Include which input fields are required

 

  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

 

Screen or Component What is wrong? How to improve?
na na na

  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

 

Screen or Component What is wrong? How to improve?
Home The last fill in bar on the home screen is not rounded on the right corner, but all the rest are Make the Box Rounded on the right corner

 

  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

 

Screen or Component What is wrong? How to improve?
HOme There is no information provided on the top of the page for the home screen, yet that’s where important info should be Place important info on the top of the home page, or perhaps the logo

  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

 

Screen or Component What is wrong? How to improve?
all except home A help functionlity is only provided on the home page Provide a help functionality to all pages

 

  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

 

Screen or Component What is wrong? How to improve?
All User colors to further help emphasize the company’s values: : moving quickly, respecting the environment (green color), keeping the customer satisfied (blue), being courageous and progressive (Yellow). add more color to the various elements. IE make the emissions number green. etc.

My expert review on a fellow student’s wireframes:

Expert review done for Jeroen Nijkamp

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

 

Screen or Component What is wrong? How to improve?
Home The placement of the back button (top right) is unusual. Consider placing it at the top left.

 

  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
All screens The top right button group would be good if the items were related to eachother Group items differently

 

  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

 

Screen or Component What is wrong? How to improve?
Home Users can not simply click plan after entering their location, they have to select a transport method. Clearly state what the defaults are.

 

  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

 

Screen or Component What is wrong? How to improve?
Home Not enough feedback Add required symbols next to necessary fields.

  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

 

Screen or Component What is wrong? How to improve?
Home Not enough feedback Add required alerts and symbols next to necessary fields.

 

  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

 

Screen or Component What is wrong? How to improve?
na na na

  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

 

Screen or Component What is wrong? How to improve?
Home The size of the map is never the same Try make map same size as results page

 

  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

 

Screen or Component What is wrong? How to improve?
Results Is the difference between the row striping the one extra transfer? Make clear the difference clear when using different colors at once.

  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

 

Screen or Component What is wrong? How to improve?
na na na

 

  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

 

Screen or Component What is wrong? How to improve?
na na na

 

Reflective discussion on what kind of improvements you need to do based on the expert review:

Based on the feedback I received from my colleague, I have learned a couple of mistakes I kept committing throughout the prototyping process that apparently aren’t as minor as I had thought. For starters, the center “planning” icon seems to be confusing, so that has to be changed to the logo of the app to make the impression of a “home” screen. Adding a route duration and moving the intermediate stops sign (the plus sign) between the departure and arrival could also be design choices that I have neglected.

Consistency is hard to keep while also having to fill a set of requirements, but it certainly isn’t impossible. However, I learned essential steps in the process of high-fidelity prototyping, and more importantly, I have learned how to work with a style that is assigned to me instead of myself creating my own style.

Conclusion:

Doing high-fidelity prototyping helped gather knowledge about transforming low-key prototypes into a high-fidelity, click-able, almost real-like app and using it to further refine the final product.

Although my overall design has some errors (the biggest concern of mine being the fact that Arial Rounded MT Bold does not render properly in the preview, as I designed it in Sketch but prototyped it using Adobe XD, but it can be seen in the screenshot and in the source file), I am pretty content with my first high-fidelity prototype and I am expecting to get to work more with such projects soon.

Link to clickable prototype:

https://xd.adobe.com/embed/207d1148-cd1a-4df2-893d-b0809b223a05/

Week 5

Screen Shot 2017-04-08 at 12.04.57 AM.png

Topic: Color

Hypothesis:

Will more users sign up if the action button is a positive colour as opposed to a negative colour? (i.e. green vs red)

Test plan:  

After doing my research about A/B testing I figured out that the best way to test my hypothesis would be by doing a modal sign up window which prompts the user to sign up to a newsletter. Because the newsletter is not necessary, the user will have to make the decision of either signing up using the coloured button or exiting the modal window. The variable in this particular situation would be the prominent done button.

For the design of the button, I decided that my control version (A) will have a green button, in this case the positive colour (with a meaning of balance, confirmation and growth), while for my variation version (B) I settled on using red. Although the meaning of red can be seen as energy, desire and action, it is also well-known for representing error, therefore people have mixed feelings about it and do not consider it “positive”.

The user’s task will be signing up to a newsletter. In order to measure the test and observe my user, my idea was monitoring the actions the users perform and noting them down in both cases of the A/B Test. Important decisions made by the users will be documented and their justification for the actions performed. That way, I can easily compare the results and figure out which version was more dominant dependant on my user succeeding rate and either confirm or deny my hypothesis. Whenever a user decides to advance to a new page (either by pressing the button and advancing, or backing out of the signup process), the direction in which they went will be noted, as well as the reasoning behind their action.

Control (Version A)

Variable: The control version features a green submit button, which can be associated with confirmation.

Variation (Version B)

Variable: The variation features a red submit button, which can be associated with errors.

Week 6

Screen Shot 2017-04-08 at 12.43.58 AM.png

AB Testing / Positive vs negative colour usage

Hypothesis:

Will more users sign up if the action button is a positive colour as opposed to a negative colour? (i.e. green vs red)

Results:

After researching if more users sign up if the “sign up” button is a positive colour (green) as opposed to a negative colour (red), my A/B Test resulted in my hypothesis proving out to be true, with 6 users clicking the green buttons versus 4 users clicking the red ones. Two users decided to do things that I couldn’t count as actual results (one did nothing, one clicked everything and had no reason behind it), therefore those two were not added to the total.