Add features to the above UI
Indicator to show the number of comments on a card.
Interaction that enables viewing comments on a card and replying to them.
Ability to change the settings of the card, ex: on a pie chart select only a certain set of values to show.
I began the process with white-boarding the requirements and what the basic flow of screens would be.
Considering layout options
I considered two options for how the comments interaction should look and feel.
Would it be more usable as a popup function or if it toggled into view and out on the right of the card.
Having comments on the side of a card would mean that the user never left the screen thus always seeing all the information but with the following cons:-
a) it could potentially break the clean card layout
b) seeing the comments in conjunction to all the cards would be overwhelming.
So I went with the comments-in-popup approach.
Next I noted down what the sequence of actions would be and what features the comment popup would support.
In this stage I noted down key features the comment popup would support and how it would behave:
- The popup has a main-content area where the card data persists and a comments section. Thus comments can be made while the data in question remains in view.
- Threaded conversations are possible instead of reply@username so that separate conversations will remain separate.
- Only most recent comments are visible by default. View more introduces the in popup scroll-bar.
-View more does not push away the comment bar at the bottom so the user does not have to scroll to the end to post a new comment.
- I also considered the behavior of edit and delete functionalities.
Defining the details
What would the number of comments notify?
- The total comments on a card? OR
- The total unread comments?
When a user is monitoring 6 cards at a time, they may not notice if the total comments on any cards increase.
After going through a few different possibilities with showing the total number of comments I settled on showing the new unread ones.
In the final version I settled on showing both.
If someone wanted a total number, that information was always visible.
The comment icon keeps track of new, unread comments serving as a visual cue and initiating user action.
Comments: userflow in wireframes
Comments: Mockups made with sketch
I created the final mockups in Sketch based on the wireframes.
Since each card has its own settings based on the data it would be easiest if the settings view toggled within the card.
I made the assumption that the settings for each card would be simple enough, like in the case of the pie chart, to be located within the area of the card.
Create high-level wireframes for a mobile application (platform agnostic) that will assist drivers in delivering packages on time. Show the entire user flow.
User is a package delivery person with minimum education
App will be deployed world-wide and will eventually be customized for local languages.
1) Login (credential or biometric)
2) Home which shows all the scheduled deliveries
a. Will be a list, most urgent will be shown first
b. Clicking a list will take the user to the shipment page
This page will show all relevant information for the shipment(address, weight, delivery contact)
User will be able to click “route” to go to the destination using turn-by-turn navigation
Once the user has delivered the package they will have to confirm in the app as “Delivery succeeded” or “Delivery failed”
4) User will go back to the homepage where the queue has updated itself and the user will go to the next shipment.
First I did some quick research on designing for internationalization and low-literacy.
Design guidelines I arrived at:
Leave room in the UI for translation; something that is 3 characters in English may very well be 7 in French (New --> Nouveau)
Avoid sentence based dialogues; sentence construction differ across languages.
Icons are good but be wary of metaphors in different cultures.
While these ideas are more relevant during the visual design & mockup stage, they still helped structure the wireframes.
The challenge asked for 'high-level' wireframes. To me this challenge was about demonstrating work I can deliver at the end of quick ideation session. I began from the context, worked out the taskflow and mapped the basic screens. I then created a user-flow diagram with more detail within these screens. The whole process took about 1.5 hours.
Based on the initial wireframes, I sketched out the high level userflow with the app. Here are the entire flow and individual screen explanations.