Designing A New Equipment Rental Platform for Infor M3

 

M3 is a leading ERP in the Manufacturing & Distribution Industry.  My team was tasked with redesigning the equipment rental solution from the legacy interface.  Key challenge was to design and optimize an enterprise grade rental experience that is user friendly and drives the business process more efficiently.

 
1_Intro_Image.png
 

Responsibilities

Information architect. I was responsible for the research, problem definition and design solution.  I owned the legacy product analysis, user research, requirements gathering, navigation and design of the application.  I worked with a partner UX designer and project manager to coordinate with the product team and divide workload in productionalizing design assets.

 

Tools / Skills

• User research

• Product analysis

• Product design

• Wireframing

• Design documentation

• Design QA

 

Process

 
 

Discovery

 

Context & Challenges

 
 
 
 

Product & Process Analysis

 

In order to get familiar with the product and process we were designing for, I went through recordings of product demos taking screenshots of each screen and step required in the process - documenting what information was displayed and statuses available.  I also documented the greater end-to-end equipment rental process indicating which M3 programs were being used to map out the existing logic.  This would be important since the redesigned product would need to call these programs for managing and executing rental equipment flows.

 
 
4_Product Analysis.png
 
5_Equipment_Rental.png
 
 

Market Research

 
 
 

In order to get inspiration on consumer grade e-commerce experiences around industrial building equipment, we looked at Amazon, Hertz, The Home Depot and Lowe’s website to study the navigation and browsing of products, and the process of checking out and renting equipment.  All products featured easy search and advanced filter capabilities, lots of images and consolidated product information, as well as item availability.  These would help drive features and design decisions in our solution.

 
 

User Research

 
 
 
_User_Research.png
 
 

We conducted user research at Herc (Hertz’s industrial equipment rental division) to see how they use the current M3 rental solution, and to better understand the process and their needs around the business.  We also visited another customer Cianbro in Maine that rents out bulk items such as scaffolding for infrastructure projects.  Visiting these customers was useful because it helped us gain a better understanding of the use cases and challenges faced with the current product.

 
9_User_Research Takeaways.png

Define

 

UX Goals

 
13_UX_Goals.png
 
 

Challenges

 
 
 

Objective Metrics

 
15_Objective Metrics.png
 

Develop

 

Information Architecture

 

In order to scope out the number and type of screens we would need to account for the application, I put together an enhanced site map illustrating the type of content and action that would need to belong on each page, and to what screens they would link to.  This was used with the product teams to validate the foundational elements of the application and overall navigation.

 
 

User Flows

 

Sketches

 

I started off design by sketching out ideas and layouts for screens in low fidelity.  I did this together with a partner UX designer to bounce around ideas.  After we got a better idea of the flow we moved into digitizing our ideas with wireframes.

 
 
 
 
 

Wireframes

 

Using the defined workflows as a guideline, I designed a series of wireframes to illustrate the workflows.  These were then used to elicit product team and user feedback.  Once these were signed off, I would then apply UI elements.  Since there were multiple flows, my UX partner and I each designed and owned two of the flows so that we could work more efficiently.

 
20_Wireflow.png
 

feedback

 
21_User_Test.png
22_User_Test.png
 
 

After producing initial wireframes, we returned to Hertz to test out the designs based on the flows produced.  Overall we received positive feedback where the user felt the product was an improvement over the core application we were designing.

 
 
 

UI Application

 

Once flows and wireframes were validated, I applied the Infor Design System (IDS) style guide to build in UI elements for the final design.  I then turned these into clickable prototypes and annotated designs for handoff to developers who would use these assets to code the application.

 
 
 
 
 
 

DELIVER

 
Homepage.png
 

HOME SCREEN

The home page features a list of recent orders and popular equipment rental products so that users can easily open up recent transactions, or easily start new equipment rental flows based on frequent customer asks.  The home page also features tabs so that users can easily navigate to different sections within the application to access various information and address customer needs.

 
 
 

Equipment Search

Users can easily search equipment based on categorical navigation and breadcrumbs or using dynamic search.  As search results narrows, products line up in a listed format with pictures with filtering options so that the user can further narrow down their search.  This is similar to how search works on sites such as Home Depot.

Equipment Search.png
 
 
Product Screen.png
 

Product Page

After a user clicks on a product, it will pop up a product modal to get more detail about the product and its availability.  The user can select different warehouses to check inventory in different warehouses.  The page also features the ability to apply discount codes and price estimates.  From this screen the user can add an item to a rental order.

 
 
 

Rental Agreement Creation

As items get added to a rental order, they will be added to a cart similar to any typical e-commerce platform.  In the final step of the check out is the order summary screen represented here, which allows the user to review their order.  Once this is complete, the user can finalize the agreement or save it as a quote, so that the user can receive a locked price if they decide to return to complete their order.

Check Out Agreement.png
 
 
 

Customer Screen

When a user search and selects a customer, it will pop up a modal to view customer information.  It also features a list of current and past rental agreements.  This allows the user to easily modify one of their current rental agreements, or get visibility into their history. From this screen the user can also initiate a new order.

 
 
 

Rental Agreement

The agreement screen features which items are on rent and the initial estimate of the rental agreement.  The user has the option to edit the agreement, which will allow them to add or remove items to the rental agreement.  The user can alternative close and\ agreement, which would end and process the agreement for invoicing.

Agreement Screen.png
 
 
 

 
 

DOCUMENTATION

 

Following multiple design iterations and user testing sessions, I documented designs in annotated wireframes with user flows for clear handoff to dev teams. 

 
 
 
 

 
 

Impact

 

In order to test the effectiveness of the new designs, we conducted user tests with 30 people based on the flows produced with the new designs vs the old designs.  The results proved a significant increase in user satisfaction and task completion time.

 
 
 
 

Conclusions & Lessons Learned

 

This was a successful but also challenging project because of the complexity and number of use cases the application needed to support.  In order to design effectively it was essential to understand all the potential ways the product could be applied.  For this reason we needed to design and illustrate multiple use cases to contextualize designs, so that the dev team could build the necessary logic.

In this project I learned a lot about how the commercial and industrial rental industries work and the business processes required to support them.