Case Study

Tickary

Tickary is a project and task tool for small teams. We took its web app and its phone app from UX research to development.

Client:Tickary

Year:2023

Industry:Productivity software

Services:UX research and flows, UI design, design system, development

Platforms:Web app and phone app

Tickary web dashboard and phone home screen shown together

The Problem

A project tool for small teams had to work on the web and on a phone.

The client was a startup building a project and task tool for small teams. The brief was a web app and a phone app that work as one product.

Tickary project board on the web beside the same project as a board on a phone

Web app screens, from the dashboard to settings.

Phone screens, from sign in to saved items.

Ways to see a project: list, grid and timeline.

Solution

We mapped the flows first, then drew both apps on one design system.

We started with UX research and the flows for projects, tasks and messages. The web app and the phone app share one design system, so a project looks and works the same on both. We then developed both apps from those screens.

01 Web app

Start with today's work, then open the project.

The dashboard opens on today's tasks, project progress and the week ahead. Projects show as a list, a grid or a timeline. Open one and its tasks sit on a board with four columns. Comments and attachments have their own tabs.

Tickary web dashboard with a weekly task chart, project cards, today's tasks and a week calendar — Dashboard: weekly chart, project cards, today's tasks and the week calendar

Tickary projects shown as a list, a grid and a timeline — Projects as a list, a grid and a timeline

Tickary project page with a task board in four columns, a comment thread and an attachments tab — Project page: task board, comments and attachments

02 Phone app

The same product, sized for a phone.

The phone app shows the same projects, tasks and numbers as the web app. Home holds projects, upcoming meetings and active tasks. Tasks open as a list or a board, and a new project takes three steps: details, dates and team.

Tickary phone screens for home, progress, notifications and calendar — Phone: home, my progress, notifications and calendar

Tickary phone screens for a task list, a task board, edit project and create task — Phone: tasks as a list and a board, edit project, create task

Tickary phone flow for a new project in three steps: details, dates and team — New project in three steps: details, dates, team

03 Team

Talk and plan next to the tasks.

Messages, groups and the schedule sit in the same app. Start a direct message or a group, share images in a thread, and see the month and the day's tasks on the schedule. The phone has the same chat, with a list, a thread and a two step new group.

Tickary web schedule with a month calendar, a message thread with images and a new group screen — Web: schedule, a message thread and a new group

Tickary phone chat screens: message list, a thread and a new group in two steps — Phone: messages, a thread, and a new group in two steps

04 System

One system behind both apps.

The web app and the phone app share one font, Plus Jakarta Sans, and one set of colors. Navy is for text and main actions, blue marks what is active, and orange marks time and progress. A task due within two hours shows an orange chip on both.

Colors, type and parts used on both apps

05 Outcome

One product on the web and on the phone.

Webus delivered a web app and a phone app on one design system. A project shows the same tasks and progress on both, and a due time or an unread count looks the same on each.

Your project