Design Details of Task Page
I’d like to talk more about Task Details Page in detail. Not only because this is the one I put the most effort into, but also because I learned how to design under constrainsts.
1. Sharing a Task: Untraditional research helps
Before
During heuristic evaluation, it was confusing even for me to figure out what “Read Only” (Visitor) mode was and what differences were between several modes of permission.
Data also validated that. Only 16.7% people shared successfully after they hit the sharing button on mobile. Something must be wrong with the sharing.
I did several rounds of iterations. The first iteration mainly focused on the wording. I also changed the order of sharing methods based on relative usage frequency.
Obviously, that was far from enough. Not until I discussed with customer success manager for customer complaints did I discover the tradeoff between privacy v.s. convenience.
- Privacy: Users are hesitate to toggle the sharing button on, because, with the "Visitor mode" on, anyone who get access to this link can see the content without logging in.
- Convenience: Users need to share tasks to colleagues on Wechat.
After
This insight opened a door of new possibilities. The new design allowed users to share without toggling the “Visitor mode” button on, i.e. they can share tasks to their colleagues without worry of information leakage.
It also mirrored the existing capability of web users. If users can copy a URL from a browser and send the link to their colleagues through Wechat, why can’t they do the same thing on mobile?
2. Changing Task Stage: Use data to justify intuition
Task is the core piece of our product. Project management without changing task stage, say, from “To Do” to “Work in Progress”, is impossible.
Sounds obvious, but I couldn’t get the engineers to buy in. So I approached our data analyst to ask for more evidence. It worked. Data shows that the average number of events per action is as high as 20 times, much higher than other events such as copying or archiving.
Average number of events per action (Changing Task Stage) is as high as 20 times.
As you can see, one of the most fascinating thing to work in a in-house design team is the ability to work closely with the engineers and convince them of your design decisions.
After
I opted for more obvious call-to-action by moving the button to the upper right corner.
I also reduced the stepes of changing task stages by landing users on the task page page without touching project or task group. This, of course, can save them a lot of headache.
3. Two Other Core Actions: Inspirations from design trends
Both inviting colleagues and commenting on a task are low hanging fruits. The goal is to make it more obvious to invite colleagues and make it easier to engage in conversations. I drew inspiration from Dropbox’s header with circle images and Facebook’s new messaging design paradigms separately.
The header with circle images is a more effective call-to-action to encourage people to invite colleagues than a grey cell hidden below the main task
Explorations
Final Version
The messaging design paradigms empower people to converse better than message board styles.
Before
After
4. Other Changes: Every detail matters
Aside from those core actions, I also did a variety of design treatments to find opportunities on improving user experience on task page:
Helped people break up the work by expanding subtasks in a checklist format.
Made the date easier to select by changing from default date picker to a calendar view.
Made the new activities easier to read by scrolling automatically to the bottom of the task page from their inbox.
Improved navigational gestures by enabling people to swipe back out into Task Panel.
Provided a more convenient photo uploading experience by placing recent photos right at the top of menu.
