Havas: LBC Express - Interim Site v1
UI Design, Style Guide Creation Launch Pending
As part of a lean Build team in Havas Ortega, I was tasked to work on the UI design for the user flow and design strategy created by my partner Nate , who was assigned to be the UX lead for the project.
As the country’s largest pioneering Filipino cargo company, LBC Express wanted to plot their journey to ‘digital transformation’ from 2018 onwards. Considering the major changes they wanted to take on, the interim site was intended to be—at the very least—a heuristically sound version of their existing site, before the main site (with new features) gets fully launched in 2020.
As the country’s largest pioneering Filipino cargo company, LBC Express wanted to plot their journey to ‘digital transformation’ from 2018 onwards. Considering the major changes they wanted to take on, the interim site was intended to be—at the very least—a heuristically sound version of their existing site, before the main site (with new features) gets fully launched in 2020.
Sample screens from their site built in 2014
After auditing the existing site, some key areas were addressed to deliver quick wins that satisfy both client and user needs, following a tight launch schedule.
The key areas were:
content strategy, site design on mobile (proper text and image scaling),
information architecture (considering common sections and features to be present all 25+ country sites), and a streamlined brand image library.
Wireframes and user flow strategy designed by my teammate, Nate
Following approved materials by the client, we designed the initial screens on and built a component library for a seamless designer-developer handoff.
Initial screens designed on Adobe XD
A style guide document was also created for client to share with developer partners they engage in other projects.
Along with the design system, we had to share our design principles/approach through a document that was easy to read. It was important for us that people understood why components were designed the way they were, in a way making room for other design patterns to be created by others.