UI Case Study: Squeeze app (Part 2)

A user-centered design process on designing a productivity app for people that work from home

Brand Attributes

In order to define the brand, I came up with four brand attributes to differentiate my app from competitors. I wanted Squeeze to be:

• Accurate but adaptable
• Broad but not complex
• Serious but not boring
• Professional but appealing

Moodboard and Style tile

I looked for inspiration in nature and architecture, where the design is accurate, but flexible and adaptable to its environment.

As is an app for a professional use I choose blue for the main colour, because it transmits stability and trustworthiness. And pink as an accent because it makes the app more appealing and less formal.

Moodboard

Design evolution

Daily schedule

Map

Timer

Iterations

I also designed different category tags and tested.

Interactions

Adding tasks

Tasks can be added by dragging and dropping a category or tapping on a blank space in the schedule. An edit mode will be open according to the category you have chosen.

If a task has been added on the to-do list before, you can find it on your edit mode. Just type @ followed by the name of the task and a drop-down list will show you the results. The details of the task will be shown.

Drag and drop any category into the blank space to add a task (gif01) I The name meeting field allows you to find any task already uploaded on the to-do list (gif02) I Tap any blank space to add a task (gif03)

Expand, lock and rearrange tasks

Tasks can be expanded through the edit mode or dragging the box (gif01) I Immovable tasks can be locked, so you make sure they are not arranged (gif02) I Tasks can be arranged only by dragging them (gif03)

Calendar, map and timer

When a play button of a task is played, a bar on the bottom will appear. The bar shows a countdown with the remaining time to perform the task. The task has also a visual bar that shows the progress.

The app aims to encourage to manage your time properly. If you finish a task early you can always stop the countdown and use the spare time as you wish.

The calendar can be revealed whenever you want by dragging the arrow down on the daily schedule feature (gif01) I The map shows coffee shops ‘freelance-friendly’ and coworkings (gif02) I Timer function (gif03)

Read the UX Study of this project (Part 01)