Tools and techniques
Figma, feedback, brainstorming and user requests.
Duration
Jan 2025 - April 2025
During a recent task, I focused on making key buttons more intuitive for users.
We had received feedback from a user who was confused about how to perform a certain action, which highlighted the need to clarify button labels and placement.
The user did not understand the meaning of the button "Ångra" (english - undo). This action moves the selected vehicle to the previous status.
Before - The button labels were unclear, and the placement of the “Delete” button next to “Close” increased the risk of accidental clicks.
After -I renamed “Undo” to “Move to Previous Status” for clearer communication of its function. I also repositioned the “Delete” button to a safer location, reducing the risk of errors and improving overall usability.
Finally, I refined the color scheme of all buttons to meet WCAG contrast guidelines and to visually indicate their hierarchy and importance.
These changes improved clarity and usability, making it easier for users to understand and interact with the interface.
The second change I made in the system was in admin view. On previous frames, e.g. the home page, the user is able to change the selected language. However this had not yet been added in admin view. I was therefore tasked with a way of integrating it seamlessly there.
I updated the language selection in the admin view to improve usability and consistency.
Before - no language selection was available in this view.
After - added language selection.
Added language selection
I chose to implement it in the same style as on other pages, so users could easily recognize and interact with it. This approach ensures a seamless experience, reducing confusion and making the interface more intuitive.
As driving permits were integrated into the app, we also wanted them to be part of the main system. I designed a solution that incorporates permits into the check-in form and displays them in the admin view.
Device based
The check-in process adapts based on the device:
on mobile, users can upload their permit via camera, file upload, or text if needed
on on-site screens, they can submit via email or text.
Admin view
Submitted permits are then displayed in the admin view, where guards can verify or deny them. This design ensures a flexible, user-friendly process while maintaining administrative control.
I was tasked with designing a sign for drivers to scan upon arriving at the sites. The main challenge was that each site has its own branding, while the LUP logo also needed to be visible. This required careful consideration of color and layout to maintain brand consistency across multiple logos.
At the same time, it was crucial that the sign was easily readable and clearly communicated the required action to users. The final design balanced visibility, clarity, and brand alignment, ensuring drivers could quickly understand and complete the scanning process.
Colors
Quickly I decided that the color scheme should be the LUP colors. And decided that the company should have their own little box.
Intuitive design
Since the sign needed to be visible from a distance, the available space for text was limited. To address this, I worked with layout and divided the content into clear sections. This structure ensured that even drivers who do not speak English could still follow the instructions.
We chose the version with two simple, numbered steps for maximum clarity. Additionally, I added a phone symbol to further reinforce the action and make the design more universally understandable.
Finished design
The final signs combined clear instructions, strong visual hierarchy, and consistent branding. The QR code was placed centrally for maximum visibility, supported by short, action-oriented text so drivers could immediately understand what to do.
By using LUP’s brand colors as the base and allocating space for site-specific logos, the design balanced consistency with flexibility. This ensured that no matter the site, drivers could quickly recognize the sign and complete the check-in process without confusion.
I designed a set of directional arrows to be integrated into the navigation tool used by site workers. These arrows were meant to overlay site photos, guiding drivers on how to enter and move around the premises safely.
The key challenge was ensuring that the arrows remained highly visible and easy to interpret, even when placed on complex photographic backgrounds. By focusing on clarity, contrast, and consistency, the design supported faster recognition and reduced the risk of misinterpretation on-site.
Iterations
Since angled arrows were the most challenging to read at a glance, I explored several variations to test which design offered the best balance of visibility and intuitiveness. In contrast, the straight arrow, circle, and cross were simpler to develop and were based on existing visual conventions, making them instantly familiar to users.
Final results
The final set of arrows was chosen for their strong legibility, visual consistency, and ability to integrate seamlessly with the navigation system—enhancing wayfinding and improving the overall user experience for drivers on-site.