Created the first mobile version of the Trimble global product in four months' time. I created over 25 components in Figma & XD and released them to Trimble's internal designers (120+ across the globe) for use by external clients across a multitude of platforms and services.
During my time at Trimble, I initiated the evaluation and improvement of the user experience by working closely with the Design Systems Product Manager and the delivery team to manage existing, and add new components and patterns to Modus through two-week design sprints.
I independently lead research planning and execution, effectively building alignment with cross-functional teams and stakeholders throughout the research process by participating in Tiger Teams to brainstorm, test, design, and propose design solutions to the UX Community.
I worked with the lead designers to audit existing pattern libraries, help define guidelines for the Trimble pattern library, detail design in Figma, write UI spec documentation, and adhere to accessibility guidelines.
I also did research, discovery, and creation for icons and dove into animations and micro animations (such as loading screens, progress bars, etc.). I also assisted in component creation for in-field components (a third component set).
Trimble's design system is public. Feel free to click around and check it out!
Problem:
Trimble had a functioning web product, but since their product was available in the field of construction, users needed to view the product in real-time in the most accessible way - on their mobile devices. Before I arrived, the mobile version was half-baked, collecting dust in a forgotten Figma file. However, consumer needs were changing. Trimble needed to get on the construction site not only urgently, but quickly. With that, I was also tasked with editing and reviewing the current design system.
Approach:
Tools: Figma, XD, Github, Visual Studio Code, Clickup.
Process:
Review the current design system.
Go through the web components and compare them to the rough draft of mobile components in both Figma & XD.
Create mobile components. This included: fixing light mode components, creating variants, testing assets.
Created dark mode for the whole component set.
Prototyping, testing, and inspecting all components, some with other 1,000 variants per set.
Documented and solved discrepancies between the Figma and XD file within the design system.
Review with PM, QA, Lead Designers, and engineers.
Edit and revise as necessary,
Front-end code development to upload all documentation in Visual Studio Code, creating branches in Github, and pulling requests to upload the new components within the design system.
Continuous editing and formatting.
Launch and celebration!
A few of the screenshots from the Figma File:
Key Takeaways:
What would have done differently:
1. Tested the components after creation. Unfortunately, my time with Trimble ended before I had a chance to complete this.