Shreya Mathur

Work

Design and Tech Upgrade for USLBM’s Mobile & 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.

MY ROLE

As a user experience designer on this project, my role was to perform UX research, design wireframes and visuals, build a design system, perform UI governance as well as document the entire project.

THE TEAM

UX Designer (me),

Senior UX Designer

SKILLS

UI/UX Design

Prototyping

Design Systems

TIMELINE

Apr 2021 - Oct 2021

Project Overview

Project Outcome

THE ASK

USLBM wanted to give their mobile and web application a visual refresh and enhance the user experience to make the app more cohesive and scalable.

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. US LBM’s app is currently used by customers to conduct tasks like tracking orders and viewing invoices on a regular basis. With this 24 week long engagement, Designit delivered a future ready app for US LBM with a new design system using principles that are relevant today.

The solution drove operational efficiency for USLBM teams while significantly improving the app’s core usability. Through this modernization, we created a unified experience by streamlining the app structure, ensuring its fully responsive, and reducing information overload.

This transformation ensured the USLBM app stays future-ready, both in design and technology, by adopting ReactNative, making the application usable across a wide range of devices.

WE HAD OUR FAIR SHARE OF DESIGN CONSIDERATIONS:

🛞

⏳

🧤

Not reinventing the wheel

Additions & subtractions

One size fits all

The core legs of the app remains have to be as close to the current one.

We have to account for the development time of any new feature added.

All 15 division apps were white labeled, with custom screens for logo changes.

Over the course of 24 weeks, we did...

2 weeks of discovery, 16 weeks of sprints, 6 weeks of governance

Project discovery

Understanding the ask, the scope, about the company & their ecosystem, what their app does and its structure among other things.

Roadmap for the design

Planning out design sprints, conducting research activities, defining a new user flow and driving decisions based on the aforementioned research.

Wireframes & style guide

Wireframe explorations for each sprint as well as visual language explorations to build a style guide navigating the design direction.

UI design & prototypes

Crafting a design system, designing and prototyping mobile & web screens for each sprint based on the wireframes - for 16 weeks.

Technical inputs

Close collaboration with the frontend and backend dev teams to better understand development feasibility within a fixed timeline.

Design governance

UI Governance for all the sprints with the frontend team and additional design support throughout the implementation phase.

The key areas of improvement were identified as information overload, redundant flows and disjointed hierarchy.

Key Activities

Persona Identification

A sales representative uses the app for quick view of customer deliveries whereas a back office manager uses it to manage companies’ account information, and finally a field manager uses it for overall view of day-to-day orders.

Style Guide Development

We created a style guide to navigate our design. Certain elements were retained such as the primary colours and the font family to keep a sense of familiarity. Key attributes defining the design were modern and light.

Sitemap Creation

After getting an app tour form the USLBM team, we deep dived into the application and created a sitemap laying out every single aspect of it, helping us define the scope of the project.

Ecosystem Mapping

It was essential for us to understand the USLBM ecosystem so that we could gain clarity on various stakeholders, functions and processes along with figuring out key roles who use their app.

Competitive Study

To get an understanding of the landscape of existing design solutions in this domain, we did a competitive study. But restricted access to these apps prevented us from doing an in-depth analysis.

Web Design & Responsiveness

Design System Documentation

Bb Cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz

We designed the web app in way that felt like an extension of the mobile application, fostering a sense of continuity & familiarity as they navigate between devices.

We created and maintained a component library to achieve hygiene in our designs. It empowered us to effortlessly implement and replicate elements in the UI, having over 400 screens.