Leeway

Photo by Adolfo Félix on Unsplash

1. Business goals and technical specifications

Upon initiating the project, we studied each of their available pages with additional given requirements. We inspected their usability and note down the end goal of each page before moving on to the next phase.

Meanwhile, the project lead comes back with more requirements from clients and some solutions for us to work on.

2. Information architecture & wireframe

After seeing the big picture of the web application's objective we noticed that some parts of the page were not properly design. Wrong elements were used and some clickable section were not represented as link. This leads to difficulty of handover when traning new staffs.

For the most part, the structure remains the same. Form inputs were scanned and rearranged from the user's perspective. We separated and grouped certain fields to avoid confusion.

Photo by Med Badr Chemmaoui on Unsplash

3. Visual design & development

After determining the changes with some sketches in hand, the visual design is immediately executed with Affinity Design. Several ideas were proposed and proceeded.

Upon completing the design for the entire website and gaining approval, the website is developed with AngularJS. Starting from me who is in charge of the visuals, the complete HTML was later passed to developers for data manpulation and aunthentication on their end.

For better workflow of our client, our company offered mobile app service which allows the driver to update the job immediately. For this part, the app design was made and passed to the developer for reference.

4. User feedback

Upon completing the project, the new designs are later uploaded to the server for immediate use. As per photo, the client was happy with the overall project and working with the team.

Photo shared by our CEO to the team.