Stacck — A UX/UI Case Study

Context

Stacck is a venture-backed startup based in Singapore that develops communications and task management tools (via mobile apps and software) for businesses with distributed staff. The main product is an app that allows managers to send tasks in the form of assigned cards. Our main customers were restaurants and cafés.

Problem

The 2 main app user roles are managers and their employees. We noticed that the managers were sending very few tasks, although this was a product they were paying for as a monthly subscription.

So our main goal was to improve the number of tasks being sent by managers.

This was the initial process to send out a card:

1. Choose type of card | 2. Enter title and description | 3. Choose to send to individuals or groups
4. One more tap to send to groups | 5. Choose group/individual | 6. Confirm and send

Team and role

I led the entire UX/UI process which included: user interviews, user testing, validating user-behaviour hypothesis, prototyping, wireframing and final hi-fi designs.

Also involved in the process were 2 members from the Customer Success Team, who helped me gathering feedback to define our assumptions, introduced me to some of the customers, organised the customer visits and did some of the testings to Chinese-speaking users.

Another key member on the project was the Product Manager who worked side-by-side with me on ideating the prototypes, helping with the on-site user testing and analysing the takeaways in order to choose the final solution.

Approach

The design process was structured in 4 different steps:

  1. Analysis: we needed to determine the problem that we had and the main assumptions why this was happening.
  2. Research: after stating all our assumptions we needed to contact our users to determine which one was correct. Depending on the assumption we used different methods for testing: interviews, prototypes, etc.
  3. Conceptualisation: once we knew the reason why the problem was appearing, it was time to prototype possible solutions and obtain feedback from our users. This phase should be iterative.
  4. Design: at this stage we should have an ideal solution for the problem, it is time to make it beautiful and match the corporate style and guidelines.
Early design explorations

1. Analysis

We gathered some initial feedback from our users and realised that managers felt that sending tasks was slow.

We explored different potential solutions to the problem and we ended up with these 4 ideas:

  1. Video instructions: even when uploading videos was already a feature when creating a task, it was still mandatory to add a title and a description. We wanted to remove that typing bit and have only the video as the instruction.
  2. Audio instructions: same idea as in option 1 but having only an audio as the instruction.
  3. Images + captions instructions: we also explored this flow, similar to what Snapchat or other apps were doing, to upload multiple pictures with captions to explain the task. We called this the Snapchat flow.
  4. Pre-filled cards/templates: in order to speed up the flow to send a task, we could design pre-filled cards that the users could send with less effort.
Snapchat flow wireframe

2. Research

We started with some research to validate that our potential solutions would solve the problem. Even if these solutions looked good to the managers, we also needed to validate that the task would be understood by the employee who was receiving it.

  • Assumption 1: Employees are able to understand video, audio and images + captions instructions.
  • Test 1: We prepared sample instructions of our 4 ideas and tested with employees how well each of these were understood.
  • Assumption 2: There is a proper environment to listen to audios.
  • Test 2: We challenged employees to listen to different audios as we thought this could be a potential problem in their work environment.
  • Assumption 3: Managers know how to send these new types of instructions.
  • Test 3: This one may seem obvious but we wanted to see if managers were able to send a video, an audio and a flow of pictures with captions. We let them use different apps and some prototypes that allowed this behaviour and asked them to send videos, audios, etc. to their employees.

We tested on-site with 15 people (3 managers, 12 employees). The prototypes were designed in Sketch and built with Marvel.

Snapchat flow prototype

Outcome of the testing:

  • We confirmed that the managers were able to send video and audio tasks but were less comfortable with the Snapchat flow.
  • We detected that the employees were not able to listen to the audios properly. We did tests in some restaurant kitchens and we noticed how users needed to play videos and audios at least twice in order to understand the instructions. This was a red flag for us.
  • Although we started the research with more confidence in the video/audio solution we realised that the best solution for our users was the pre-filled cards.

3. Conceptualisation & Design

As part of this project we iterated different solutions and prototypes during the research phase and the results were very conclusive. Therefore, we combined conceptualisation and design and decided to wireframe and design the solution with no more user testing involved.

The final solution implied changes in both the mobile app and the web app, which was used by the managers to build the templates (the feature was called Shortcuts).

Create new Shortcut, web app
How to choose a pre-filled card/shortcut from the mobile app

Learnings

  • The importance of testing in a user’s real environment.
  • Fast iterations in the research process will save a lot of time and avoid developing useless solutions.
  • Input from multidisciplinary team is key to ensure success of a UX/UI project. Involving the Customer Success Team was essential to get buy-in from stakeholders during the testing phase.
  • Keep improving! Just talking to our users highlighted other potential improvements we could do to our app outside the scope of this specific UX/UI project.