Tack Web application
My role: Product designer, UI/UX designer.
Company: Tack technologies, inc.
Tack is a tool that combines task management and chat into one platform, to make it easier for teams to collaborate.
Our Web application was the second version of our product. Our goal for this project was to transition our mobile platform into a more powerful web application.
The product: Tasks
The problem: To find what you have on your plate on Trello you had to fumble between multiple boards and scan through hundreds of tasks. We didn't feel like this was conducive to productivity, there was just too much noise. Our customers wanted a better way to view what tasks were assigned to them.
The solution: A task page that aggregates all tasks assigned to you + all assigned tasks from boards in a timeline format. This way users can have a easy + separated way to view what's on their plate at any moment. Noise reduction + A crucial part of accountability.
Our users spent most of their time on our app viewing tasks. Because of this, we wanted the task experience to feel immersive. We decided between an overlay vs a side menu popup. We ended up going with the overlay because it allows users to focus on the task at hand without any other distractions.
The product: Boards
The problem: From the feedback we received through customer interviews & testing our mobile platform, we realized we needed a way for teams to manage larger projects, a simple task list just didn't cut it.
The solution: Boards are an easy way for managers/users to view and participate in larger projects. We designed it to work in condition with our Tasks page (personal task list).
The problem: Although seemingly very simple, a question tat always popped up was "what should cards look like? Just cause we could put anything on a card doesn't mean we should? The biggest question was: What can we do to best balance the design without skimming on functionality??
The Solution: After looking at other tools within our space and balancing what users valued the most, we came up with a few candidates:
1. Channels tags (Most important piece of information by far)
2. Due date (crucial for accountability/project planning)
3. Profile picture (to balance the empty space and provide color/emotion)
4. Number of tasks left (gives both managers and users a brief glimpse at progress made within a task)
5. Number of messages (weakest feature but still very common amongst similar tools, also needed one more to balance the design).
The product: Announcements
The problem: Noise is a huge issue for both managers and employees. When "internet is down, don't come in for work today" gets posted in a group, chat thread or forum and gets drowned out in the hundreds of messages coming through two things happen.
1. Employees/members do not see the message.
2. Employees come to work and wonder what is going on.
Current communication makes it extremely hard to separate crucial information with fluff, and because of this users default to muting or even ignoring most channels and groups, losing multitudes of crucial information.
The solution: We created announcements to help reduce the noise and to separate out fluff from important information. We chose to create a non-intrusive but visible interface for announcements on the top bar next to notifications. The system is read only (because announcements are basically pinned notices, no need to interact + this way there will be less noise which equals more retention and CTR) so users cannot interact with them in any way other than viewing them. The goal of this feature was to give users a system that they are confident will only show them important information.
The final product: Tack Demo
Note: this demo was created entirely on inVision and is a interactive prototype
What I've learned
This was a three month long design project. Prior to this project, the concept of transferring our mobile design onto the web had me dumbfounded. As such, my first iteration was just merely an enlarged copy of our mobile app, clearly not the right way to design for the web. But after countless hours of research, inspiration (Oh what would I do without you Dribbble?) and user tests I realized that what I needed to do was completely revamp how each feature is displayed and each feature interacts with the interface.
Throughout this process I've learned how to effectively design for both mobile and web and why certain design decisions are made on mobile vs web. This project has also made me fall back in love with flat design. If you have any questions feel free to contact me!