Research
Concept & Design
Prototype
Design System
"Defined & implemented a pivotal product strategy for SEA's largest blue-collar workforce platform."
Followed by the challenges
UX issues; not tailored for the low-tech literacy persona
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 needing help or not using 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
We began developing the concept for the next iteration based on the research and data analysis.
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 concepts without incurring significant development costs.
We started working on the new information architecture (IA) and flows. Then we translated it into the Hooked model, as we can benefit from this model after examining the overall journey.
In addition, we started working on the design system.
We were not using Figma at the time, 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 using the previous version's clock-in and out features challenging.
We needed to build a rapid prototype using the design library and various prototyping tools to bring this concept to life.
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 logic.
You can see some examples of the prototypes below.
Tools:
Sketch
Principle
Framer
As promised, we built the design library while working on the concepts.
The team was using Sketch App at the time, so we started building the library using Sketch.
However, one flaw in building the library with Sketch was that we needed control over versioning.
This meant we needed to update components and replace them with newer versions manually.
To simplify this process, we integrated the library with Bitbucket.
This meant that our components would continuously 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 could 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 field analysis revealed a significant issue with the clock-in feature.
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 on this project, as the dev and product teams are constantly being supported.
The decision making also very simple, and everyone is willing to test and learn.
To use 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.