Wireframes & User Testing

  • Published on
    28-Jan-2016

  • View
    26

  • Download
    0

Embed Size (px)

DESCRIPTION

This is a report showcasing the user flow of interactive wireframes (with links to the Invision version) after three rounds of user testing had been done.

Transcript

  • 1logandowell.com

    Taskly WireframesThis is a report on non-interactive and interactive wireframes after extensive user testing.

  • 2Mobile Platform

    Tablet Platform

    Desktop Platform

    Add & Delete Calendar Event

    Add & Delete Calendar Event

    Add & Delete Calendar Event

    Add & Delete Project

    Add & Delete Project

    Add & Delete Project

    03

    08

    17

    04

    09

    18

    06

    13

    22

    Contents Follow the bright blue road!The user flow that must be taken to achieve the goals set out during the user test have been guided by a large bright blue arrow. The grey arrows are optional pathways to achieve extra goals.

    Testing ProcessTo perform the interactive user testing, the following process for each individual tester comprised of:

    Summarising the persona they would adopt; Giving them a run down of what Taskly is and what it wants to

    achieve; Reassured them they are not being tested, but rather it is the

    application; Provided them with a clear goal as to what they needed to do,

    once they achieved that goal they would be given a new goal to follow until the exercise has been completed; and

    Asked follow-up questions to help find underlying points they agree or disagree on.

    Features tested for each person involves the Calendar and Projects section (adding, editing and deleting an event and project). Please note that these tests have been conducted physically with paper prototypes and online using Invision through Skypes screen sharing.

    Interactive WireframesThe following links will allow you to test Taskly for yourself, using Invision:

    Mobile: https://invis.io/UA54L6FBJ Tablet: https://invis.io/S654LPH5M Desktop: https://invis.io/5Z5AGM7T3

  • 3Mobile PlatformWireframe user flows for use on mobile devices.

  • 4Add & Delete Calendar EventMobile Platform

    Calendars home page. Enter details into new calendar event.

    Add new calendar event.

    01 03

    02

    Go to Projects

    01 02

    03

    OPTIONAL OPTIONAL OPTIONAL OPTIONAL OPTIONAL

    OPTIONALOPTIONALOPTIONALOPTIONAL

  • 5Add & Delete Calendar EventMobile Platform

    Confirmation that you created a new calendar event. Sharing the event with a team or individual. Warning prompt when deleting the event.

    Team and individuals added to the event. Confirmation that event is deleted, can undo.A calendar events page to edit its details.

    04 06 08

    07 0905

    Back to Start

    04

    05 06 07

    08 09

    OPTIONAL

  • 6Add & Delete ProjectMobile Platform

    Project home page. Enter the projects name.

    Enter the projects description.Click to create a new project.

    01 03

    0402

    Go to Calendar

    01 02

    03 04

    OPTIONAL

    OPTIONAL OPTIONAL

    OPTIONAL OPTIONAL OPTIONAL

  • 7Add & Delete ProjectMobile Platform

    Confirmation that you created a new project. Invite a team or individual to collaborate. Warning prompt when deleting the project.

    Team and individuals added to the project. Confirmation that project is deleted, can undo.A projects page to edit its details.

    05 07 09

    08 1006

    Back to Start

    05

    06 07 08

    09

    10

    OPTIONAL

  • 8Tablet PlatformWireframe user flows for use on tablet devices.

  • 9Add & Delete Calendar EventTablet Platform

    Calendar home page.01

    Go to Projects

    01

    OPTIONAL

    OPTIONAL

    OPTIONAL

  • 10

    Add & Delete Calendar EventTablet Platform

    Pop-up to create a new event. Add a description to the event.

    Drop-down menu to select where to post event.

    02 04

    03

    02

    03 04

    OPTIONAL OPTIONAL

  • 11

    Add & Delete Calendar EventTablet Platform

    Confirmation that you created a new calendar event. Drop down menu to share with a team or individual member.

    A calendar events page to edit its details.

    05 07

    06

    05 06 07

  • 12

    Add & Delete Calendar EventTablet Platform

    Edit event page with team and individuals added. Confirmation that the event has been deleted, with undo.

    Warning prompt when going to delete an event.

    08 10

    09

    Back to Start

    08

    09

    10

    OPTIONAL

  • 13

    Add & Delete ProjectTablet Platform

    Home page for projects; projects horizontally scroll.01

    Go to Calendar

    01

    OPTIONAL OPTIONAL

    OPTIONAL OPTIONAL

  • 14

    Add & Delete ProjectTablet Platform

    Pop-up to create a new project. Enter the projects description.

    Enter the projects name.

    02 04

    03

    02 03

    04

    OPTIONAL

  • 15

    Add & Delete ProjectTablet Platform

    Confirmation that you created a new project. Invite a team or individual to collaborate.

    A projects page to edit its details.

    05 07

    06

    05

    06 07

  • 16

    Add & Delete ProjectTablet Platform

    A projects page with team and individuals added. Confirmation that the project has been deleted, with undo.

    Warning prompt when attempting to delete a project.

    08 10

    09

    Back to Start

    08

    09

    10

    OPTIONAL

  • 17

    Desktop PlatformWireframe user flows for use on desktop computers.

  • 18

    Add & Delete Calendar EventDesktop Platform

    Calendar home page.

    A window to add a new event (pushes calendar dates down).

    *Projects can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    01

    02

    01 02

    OPTIONAL

  • 19

    Add & Delete Calendar EventDesktop Platform

    Drop-down menu to select where to post the event. Enter the events description.

    Drop-down menu to reveal options for the time and date.

    03 05

    04

    *Projects can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    03 04

    05

    OPTIONAL

  • 20

    Add & Delete Calendar EventDesktop Platform

    Confirmation that you created a new calendar event. Drop-down menu to add teams and individuals to share event.

    A calendar events page to edit its details.

    06 08

    07

    *Projects can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    06 07 08

  • 21

    Add & Delete Calendar EventDesktop Platform

    Calendar events page with team and individuals added. Confirmation that the event was deleted, with undo.

    Warning prompt when attempting to delete the event.

    09 11

    10

    *Projects can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    Back to Start

    09

    10

    11

    OPTIONAL

  • 22

    Add & Delete ProjectDesktop Platform

    Projects home page.

    Pop-up to create a new project.

    01

    02

    *Calendar can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    01 02

    OPTIONAL

  • 23

    Add & Delete ProjectDesktop Platform

    Add a project name.

    Add a project description.

    03

    04

    *Calendar can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    03 04

    OPTIONAL

  • 24

    Add & Delete ProjectDesktop Platform

    Confirmation that a new project was created. Drop-down menu to add teams or individuals to the project.

    Project details page, able to edit all details from here.

    05 07

    06

    *Calendar can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    0506 07

  • 25

    Add & Delete ProjectDesktop Platform

    Project detail page with a team and individuals added. Confirmation that the project was deleted, with undo.

    Warning prompt when attempting to delete a project.

    08 10

    09

    *Calendar can be accessed via the side menu at any time, so long as the menu is shown and there are no pop-ups or prompts that are in focus.

    Back to Start

    08

    09

    10

    OPTIONAL

  • logandowell.com