wireframes & user testing

1

logandowell.com

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

2

Mobile 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 Skype’s 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

3

Mobile PlatformWireframe user flows for use on mobile devices.

4

Add & Delete Calendar EventMobile Platform

Calendar’s 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

5

Add & 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 event’s page to edit its details.

04 06 08

07 0905

Back to Start

04

05 06 07

08 09

OPTIONAL

6

Add & Delete ProjectMobile Platform

Project home page. Enter the project’s name.

Enter the project’s description.Click to create a new project.

01 03

0402

Go to Calendar

01 02

03 04

OPTIONAL

OPTIONAL OPTIONAL

OPTIONAL OPTIONAL OPTIONAL

7

Add & 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 project’s page to edit its details.

05 07 09

08 1006

Back to Start

05

06 07 08

09

10

OPTIONAL

8

Tablet PlatformWireframe user flows for use on tablet devices.

9

Add & 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 event’s 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 project’s description.

Enter the project’s 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 project’s page to edit its details.

05 07

06

05

06 07

16

Add & Delete ProjectTablet Platform

A project’s 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 event’s 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 event’s 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 event’s 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

Project’s 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