Localz Configuration Platform | A UX UI Case Study
The tool where all Localz configuration will be managed by ourselves, our partners, and our direct customers.
Project Overview
Background
Localz provides field service and collection software solutions to various enterprises. The solutions we provide need to be designed in a configurable way to meet customers’ business models, workflows, and needs. And Localz has an existing console to manage all the client’s projects.
The new Localz Configuration Platform is an evolution of existing configuration tools. It is planned as long-term product development and breakdown into different releases. The first beta release was completed in 4 months (from Dec 2019 to March 2020)and was a combined team of 7 people.
My role
My role was to lead the product design and facilitate communication between the product manager and developers. My responsibility is across user research, experience design, and visual design including:
- Defined problem, goal, and scope with the team
- Conducted personas by doing user interviews
- Created user flows and low-fidelity wireframes to communicate with various stakeholders
- Created InVision interactive prototypes to do user testing
- Explored UI stylings options
- Created the high-fidelity mockups in Sketch
- Defined design systems to communicate with developers on Zeplin
- Reviewed the visual user acceptance testing, before launching the products
Product Development Process
Problems
- The existing systems are now considered legacy making it hard to maintain and scale
- The existing way to onboard new clients is complex and requires heavy technical works.
- It has a steep learning curve for both Localz staff and our clients to learn the existing system
Goals
- A less technical way to make setup and configuration of the platform simple and fast.
- Scalability: Being flexible to meet customers’ needs
- Supportability: Supporting our partners and let them self-service to manage their clients’ projects themselves.
UX Research
Persona
- Internal user: Localz customer success / Product manager
- External user: Partner IT supports
User journey
A whiteboard session with the team to map out the existing journey and basic structure.
Beta Release Design Process
Release Goal
Set up basic website navigation structure, user behaviour patterns, and design patterns for the Configuration Platform.
Key deliverables
- Initial project plan
- Inspiration research
- User flow
- Wireframes
- Design patterns
- InVision clickable prototype
- User testing plan and results
- Presentation to the external client
- Mockups
- Design system
- Design review
Wireframes
Creating wireframes and user flows to confirm functionalities with the product manager and developers.
Design Patterns
The basic navigation and behaviour patterns is a draft of the design system. This helped the developers applied the same patterns in the early developing stage.
User testing
The aim of this testing was to test the navigation and information hierarchy of the platform. We wanted to see if the users can always know where they are and want they can do on each page.
External User Communication
We consistently updated our project process with the external client to get their feedback and reprioritize our roadmaps.
UI Visual Design
UI Stylings
- Ideations: Researched and explored different styling options
- Narrowed down the approaches by considering the limitations and expandability of the product
Outputs: Mockups
Communication
Consistently communicate the design outputs with the team is also a key to success.
To avoid any misunderstandings between design, product and development teams, I organised our design files based on different release plans in the Zeplin project. The teams can see what was designed in the current release and compared it with future plans.
Design system
Set up details style guides for each component including size, padding, colours, and behaviours. This provided a few important benefits:
- The team was on the same page of the visual acceptance criteria while doing the testing
- The product is easier to expand and maintain in the future
Design review
Most of the time the final visual developers create won’t 100% follow what you design, so doing a design review is necessary before launching the product.
It will always cost you more to redesign and reimplement after you launch the product.
What I focused on
The things I pay attention when I did the review:
- Is the screen responsive? e.g. the padding, colour, image sizes follow the design across different screen sizes
- Do the pages follow accessibility guidelines? e.g. the font-size correct and readable. Colour contrast pass accessibility for the user groups
- Do the functions work correctly? e.g. button directly to the right direction
- Do the interaction work properly? e.g. scrolling, hover, press behaviours
How I did it
- I created a table in Notion to report the bug to the team and track the fixing progress.
- I compared the built screenshots with the design outputs. And I put it as references in Zeplin for developers to follow.
Keep updating the design system
Always add exceptional cases back to the design system. This will help to maintain the product in the future.
Reflection
What I achieved in this release project:
- Being a great communicator in the team
- Validated and set up the platform navigation structure and information hierarchy
- Set up visual styles, user behaviour patterns and design patterns
- Designed a new product from end to end
Thank you for reading this far! 🥰
Let me know if you have any questions or comments on this post.
You can also find me on LinkedIn.
