Design process employed to design a task management app called Taskly. This project was carried out as part of an online training course I took at CareerFoundry.

1. Designing Taskly CareerFoundry UX Design
Task 9.1 by Tobias Ehni

2. Design Process for Taskly
Chapters Selected exercises Hours (estim.)
Overview User-centered design, heuristic evaluation, sketching, redesign 30
Personas Competitor analysis, MVP, surveys, interviews, business goals, Experience
Mapping 50
Information Architecture Sitemap, Copywriting, HTML, SEO 25
Paper Prototypes Responsive design, HCI & GUI elements, paper wireframes, accessibility, usability
testing 1, iterating & finding solutions 43
Wireframes Responsive design, mobile first design, tablet and desktop design, interactive
prototype 71
Lean UX Lean UX, build measure learn, hypothesis-driven design, emotional design 19
Visual Design Color, font, typography, style tiles & UI kit, usability testing 2, applying visual
design, high-fidelity wireframes 36
A/B Testing & Analytics Google analytics, click testing, preference testing, AARRR 22
Production-ready Product Visual mockup, portfolio, resumé, self-marketing, final deliverable 20

3. Highlights

4. Strengths
- design (visual and interaction)
- loyal customers
- pay once / no subscription
- app expresses personality
- a lot of experience
(first released in 2009)
- "assistant" to outsource tasks
(e.g. buy flowers)
- Content marketing (blog on
productivity & life hacks)
- integrating AI and voice UI
Weaknesses
- only one option for free trial
- no content marketing
- product name tricky for SEO /
ASO
- no free upgrades (2.x to 3.0)
- lagging behind in features
(checklists & reminders are
“new”)
- one-man show
- blog centered on business /
development, not productivity
- no desktop version (only web)
- poor usability
- poor interaction design
- annoying in-app sales &
notifications
- few features
Opportunities
- solid fan-base
- language technology
- new distribution channel
"setapp"
- free mobile apps
- everything free except for
premium
- AI / voice UI
Threats
- cross-platform apps
- apps with free trial
competition has more manpower
others have better marketing (content
marketing)
- competition in the freemium
productivity app space
Competitor
Analysis Things 2Do any.do

5. Interview findings (overview)
One-hour interviews with four
potential users revealed 59 user
needs in 8 clusters.
○ capture (3)
○ plan (13)
○ manage (10)
○ be reminded (4)
○ finish (2)
○ view (13)
○ review (7)
○ collaborate (7)

6. N=24, 5-point scale (“not at all important”, … , “very important”)
Survey findings (most important features)

7. Personas

8. Card Sorting

10. MVP
Business requirements
1. Free trial
2. Price plan
3. LinkedIn integration
Key user needs
1. Plan the day
a. tasks
b. appointments
2. Set goals for the week
3. Setting reminders
4. Defining priorities
Key features
1. Today view (tasks and appointments)
2. Define most important tasks for today
3. Create reminders
4. Prioritize tasks
5. Set goals for the week
Technical requirements
- Web app
- Responsive design
Aesthetic requirements
- Ease of use
- Simplicity
- Elegant design

11. 1. First Release
○ integrated project and calendar view
○ setting a daily goal
○ scheduling tasks
○ basic functionality (creating & finishing tasks, creating projects)
2. Second Release
○ setting reminders
○ assigning priorities
○ planning the week
3. Third Release
○ create a team and inviting others
○ give the option to notify each team member when a task is completed
○ show teammates’ tasks and priorities and assign them to their respective team members
○ visualize a project in progress and who is working on it
Release plan

12. Copywriting
Definition of tone of voice:
1. Engaging, but not pushy.
2. Emotional, but not
over-enthusiastic.
3. Clear, but not dry.
4. Conversational, but not wordy.

13. Website flows
1 2 3 4
1 2 3 4
1
2 3
1 2a 2b 3

14. Paper Prototypes

15. 8 features for 3 devices:
- Add a new task (see example screens)
- Complete a task
- Set a priority
- Set a reminder
- Today view
- Add a list
- Edit a list
- Rename
- Finish
- Delete
- Bulk edit items
- Empty lists
Wireframes

16. Hypothesis-driven design - rationale
Rationale
One of Erik’s most important overall goals is to
work efficiently.
So far, Taskly only allowed to perform an
operation on one task at a time.
Assumption
We assume that bulk operations on several
tasks at a time will suit Erik’s needs better
because he will be able to work more efficiently
(achieve the same result with less effort).

17. Hypothesis-driven design - wireframes
Hypothesis
We believe that bulk editing tasks is essential
for Erik.
This will achieve a better score for effectiveness
and efficiency.
We will have demonstrated this when we can
measure a reduction of 50% or more in time on
task and number of errors compared to the
current measure.

18. Visual Design - inspiration

19. Visual Design - style guide

20. Visual Design - applied

21. Preference testing
- Online test with 25 participants
between versions A and B.
- Participants were shown both designs
randomly and given the following tasks:
- Indicate which design they prefer.
- State what made them pick that design.
- Write down three words which describe that
design.
- Participant details
- 25 participants from usabilityhub panel
- 56% male, 44% female
- Mostly full-time employed (44%)
- Ages 19 - 74, recruited internationally
- Mostly self-identified as having advanced
technical proficiency
- Please find details and raw results online.Version A Version B

22. Preference testing result
- Version B was preferred by 72% of
participants preferred (99% significance)
- Most participants referred to the better and
cleaner look of Version B when asked what
made them pick that design.
- Version B is described as:
- Simple
- Clean
- Clear
- Easy
- Minimal
- Efficient
Version B
Winner

23. Click testing

24. Google Analytics / AARRR for Taskly Website

25. Final Design - mobile

26. Final Design - tablet

27. Final Design - desktop

28. Contact me - hire me!
Tobias Ehni
UX Designer, Berlin
LinkedIn Profile
Behance Portfolio
tobias.ehni@gmail.com