About us
PengYi Labs has been providing companies across the globe with web design and web development services, including UI design, UX design, front-end development, etc. We have over 8 years of experience working with various companies in all different industries, from Fintech and Traveling to Medicine and Food. We had experience working in the niche of web application design, application design, and web design. This project: Navix, has the same theme.
About Client: Navix
Navix is a platform that helps users in the transportation industry audit freight invoices from trucking carriers for errors, duplicates, compliance with contract terms, etc. They are active in the U.S. and target transportation firms.
Project Goals
Before this project, Navix had a web application in progress. They needed a redesign of their web application to give it a modern, clean, and masculine look. A new UI/UX design was to be done, alongside prototyping and branding. They already had a logo and a primary color palette ready. However, a style guide had to be created. In addition, a material and element library was necessary for their future usage. In the end, they needed a landing page for their website to showcase their product information, corporate information, and blog content.
The Design Process
The first thing to do is to consider the previous design of the web application and try to think of the points of improvement that can be made. We analyzed the old design and came up with everything that could be leveled up in terms of UI/UX design. The old web application interface looked like below.
The next thing we did was to create a style guide for the website and do the branding. It consisted of adding an additional color palette, typography, and icons.
Web App Creation
For the next part, the web application had to be created. We consulted the development team of Navix to ensure the perfect UI/UX design for the application. The pages and sections included a sign-in page, a dashboard, Invoice, and Audit. These pages had to be created for both mobile view and desktop. After several feedbacks and meetings, we came up with the following designs.
There were so many options and tools to be taken into consideration. Different scenarios and different sections of Invoicing ultimately made up over 40 design frames for mobile and desktop separately. Here’s a look at what the final product looks like on mobile and desktop.
As you can see, all the elements and sections on the desktop version correspond to the same sections on mobile. The layout change was necessary to make sure both users on different devices will get the best user experience out of the application.
Landing Page Design
Next, the landing page had to be designed. This design was done according to the goals mentioned. Different sections of product information and blog content section were put in order. For the website, a “Coming Soon” page and a landing page with the necessary sections were separately designed. The “Coming Soon” page corresponds to the development stage.
The landing page was also designed for both mobile and desktop. It was decided that the best screenshot to provide on the landing page was the Dashboard page of the web application since it is the page that analysts spend most of their time on. Is also the most comprehensive page that can convey the functions of the product with one glance. It used green and red colors for adding meaning without having to focus on the data for a long time.
The redesign of the application can be clearly seen when comparing the first picture on this case study, from the previous design of the app, and the screenshot below, from the new design. The color system makes the design more comprehensive and cleaner. It is not monotonous in color and has more contrast added to it.
The Outcome
In the end, a landing page was delivered having the following assets:
- A simple, yet comprehensive screenshot of the web app design,
- A bold and brief description of what Navix offers,
- A call-to-action button,
- A section dedicated to product and corporate information,
- A section for the blog posts and content,
- A mobile version of the website.
This project has been one of the most engaging projects of PengYi Labs. We will continue to provide the best services for all the good reasons.
We are available for new projects!