Design Upgrade of USLBM’s Mobile and Web App
Design Upgrade of USLBM’s Mobile and Web App
Design Upgrade of USLBM’s Mobile and Web App
Giving the USLBM app a visual refresh and enhancing its usability for a better experience, helping their customers do business seamlessly with them 24/7.
Giving the USLBM app a visual refresh and enhancing its usability for a better experience, helping their customers do business seamlessly with them 24/7.
Giving the USLBM app a visual refresh and enhancing its usability for a better experience, helping their customers do business seamlessly with them 24/7.
The app is now live - check it out here!
MY ROLE
MY ROLE
MY ROLE
As a UX designer on this project, my role was to identify challenges, design wireframes and visuals, co-build a design system, perform UI governance and lead the project in the second half.
As a UX designer on this project, my role was to identify challenges, design wireframes and visuals, co-build a design system, perform UI governance and lead the project in the second half.
As a UX designer on this project, my role was to identify challenges, design wireframes and visuals, co-build a design system, perform UI governance and lead the project in the second half.
THE TEAM
THE TEAM
THE TEAM
UX Designer (me),
Senior UX Designer
UX Designer (me), Senior UX Designer
UX Designer (me),
Senior UX Designer
SKILLS
SKILLS
SKILLS
UX Design
Design Systems
Prototyping
UX Design, Design Systems, Prototyping
UX Design
Design Systems
Prototyping
TIMELINE
TIMELINE
TIMELINE
April 2021 - Oct 2021
24 Weeks
April 2021 - Oct 2021, 24 Weeks
April 2021 - Oct 2021
24 Weeks
Project Overview
Project Overview
USLBM is one of the largest building products distributors in the United States. Through their local divisions, they provide a wide range of building materials to custom home builders and national builders. Customers currently use their app to conduct tasks like tracking orders and viewing invoices on a regular basis. In this project, I delivered a redesigned USLBM app with a design system.
USLBM is one of the largest building products distributors in the United States. Through their local divisions, they provide a wide range of building materials to custom home builders and national builders. Customers currently use their app to conduct tasks like tracking orders and viewing invoices on a regular basis. In this project, I delivered a redesigned USLBM app with a design system.
USLBM is one of the largest building products distributors in the United States. Through their local divisions, they provide a wide range of building materials to custom home builders and national builders. Customers currently use their app to conduct tasks like tracking orders and viewing invoices on a regular basis. In this project, I delivered a redesigned USLBM app with a design system.
I HAD A FAIR SHARE OF DESIGN AND BUSINESS CONSTRAINTS:
I HAD A FAIR SHARE OF DESIGN AND BUSINESS CONSTRAINTS:
Limited User Research
Since direct user interaction was not feasible, I had to rely on existing research data.
Since direct user interaction was not feasible, I had to rely on existing research data.
Testing Constraints
Being in a consulting setting with client deadlines, user testing became difficult.
Being in a consulting setting with client deadlines, user testing became difficult.
Scalability First
The app required a scalable design for 13 white-label sub-apps under USLBM.
The app required a scalable design for 13 white-label sub-apps under USLBM.
Get in touch for the full case study to learn how I navigated these constraints.
Get in touch for the full case study to learn how I navigated these constraints.
Get in touch for the full case study to learn how I navigated these constraints.
Project Outcome
Project Outcome
The solution drove operational efficiency for USLBM teams while significantly improving the app’s core usability. Using agile methodologies in the design process, I created a unified experience by streamlining the app structure, ensuring it is fully responsive, and reducing information overload.
The solution drove operational efficiency for USLBM teams while significantly improving the app’s core usability. Using agile methodologies in the design process, I created a unified experience by streamlining the app structure, ensuring it is fully responsive, and reducing information overload.
The solution drove operational efficiency for USLBM teams while significantly improving the app’s core usability. Using agile methodologies in the design process, I created a unified experience by streamlining the app structure, ensuring it is fully responsive, and reducing information overload.
PROBLEM STATEMENT
PROBLEM STATEMENT
USLBM aimed to bridge the gap between how users actually conducted operations and how the app was designed to support them. The goal was to redesign the experience to make workflows intuitive, cohesive, and scalable across its many sub-divisions.
USLBM aimed to bridge the gap between how users actually conducted operations and how the app was designed to support them. The goal was to redesign the experience to make workflows intuitive, cohesive, and scalable across its many sub-divisions.
PROBLEM STATEMENT
USLBM aimed to bridge the gap between how users actually conducted operations and how the app was designed to support them. The goal was to redesign the experience to make workflows intuitive, cohesive, and scalable across its many sub-divisions.
The Collaboration Constellation
The Collaboration Constellation
The Collaboration Constellation
UX Design
Designit (Wipro)
UX Design
Designit (Wipro)
UX Design
Designit (Wipro)
Frontend dev
Topcoder (Wipro)
Frontend dev
Topcoder (Wipro)
Frontend dev
Topcoder (Wipro)
Client (Marketing, Biz)
USLBM
Client (Marketing, Biz)
USLBM
Client (Marketing, Biz)
USLBM
Client Partner
Wipro
Client Partner
Wipro
Client Partner
Wipro
Backend dev
Wipro
Backend dev
Wipro
Backend dev
Wipro
The Core Challenge
The Core Challenge
USLBM already had an application for conducting daily operations, yet most users continued to rely on phone calls, chats, and emails to get work done. The main issue was a disconnect between the app’s design and its intended functionality. Usability gaps made key tasks cumbersome, preventing the app from meeting both user needs and business goals, ultimately making a redesign essential.
USLBM already had an application for conducting daily operations, yet most users continued to rely on phone calls, chats, and emails to get work done. The main issue was a disconnect between the app’s design and its intended functionality. Usability gaps made key tasks cumbersome, preventing the app from meeting both user needs and business goals, ultimately making a redesign essential.
USLBM already had an application for conducting daily operations, yet most users continued to rely on phone calls, chats, and emails to get work done. The main issue was a disconnect between the app’s design and its intended functionality. Usability gaps made key tasks cumbersome, preventing the app from meeting both user needs and business goals, ultimately making a redesign essential.
The USLBM app serves four kinds of personas:
The USLBM app serves four kinds of personas:
The USLBM app serves four kinds of personas:
DESIGNING FOR USLBM TEAMS
DESIGNING FOR USLBM TEAMS
👨🏻💼
Sales Representative
Sales Representative
Wants to get a quick view
of customer deliveries
Wants to get a quick view of customer deliveries
🧑🏽💻
Back Office Manager
Back Office Manager
Manage customer’s account information and invoices
Manage customer’s account information and invoices
AND FOR USLBM’S CUSTOMERS
AND FOR USLBM’S CUSTOMERS
👷🏽
Field Manager
Field Manager
View orders and ensure that material is being delivered
View orders and ensure that material is being delivered
👷🏻
General Contactor
General Contactor
Wants an overview of their invoices and billing
Wants an overview of their invoices and billing
Over the course of 24 weeks, I did...
Over the course of 24 weeks, I did...
2 weeks of discovery,
16 weeks of design sprints,
6 weeks of governance
2 weeks of discovery,
16 weeks of design sprints,
6 weeks of governance
Project discovery
Understanding the scope, the company & their ecosystem, what their app does, and its structure.
UI design & prototypes
Roadmap for the design
Crafting a design system, designing and prototyping mobile & web screens based on wireframes - for 16 weeks.
Planning out design sprints, conducting research, defining a new user flow and driving decisions based on research.
Roadmap for the design
Wireframes and style guide
Planning out design sprints, conducting research, defining a new user flow and driving decisions based on research.
Wireframe as well as visual language explorations to build a style guide navigating the design direction.
Technical inputs
UI design & prototypes
Close collaboration with the frontend and backend dev teams to better understand development feasibility.
Crafting a design system, designing and prototyping mobile & web screens based on wireframes - for 16 weeks.
Wireframes and style guide
Technical inputs
Wireframe as well as visual language explorations to build a style guide navigating the design direction.
Close collaboration with the frontend and backend dev teams to better understand development feasibility.
Design governance
UI Governance for all the sprints and additional design support throughout the implementation phase.
Design Research Activities
Design Research Activities
Design Research Activities
Ecosystem Mapping
Ecosystem Mapping
Mapped the USLBM ecosystem to understand stakeholders, roles, and workflows using the app.
Mapped the USLBM ecosystem to understand stakeholders, roles, and workflows using the app.
Mapped the USLBM ecosystem to understand stakeholders, roles, and workflows using the app.
Sitemap Creation
Sitemap Creation
Created a detailed sitemap to define the app’s structure and scope after reviewing its current state.
Created a detailed sitemap to define the app’s structure and scope after reviewing its current state.
Created a detailed sitemap to define the app’s structure and scope after reviewing its current state.
Competitive Study
Competitive Study
Reviewed similar apps to understand UX, design decisions, though access limitations restricted depth.
Reviewed similar apps to understand UX, design decisions, though access limitations restricted depth.
Reviewed similar apps to understand UX, design decisions, though access limitations restricted depth.
Style Guide Development
Style Guide Development
Built a style guide to unify design elements and bring visual clarity and consistency across the app.
Built a style guide to unify design elements and bring visual clarity and consistency across the app.
Built a style guide to unify design elements and bring visual clarity and consistency across the app.
Web Design and Responsiveness
Web Design and Responsiveness
Web Design and Responsiveness
I designed the web app in a way that it felt like an extension of the mobile application, fostering a sense of continuity & familiarity as they navigate between devices.
I designed the web app in a way that it felt like an extension of the mobile application, fostering a sense of continuity & familiarity as they navigate between devices.
Design System Documentation
Design System Documentation
Design System Documentation
I created and maintained a component library to achieve hygiene in the designs. It empowered me to implement and replicate elements in the UI, having over 400 screens.
Key
Key
Key
moments
moments
moments
Billing
Billing
Restructuring the billings page to ensure data confidentiality, so that a customer can only view relevant details pertaining to themselves.
Restructuring the billings page to ensure data confidentiality, so that a customer can only view relevant details pertaining to themselves.
Deliveries
Deliveries
The most extensively used, yet complex part of the app is now simplified allowing for a easier navigation.
The most extensively used, yet complex part of the app is now simplified allowing for a easier navigation.
Billing Details
Billing Details
Redesigning the page to declutter and create digestible chunks of information.
Redesigning the page to declutter and create digestible chunks of information.
Promotions
Promotions
Improving the visibility of this page and creating a new, simplified card.
Improving the visibility of this page and creating a new, simplified card.
To sum up,
TO SUM UP,
TO SUM UP,
The solution enabled a projected increase in operational efficiency for the USLBM teams across the company by 80%, significantly improving its core usability.
The solution enabled a projected increase in operational efficiency for the USLBM teams across the company by 80%, significantly improving its core usability.
The solution enabled a projected increase in operational efficiency for the USLBM teams across the company by 80%, significantly improving its core usability.
30k+
30k+
30k+
Builders, contractors, and customers impacted
Builders, contractors, and customers impacted
Builders, contractors, and customers impacted
400+
400+
Unique screens designed for mobile and web.
Unique screens designed for mobile and web.
Get in touch for a detailed case study
Get in touch for a detailed case study
Get in touch for a detailed case study
View Next Project
View Next Project
