Orderly
Orderly is an application that assists automotive part distributors with managing order fulfillment.
Orderly is an application that helps automotive part distribution companies manage order fulfillment. It removes the pain of managing orders by providing an easy-to-use detailed display of customer transactions, contract terms, and an efficiently organized dashboard to prepare and deliver parts.
Warehouse employees and sales representatives can be bogged down by having to manage orders from desktop devices. The company wants to design an experience that will help their employees become more mobile by managing orders on tablets.
My goals were to research similar applications, redesign provided wireframes based on data gathered, and iteratively test redesigns to meet end users’ requirements.
.png)
With limited access to users and time constraints, quick user research methods were conducted to keep the user in mind and to help build some context around the product that is being developed.
From the information gathered through project briefings, brand guidelines, and employee job descriptions, proto-personas were created to represent potential end users.
With the data gathered from market research, a competitive analysis was created to gain awareness of products that provide the similar services and to identify the different approaches to managing order fulfillment.
Warehouse associates are coordinating with dispatch, while performing physically demanding task, they need to have order information readily available and easily visible, to pick parts efficiently.
Sales Representatives are managing orders, while conducting sales calls, they need to input and relay information quickly in order to get customers their parts on time.
Converging the research of the companies employees, lead to visualizing a few key activities that I should be aware of when ideating solutions for the design of the dashboard.
Already receiving brand requirements and wireframes, I used quick sketches to expand upon the screens that were given to me. The generated Ideas from sketching helped me picture different layouts of the dashboard before creating a new low fidelity prototype.
Previously created desktop wireframes were redesigned by generating different layout ideas from sketches, defining users needs, mapping employee experiences, and by keeping in mind insights gained from preliminary research. The new wireframes are meant to increase usability and incorporate modern design elements.
The original wireframe can be visually categorized by four elements, the navigation bar, KPI measures, customer information table, and charts.
The redesign of wireframe 1 keeps the KPI Measures at the top of the screen because this is a commonly used interaction style thats easily recognizable. Instead of a data table for customer information, data was organized hierarchy by importance in modular components and charts were clustered to the right making them more efficient to read.
Wireframe two contained many data tables, varying from size, information types, and purposes.
To improve wireframe 2, the size of information was increased to improve legibility, to reduce clutter in the summary data table boarders were removed and white space was used to organize data. Boarders remained in the Single Line data table because of the need to select or flag rows, and the color of the costing chart was changed to maintain its separate functionality from other data tables.
Wireframe 3 has a large amount of functionality, such as drop down menus, buttons, images, input forms, and sliders.
All elements that were used to search for car parts such as the search bar, car registration, and vehicle type were categorized and moved to the left panel. This improved visibility of other elements on screen and can increase the speed at which parts are found.
After creating the wireframes, I received feedback from my team’s lead designer before moving forward and creating the High-fidelity prototype. Overall, the main feedback from the critique was to be consistent with interactions styles and to ensure that buttons are designed fingers and not a mouse because the system will be used on a tablet.
To align with brand guidelines and increase the speed of constructing the high-fidelity prototype a style guide was created.
%20(1).png)
.png)
.png)
With the final prototype created, I believe that the redesign achieves the objectives that were outlined at the being of the project. The redesign of Orderly delivers increased visibility, modern interaction styles, and a more aesthetically pleasing interface.
If there was more time on the project, I would plan usability test, iteratively refine the design, and then hand the prototypes off for the development phase.
With the final prototype created, I believe that the redesign achieves the objectives that were outlined at the being of the project. The redesign of Orderly delivers increased visibility, modern interaction styles, and a more aesthetically pleasing interface.
If there was more time on the project, I would plan usability test, iteratively refine the design, and then hand the prototypes off for the development phase.
With the final prototype created, I believe that the redesign achieves the objectives that were outlined at the being of the project. The redesign of Orderly delivers increased visibility, modern interaction styles, and a more aesthetically pleasing interface.
If there was more time on the project, I would plan usability test, iteratively refine the design, and then hand the prototypes off for the development phase.
