top of page

Case Study

Working together as a product & development team

PROJECT SUMMARY

Haulio is a startup that provides containerised trucking solutions. It matches trucking orders from forwarding companies to haulage companies that can execute the job.

I joined the company and was given the task to re-design the customer portal. Concurrent to my design deliveries, I had the chance to look into how the team was working together and tweak our processes.

This side project resulted in the establishment of our design libraries, master data files and clearer handover expectations within the product and development team.

The Product Development Team

Count and roles are not fixed due to people movement.

​

  • CPO

  • CTO

  • VP of Engineering

  • 12-18 Developers

  • 4 QAs

  • 1 Scrum Master

  • 3 Product Designers

What?

  • Establish quality handover processes and materials.

  • Ensure product vision is clear and aligned among the team.

For Who?

  • Junior product designers

  • Front end, back end and mobile developers. 80% of them are based in Myanmar.

Why?

  • Mismatch between requirements and implementation.

  • No visibility on task status and estimated completion.

PROCESS
1. DISCOVER

How are designers receiving their requirements and delivering their designs?

The first natural course of action was to check in with designers to understand their current processes.

1 - Interview.png

Screenshot of one of the many design team meetings.

2 - UJ.png

A quick journey map to show their current process.

After understanding the situation and pains from the designers, I had to talk to the developers and QAs.

3 - Focus Group.png

Understanding challenges from the QA & senior devs.

Key Insights

Language

  • English is not the main language for most of the team.

  • The problems and solution stated in the detailed writeup might be understood differently.

  • Implementation may differ from requirements.

Handover

  • No clear deadlines.

  • Prioritisation set verbally.

  • Visual specs are not detailed and inspectable.

Ownership

  • Multiple reviews between junior and senior dev before ticket is delivered.

  • Senior dev might take over the ticket out of frustration or deadline.

  • Designers, stakeholders approach senior devs with problems and status updates.

2. DEFINE

Having build some empathy and knowledge from the sharing sessions, I was able to engage the the full team (in different project team sessions) to share their expectations on what they will need at different stages to make their job easier.

Everyone gets a voice.

The team knows why certain information is needed/good to have/not necessary.

We then lock down the expected deliverables with the most votes.

5 - Team Alliance.png

Workshop to align on how we want to work together as a team.

Written requirements are to be written in a fixed format, in short and simple english sentences.
Word documents are not encouraged since the content within is not searchable from the website.

6 - Ticket Template.png

Ticket template – adapted from Gherkins Format.

7 - Design Inventory.png

Workshop with FE devs to identify how to structure design files.

On the design side, we also started working with our FE devs to break down the UI components to be mocked up for future usage and reference.

3. DEVELOP & DELIVER

At the initial phase of our design libraries, Sketch, Zeplin and Invision were used. (Year 2019)

8 - Sketch.png

Sketch – For all designers to have an overview of all UI components and make use of them to do quicker mockups.

9 - Zeplin.png

Zeplin – For developers to inspect UI components and create accurate implementation.

10 - Invision.png

Invisionapp – For team to experience navigation flow.

To address the issue of having to comb through the product and specification files, I created master files to consolidate labels, form fields, logics used across the platforms.

It helped to have one up-to-date reference to prevent mismatch or overlap of information.

It is shared and editable by the whole team across projects.

11 - Masterfiles.png

Product logic, field labels, localisation strings are documented and available to the entire team in a centralised location.

The introduction of a new Scrum Master brought the team into the agile methodology, leading to the adoption of two-week sprints.

This resulted in several improvements:

  • Clearer deadlines

  • Appropriately sized tasks

  • Enhanced roadmap planning

12 - Scrum.png

Sprint overview.

Task ownership was addressed by the ticket statuses and assignment.

13 - Ticket Status.png
OUTCOME

Design Libraries

As the team grew and the number of projects increased, we decided to transition our design files and handover process to Figma.

14 - Design Directory.png

Design file structure and the colour coded thumbnails.

15 - Figma.png

Screenshot of master component file in figma.

I did not keep track of the qualitative metrics to justify the implementation of the design libraries but the usage can be seen across the team.

15 - Chart.png

With the clearly defined ticket statuses, we are also able to keep track of the number of rejected tickets at each stage and set goals.

Surveys are handed out to the team to evaluate the handover satisfaction twice a year to evaluate where we are and how we can do better.

16 - Surveys.png

Unlike the other case study where there is a line drawn between the Develop and Deliver stages, there will always be rapid constant iteration for how we can work better together.

I am thankful to the team at Haulio for always being earnestly honest, supportive and open to trying new ways to improve themselves.

17 - Team.png

Singapore & Myanmar ProDev team annual dinner

© Julia Lin 2024

bottom of page