About Zuum
About Zuum
Embedded Files
We connect shippers, brokers, carriers, and drivers on one logistics super platform. ZUUM delivers shipments reliably at a lower cost for shippers and at a higher profit for carriers through efficient technology. To optimize logistics and streamline supply chains globally on an efficient, automated, and easy-to-use platform.
Team: Zuumers
Team: Zuumers
Henry Dang
Project Manager
Product Consultant
Tristin Young Proctor
Front/Backend Developer
Scrum Master
UI/UX Design
Jeffrey Wang
Backend Developer
Tech Consultant
Henry Tran
Frontend Developer
UI/UX Design
Peter Tang
Backend Developer
Sponsor: Ali Navid, CTO of Zuum
Project Overview
Project Overview
Languages and Frameworks: Angular2, JavaScript (TypeScript), HTML, CSS
Tools: Figma
Our project was to create a web application in Angular that would allow a user to link up data from a shipping client's shipment information such as pick up location, date, and origin location and then match it with Zuum's own format for such information then output the mapping as a JSON file. Other planned auxiliary features included drag and drop functionality, a user help page, and keyboard shortcuts to enhance the user experience. Our sponsor is Ali Navid, the CTO of Zuum. Additionally, we also worked with Paul and Judy who are UI/UX designers at Zuum.
Development Process
Development Process
First Quarter
Meet up with our Sponsor
Met with our Sponsor, Ali Navid (CTO of Zuum), and helped provide the initial start-up process.
Worked on High and Low fidelity prototypes developed in Figma.
Deciding on which framework to use, which in our case was Angular2.
Second Quarter
When we started the second quarter, our sponsor became busy a little bit.
Development
Documentation
Sponsor's Vision
Sponsor's Hand-drawn Prototype
Sponsor's Hand-drawn Prototype
The Zuumer Team went to Zuum HQ and our Sponsor showed us how the prototype functions
Sponsor's Redesigned Prototype
Sponsor's Redesigned Prototype
Our Sponsor send the Team his image of the Prototype from his UI/UX Design Team
Quarter Deliverables
End of First Quarter
End of First Quarter
Functions:
Right-Clicking Function to Add, Delete, and Edit Nodes
Leaderlines of Customer and Account Nodes
JSON and CSV File Upload
End of Second Quarter
End of Second Quarter
Functions:
UI Interface Middleware for Employees
Assign incoming data (EDI) shipping info to Zuum fields
Create a JSON Data mask from the assigned values
Design: Persona
This is Robert Smith
This is Robert Smith
Robert works in Service Management as an Intern at Zuum
Robert recently graduated from UCI as a Business Major and he's applying to Grad School for his Masters
Robert job at Zuum is to compare information between Zuum and their Clients but he doesn't want to miss any important information
Robert also doesn't want to spend a lot of time comparing information between Zuum and their Clients
Robert wants a program that:
Can see where the information between Zuum and their Clients is compared
Wants to add, edit, and delete information between Zuum and their Clients
Can use a JSON File for uploading and exporting information
Instead of Robert spending hours comparing information between Zuum and their Clients, the Zuum EDI compares the information for him with no errors or mistakes
Design: Wireframes
Low Fidelity Mock-up
Low Fidelity Mock-up
The Team created a Low-Wireframe with annotations to map out the functionality of the prototype and to know what our Sponsor wants in his prototype
Mid Fidelity Mock-up
Mid Fidelity Mock-up
The Team created an interactive Mid-Wireframe to show our Sponsor how the prototype functions and what will happen if the users clicks on a button on the wireframe
Challenges
Challenges
First Quarter
Unfamiliar framework
Angular2
Single page web app
Working on features that depend on other incomplete features.
Can be difficult to show progress when majority of the work is hidden from view.
Technical debt
Pressure to show progress each week to sponsor
Dependency on incomplete features
Merging our branches/features
Rushing into development
Lack of Architecture Design/UML Diagrams
When working on assignment for this class, we feel like we have to backtrack.
Second Quarter
Sponsor was absent/unavailable for the first 4 weeks of the second quarter due to being busy and work safety protocols relating to COVID at work.
Throughout the second winter quarter, we were lucky enough to not have any change of plans regarding our project.
We were able to continue working on the project due to previous planning regarding the product functionality.
The design phase was completed at this stage, so implementation was the next step, which did not rely on the sponsor’s involvement as much.
Documentation
Documentation
This has sequence diagrams, uml diagrams, users stories, etc.
This board lays out the tasks done through the 2 quarters separated into 7 Sprints.
Figma Wireframe Prototype
Figma Wireframe Prototype
Interactive Figma Prototype
Interactive Figma Prototype
Evaluation
Evaluation
First Quarter
During the first quarter, we were able to get feedback regarding our user interface from Paul and Judy, both of whom are senior UI/UX developers at Zuum. Several iterations were worked on, eventually resulting in a mid-fidelity Figma prototype that we based our final product on.
During the end of the first Quarter, when the Team present their progress and prototype to our Sponsor and his invited Co-Workers, they were impressed with the progress the team made with the Project and our hard work.
Second Quarter
Plans were made for a final evaluation/review in second quarter, but COVID-19 lockdown procedures interrupted those plans.
The original plan for a code review was supposed to be reviewed by Ali Navid's development team, however, due to world events at the time, we are unable to get a code review done by the development team.
Final Product
Final Product
Final Project Demo Video
Page updated
Report abuse