Research
Concept & Design
Prototype
Design System
"Defined & implemented a pivotal product strategy for SEA's largest blue-collar workforce platform."
Followed by the challenges
In the beginning
When I joined the project, we were building a design team and a product team.
I am involved in design work (lo-fi, hi-fi, prototype), design task management, coaching, and hiring.
The product is already built, but we saw some users struggling to use it or did not use it as we intended.
From there, we started talking to the users; luckily, based on their business model, we can easily find the users because they will come to the office daily to sign up, interview, and create their profile on the platform.
This is one of the early stages where we ran 30+ research (done by the research team and designers) sessions with the workers to understand their current pain points with the app and analyze the insights to develop different iterations and find where the issues are (mostly usability issues)
And from the research work, we started to define the proto-personas to help us understand more about what category of users we are dealing with.
Methodologies that we used for the research work:
In-depth user interviews
Usability testing
Proto-personas
Design sprint
Approaching the concept & design
Based on the research and data analysis, we began developing the concept for the next iteration.
Rather than launching it all at once, we started by improving the current experience and building the new concept in the background.
This approach helped us validate some of the concepts without incurring significant development costs.
We started working on the new information architecture (IA) and flows and then translated it into the Hooked model, as we believe we can benefit from this model after examining the overall journey.
In addition, we started working on the design system. At the time, we were not using Figma, so we began building the design system with Sketch App.
I can explain this further in the last section.
Use the research to help navigate the design.
Map out the journeys (happy journey, sad journey, system limitation, edge cases)
Connect back to the Hooked Model.-depth user interviews
After working on the IA and multiple concepts, we started bringing the design to the prototype phase.
However, we realized that some usability issues needed to be addressed by the interaction design.
For example, most users found it difficult to use the clock in and clock out features in the previous version.
To bring this concept to life, we needed to build a rapid prototype using the design library and various prototyping tools.
We used different tools because of the variety of interactions required, ranging from simple to advanced.
For the simple prototypes, we used Principle, while for the advanced versions, we used Framer for animations that required some kind of logic.
You can see some examples of the prototypes below.
Tools:
Sketch
Principle
Framer
As promised, we began building the design library while working on the concepts.
At the time, the team was using Sketch App, so we started building the library using Sketch.
However, one flaw in building the library with Sketch was that we didn't have control over versioning.
This meant that we needed to manually update components and replace them with newer versions.
To simplify this process, we integrated the library with Bitbucket.
This meant that our components would always be updated, and anyone could pull the latest version of the library and add it to their design.
This approach demonstrated that design files and design systems can coexist in the Git Repository, which helped to solve issues of inconsistent design and too many local file versions.
Although we now have Figma to address these issues, at the time, we were experimenting with a lean version, which proved to be effective.
Tools:
Sketch
Bitbucket
GIT LFS
After dedicating ample time to iterate on the product concept and improve the design,
we identified significant improvements in the overall product experience.
Our in-depth analysis of the field revealed a noteworthy issue with the clock-in feature,
wherein the lack of internet connectivity in basement restaurants made it difficult for users to utilize the feature.
To tackle this issue, we introduced an additional layer that prompts the user to indicate their readiness to work, allowing us to match their location and work schedule without relying on internet connectivity for clocking in.
This solution resulted in significant benefits for the company, as outlined below.
TEAM IMPACT
10x nett revenue
After the revamp
DESIGN IMPACT
Design library implemented
Achieved design consistency
UX Design improvements
I enjoyed my time in this project, as the dev and product team always being supported.
The decision making also very simple and everyone willing to test and learn.
To use the design tools that can be scalable for the future.
Test the lo-fi concept before jumping to the hi-fi prototype.
Stress test the design library.