Design high fidelity wire-frames

[zuzana-kunckova]

As referenced in #1 , I am going to design the app using Affinity Designer. I will prepare few different designs to chose from.

[zuzana-kunckova]

This is the first version of the app design. Grey scale only to keep our focus on information flow and user experience. I'm also working on creating some user stories, will post them later.

Comments and feedback welcome.

[muyaszed]

Good job i like the tone and simplicity. I believe you will come out with the desktop version as well

[zuzana-kunckova]

User Stories

As a user, I want to create a new ToDo:

• see the welcome screen
• click on New ToDo button
• screen changes to New ToDo screen
• type the new ToDo
• press enter or tap the 'plus' button
• ToDo is added to the list below

As a user, I want to add some information about a ToDo:

• select the ToDo by clicking or tapping
• screen changes to ToDo Options
• click or tap on 'add deadline', phone's native calendar app opens to select a date/time
• click or tap on 'add description', type a description of the ToDo
• click or tap on 'Save' to save

As a user, I want to make ToDo as completed:

• select the tick on the left of the ToDo by clicking or tapping
• tick becomes green, ToDo's becomes grey
• ToDo is automatically removed by the end of the day

As a user, I want to cancel or delete a ToDo:

• select the trash can icon on the right of the ToDo by clicking or tapping
• a confirmation message appears asking the user if s/he is really sure about deleting the ToDo
• user can respond 'Yes' or 'Undo/Cancel'
• if user responds with 'Yes', the ToDo is removed from the list and placed in the folder Deleted ToDos (accessible from the Main menu)
• deleted ToDos will be removed from the Deleted ToDos folder within 24 hours
• if user responds with 'Undo/Cancel', delete request is cancelled and ToDo remains in the list

As a user, I want to restore deleted ToDo from the Deleted ToDos folder

• click or tap on the hamburger menu button on the top right of the screen
• click or tap on the Deleted ToDos folder
• list of ToDos deleted in the last 24 hours is displayed
• click or tap on the ToDo to be restored
• ToDo is restored and displayed in the list of ToDos

As a user, I want to create a new Project

• see the welcome screen
• click on New Project button
• screen changes to New Project screen
• click or tap on 'add description' to add description of the project
• click or tap on 'Create' to create a new project

or

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• click or tap on New Project
• screen changes to New Project screen
• click or tap on 'add description' to add description of the project
• click or tap on 'Create' to create a new project

As a user, I want to create a new group Project

• see the welcome screen
• click on New Project button
• screen changes to New Project screen
• click or tap on 'add description' to add description of the project
• click or tap on the 'email' input field to add an email of another user
• click or tap on the 'plus' button to add user
• repeat to add additional users
• click or tap on 'Create' to create a new project

As a user, I want to access the statistics of a group ToDo

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• see a list of all available Projects
• select the project
• screen changes to the Project screen
• click or tap on the 'Statistics' button on the lower part of the screen
• statistics about the project is displayed

As a user, I want to access the information about a group ToDo

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• see a list of all available Projects
• select the project
• screen changes to the Project screen
• click or tap on the 'Project Info' button on the lower part of the screen
• details about the project are displayed

As a user, I want to add new ToDo to a group ToDo

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• see a list of all available Projects
• select the project
• screen changes to the Project screen
• click or tap on 'New ToDo'
• type the new ToDo
• press enter or tap the 'plus' button
• ToDo is added to the list below

As a user, I want to change details or add users to a group ToDo

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• see a list of all available Projects
• select the project
• screen changes to the Project screen
• click or tap on the 'Project Info' button on the lower part of the screen
• lick or tap on the 'Edit' button
• screen changes to 'Edit Project' screen
• click or tap to edit description
• click or tap on the 'plus' button to add user
• click or tap the 'Save' button to save

As a user, I want to change user settings

• see the welcome screen
• click or tap on the hamburger menu button on the top right of the screen
• click or tap on 'Settings'
• screen changes to User Settings
• click or tap on 'Name' input field to add/change user name
• click or tap on 'Email' input field to add/change user email address
• click or tap on 'Twitter' input field to add/change user Twitter handle
• click or tap on 'Facebook' input field to add/change user Facebook name
• click or tap on 'Save' to save new settings

[zuzana-kunckova]

I have created a mock-up for the full screen version. The layout would be pretty much the same as on the mobile app, it would just be centered on the larger screen.

I have few possible colour palettes - they are just an example, I can use any other.

I'm also experimenting with background pattern for the top part of the app. I think it gives the website a little bit of texture. It's very subtle (last image).

We could also include a 'change your background' option to the desktop version at least, so that the users can select the colour pallet they like.

Finally, there would be some interactivity on the coded version, e.g. when pressing a button or hovering over the contact us/about us.

[fokoid]

Really like these new concepts. Personally I prefer the plain colours and gradients but as you say this could be a user preference anyway. A lot of detail in the user stories too---they should provide guidance as we develop the app.

[zuzana-kunckova]

Thank you @thornecc . I also added another variation (last image), when the button will be the same colour as the background. That will be the same for the rest of the app as well, once we (or the user) decide on the colour, it will be consistent through the app.

I can start coding this up, if you're happy with it? Will give few more days to anyone else to comment on it first, though.

[owenip]

Cool design @zk433 , I like the colours and the simplicity.

I have concerns about the behaviour of toDo Tasks:

1. According to the user stories, I understand if the user want to cancel a toDo, he will press the cross. Then a red stroke appear on the tasks that would be removed by the end of the day. For me I would prefer cancelled task should be vanished from the list or moved to a bin?
2. Tick means the task is finished. But cross could refer to both delete or unfinished. Maybe replaced with a trash can as following?

[zuzana-kunckova]

Hi @owenip , thank you for the feedback.

Do you mean that once cancelled, the task should immediately dissapear? Or is it just about the icon?

I was thinking of leaving the task there (crossed) for the rest of the day in case the user decided to 'bring it back to life'. But it's definitely possible to remove straight away (in which case the 'trash can' icon would be more suitable.

We can also introduce a message that will ask the user for a confirmation, whether they really want to delete the todo.

[owenip]

I would prefer the task immediately disappear after cancelled. Perhaps cancelled tasks can be moved to bin (basically a project that being cleaned by the end of the day). So users could retrieve them if needed.

And yes, a confirmation before deleting would be helpful.

[zuzana-kunckova]

I can definitely implement this. I could add the Bin to the main menu and the confirmation message could include info like "deleted messages will be stored in the Bin for the 24 hours".

@thornecc , what do you think?

[fokoid]

This seems reasonable. Perhaps something like Google Inbox, where deleting an item creates a notification with an "Undo" button for a few seconds.

[zuzana-kunckova]

I'll change the icon to a trash can and add this to the user stories.

If there is a 'undo' button, then the confirmation message would be redundant, no?

[fokoid]

The undo button is inside the confirmation. Like in Wittr when an updated service worker is waiting there was an update notification with Reload and Dismiss buttons.

[zuzana-kunckova]

Oh yes, I get it now. Changes are on their way.

[zuzana-kunckova]

Mockup has been updated with new trash can icon (see above) and the User Stories have been updated accordingly.