UX Project Presentation
UI/UX Design Project for
American Traffic Solutions
In 2017, I was given a task to explore how I approach design projects. My approach has not changed - I provide thorough research, analysis, and ideas that has the user and long-term goal in mind.
Task - Update the user interface of the data entry Rental Agency Company (RAC) Information screen to create a more engaging form that will increase efficiency and accuracy.
Problem - the current design is long and fields are not always in order of the paperwork. Users would like to know their progress and easily navigate to areas for updates.
Deadline - 4 weeks to mock up and present
Defining
Compiled background information on the current data entry form, current company website design, and company design scheme.
Developing Ideas
(L) Started looking at different background colors and styles with a numbered progress bar.
(R) Thinking of how paperwork has files tabs. Tried moving the tabs to the side of to the top for jumping to different sections.
Problem - I didn't think anyone wants to see the same tabs looking from paperwork to the screen. Not all tabs would be the same corresponding colors/sections, which can lead to confusion.
Symbols & Textures
Stopped looking at layouts, and started looking at symbols and textures that could be utilized for engagement. Assets that could be used as buttons, icons, and key indicators.
Website - LeManoosh for industrial type inspirations.
Compiling Ideas
Continued creating another mock-up.
Played around with shapes and textures, and landed on honeycombs. Roll over each shape to see the section names and sections wouldn't have to be grouped. This would allow for additional sections in the future. Kept the form design simple as the focal point is the honeycomb navigation.
Problem - Viewer wouldn't know which shape is which section. We could add numbers, but that would take away from the design.
Research & Sketching Ideas
Researched various forms on Pinterest and Behance. Used Photoshop/Cintiq to freehand notes and sketches.
(L) Idea of icons to allow you to jump to each section with the simple wizard following your progression.
(R) The progress wizard bar would be at the top fixed.
Problem - would have to combine sections and minimize icons. This would minimize visibility. Enlarging text/fields would create longer forms.
Thinking Outside the Box
In Photoshop, I started sketching out ideas using other forms I found that might be more visually engaging. I started playing with colors.
Compiling Ideas
In Illustrator, started compiling ideas into mock-ups.
(L) Simple Form with Icons as progress indicators. Current or missing field would be highlighted in a different color. Added buttons to alert call to action.
(R) Pushed form further by changing the color schemes. The progress bar would show a percentage to completion, instead of icons. Button would be brighter to alert the user.
Problem - still grouping sections and designs might be outdated in 3-5 years losing user interest.
Final Design
Designing the final mock-up used all 3 initial ideas, and the idea came from thinking about the company industry. The car industry is always forward thinking, from automated driving to the details in the stitched fabric. I wanted a design that would turn data entry forms into a stimulation.
I kept the honeycomb design, icons for grouped sections, progression indicator, a noticeable title (because there are multiple forms used), and the highlighted field where the user is currently at. Updated the bottom to look like a knob or button.
Conclusion
I presented my process and ideas to the VP, Director, and Manager of Information Technology. They were thoroughly pleased and could see my potential to participate in their internal development program. Started mentoring with the Marketing Department; creating and updating various assets for internal and customer uses.