Quote Control
ROLE
Team Lead & UI Designer
-
Manage communication between group and company
-
Set up work plan and distribute work
-
Sketch Forwarder Profile & Dashboard screens
-
Wireframe the screens then convert them into high-fidelity mockups
-
Design GSA Profile screens into high-fidelity
-
Iterate on previously completed screens
DESCRIPTION
Quote Control is an online logistics quote management service that provides a framework for collaborative work between all areas of product and logistics management all over the world. It is being developed by Slate Strategies and contains new and unique features that sets it apart from its competition. I was partnered with another designer and together we worked on designing various screens that would be used for the service. While I am not able to share all information about the project, I am able to share what I worked on as a UI Designer. I designed the freight forwarding company profiles and dashboard pages and the profile pages of GSA companies.
Duration
5 Weeks
December 2023 - January 2024
View The Full UX Case Study Here!
Quote Control
View full UX research files Here
User Research
First, research was done on the initial concept behind the app. A survey was sent out to roughly 40 people to gain insight about demographics for the apps possible user base and information on their cable organization habits and perceived tech-savviness. After finding ideal user groups, I created two different personas based on the two main demographics found. These personas would be used used to develop a minimum viable product and the user stories behind these features that I wanted to add. The two main personas: younger, more tech-savvy users, and older, less tech-savvy users. I had found that the younger persona would value the organization features of the app while the older persona would value the search and identification of cables. After creating the main features that would be in the MVP, I drafted out a user flow of the UI. This would then evolve into sketches of the UI and drawn wireframes of the UI.
Sketching & Wireframing
After completing the first steps of user research, I began creating a map of the user flows and highlighting the red routes of the app. When I had finished with this, I moved on to creating basic sketches. I started sketching a couple of the main screens to have a general idea layout and UI design before moving on to create more detailed wireframe sketches of the red routes. I plugged these sketches into a user flow to get a sense of how a user would navigate through the app. These sketches were then moved to Figma where I turned them into low fidelity wireframes. I included all the possible screens a user could go through, showing off menu options and how a user would navigate through screens. These wireframes went through a few iterations until I settled on designs that I liked and felt that they would fit the app the best.
View full wireframe & sketch files Here
View full style guide files Here
I moved to creating a style guide for the app. I wanted things to be simple and easy to understand so I researched possible competitors and other apps with similar functionalities to get a general understanding of their UI layouts and design. I wanted to base the design and feel of the app off of electronics, libraries, and the feeling of things being sleek or efficient. I took some inspiration of coloring from these ideas and went with a simple light blue color as the main brand theme. I then filled out a color palette with various shades of this blue, as well as secondary grayscale colors and denotive colors for some UI features. With a general style chosen, I created sets of icons that would be used throughout the app and chose a typography style. With the style guide completed, I began drafting up ideas for a brand logo. I initially wanted to incorporate both themes of books and libraries with cables and adapters, but found many of the designs overly complicated that did not stand out enough. I decided to then go in the opposite direction for logo design, basing a logo off of the brands name: Cable Archive. I chose to create a logo that incorporated both the "C" and "A" of the name into an abstract view of looking head on at a USB cable adapter. This design went through a few iterations before I finalized a design.
Style Guide
High-Fidelity Mockups
With the style guide completed, I began creating high fidelity mockups of all the screens I made wireframes of. These mockups also went through many iterations of both UI style and design. Many of the buttons and navigation layouts changed between versions before I settled on a design that I felt was the best. When all the screens were completed, I began putting together a prototype in Figma. This prototype would include all the screens, menus, submenus, and any UI changes a user could interact with. I wanted to create a prototype that was as functionable as possible given Figma's limitations.
View full Hi-Fi mockups Here
View full user testing files Here
Usability Testing
With working prototype completed, I began conducting user testing. I reached out to some users who I had initially interviewed during the research phase of this project as they would already be somewhat familiar with the concept of the app and would fit the personas that I had created. I drafted up a script to follow and what questions I would ask during the test, as well as what tasks users would be completing. I wanted to test the navigation and usability of the main features so the tasks revolved around using those features. Users would search for a cable and create and edit an organized group of cables. I would then record what users thought about the features, the navigation, app design, and how the general task completion process went. After this first round of five users, I modified the designs of the high fidelity prototype and tested another five users under the same parameters. I continued to make modifications off of all the new and old feedback until I had settled on a final design.