Paper Prototyping | User Testing | Branding
Illustrator | InVision | InDesign
As an avid follower of all things Google, I was impressed with their Material design visual language and started to notice more and more apps applying their rules. After exploring the resources online, I set about to try and create my own app adhering to their design principles. I decided to create a modern task app, with a scenario loosely based within a shared house by a family or house-mates. This was a quick turnaround personal project and allowed me to do user testing with low fidelity prototyping utilizing basic pen and paper materials before moving towards a finished polished piece, resulting in a high-fidelity mock-up prototype prepared in sketch and InVision.
I’m confident TIKT will check your box.
To start the project off, I selected a few existing task apps available and downloaded them to have a play around on my mobile device, tablet and laptop. I did a strength and weakness analysis to find some insights and determine where they might be failing and features I could improve.
To get the ball rolling I quickly mapped out a few screens that would symbolize one specific task. As you can see from the scribbling and roughness, there were immediate issues with the design and placement of icons, etc. I passed it among my peers and took lessons learned from this quick 5 minute exercise, noted the errors, and sketched up a more refined version with more content (Revision 1).
And so with Revision 1, I set out to do my first round of User testings. I had prepared 8 screen with and instructions of a simple task to navigate to and 'tick off' feeding the fish. I utilized the 'Wizard of Oz' technique to show button and icon changes and as the users scrolled through menus and attempted to interact with the prototype. I realized I was involving too many steps to complete tasks or follow the process and that these actions should be automatic and straightforward. Findings from the User Study uncovered the need for a ‘Quick Task’ option that didn’t require the filling out of other attributes like icon, notes or participants, etc. But the user would still have the ability to fill these details in later. Also having the option of adding a task anywhere in the app, and being able to assign it to a group of choice during this process, meant that there were multiple routes towards the same outcome, adding to the ease and efficiency. A full reported list of findings can be found here.
From the user testing, I found that people get enjoyment and a sense of achievement from completing tasks, so I made the click on the check-box and subsequent ‘tick’ an easily accessible feature and highlighted it as the main interaction of the app. This, in turn, dictated the app name, branding and logo; using a tick to top off the ‘i’ in the logo and primarily using the color green in our color palette.
Screenshots of color palette mock-up from material.io
The rest of the color palette consists of greys and a contrasting white to highlight icons and further functions. Initially, I based the design on a grey background and utilized the electric green colors and white highlights, but it affected the look and feel of the app, conveying an appeal almost like a computer game or technician’s software program. As the app should appeal to a larger demographic of people, I returned to a plain off-white background as this would still lift shadows and allow for contrast between the buttons and function but not look too whitewashed.
‘Feed & Clean Fish’ set the task to occur every Mon, Wed, Fri and Sun.
Add a new task - ‘Collect the Shopping’, set the time for 3:30pm on Thursday 13th April.
Click here for external link
To start the project off, I selected and downloaded a few existing task apps: Google Keep, ToDoist, and Remember the Milk. I had a little play around on my mobile device, tablet and laptop, then did a strength and weakness analysis to find some insights and determine where they might be failing and features I could improve.