PAINTSTYLES AND PRESETS
PROJECT
Lyft L5 Program
Personal
TOOLING
Atom
Adobe Photoshop
JOSM
ROLE
UX/UI Designer
Front End Developer
TEAM
Nicholas Johnson
Alejandro R.
OVERVIEW
The PaintStyles and Presets are tools created to improve the editing process for associates in the JOSM mapping desktop application.
PROBLEM
The tools available for editing data in JOSM desktop application presented issues for the mapping project needs. Adding data, removing data, and fixing data require a number of steps to be accomplished. Due to the limited tools available and the lack of cartographic styles, this creates difficulties when accomplishing tasks within the application.
SOLUTION
To improve the time required to complete a task, multiple solutions were implemented to make an impact. By adding viewable features, implementing new custom tools, and creating a custom cartographic visual interface, multiple solutions worked to improve the editing process and the user’s experience.
RESEARCH
Noticing what the challenges were that associates were having while completing a task became apparent when analyzing the process. Analyzing what part of the editing process was creating trouble, revealed that there were specific issues related to the application. The challenges associated with using the application were able to be analyzed to see where there were opportunities to create solutions to improve this process.
CHALLENGES
While completing a task for the project there are several challenges that occur that create difficulty for a user. These challenges include accessing the task, downloading the task data, finding errors within the map, correcting errors, adding data, selecting features, and viewing features. The process of completing a task from start to finish includes multiple steps. Some of these steps take longer due to the need for viewing the entire extent of downloaded map data and correcting that data.
ANALYSIS
To understand what could be improved on for task completion, analyzing the tools that were being used to complete the tasks and the user interface involved in that process were evaluated. The Preset tools currently available in the application were not being utilized by associates to complete tasks due to their inability to work for the specific tasks that were related to the project. The PaintStyles available were also not specific to the project. Due to the large amount of map data needed for the project, there is no way to confirm if the necessary data was present when viewing the map cartographic interface. Point features were inconsistent shapes, unrecognizable or hard to notice along with a line feature. These points possess similarities to other icons representing different unique data and are difficult to select. The text on features also presented issues, due to the Default style of text displayed on lines creating difficulty reading.
PRESETS
TEXT
LINES AND PIONTS
OPORTUNITIES
With the challenges of finding errors within the map, selecting features, and viewing features, there was an opportunity to improve the cartographic representation of features. There was an opportunity to solve the issues of difficulty adding data to the map and correcting errors by improving the tools that existed through tooling improvements. The Presets are a tool that makes it easy to add data to a feature and can be improved to be specific for the project and the Paintstyles were able to be customized for the project. These two tools had the potential to improve multiple steps in the process that take the longest amount of time to accomplish a task. The steps highlighted in grey in the editing process diagram can utilize the most amount of time in the editing process and would benefit through improved tooling.
EDITING PROCESS
DESIGN + DEVELOP
To improve the editing process two tools were designed and developed. The custom PaintStyle was the interface cartography and a set of Presets tools for adding data both were developed and improved upon. Designing new tools for the project included improving the clickable points and lines, adding directionality to features, legible text, and preset tools.
POINTS
The improved custom icons that represent points were created to all be the same circular shape, making clicking on the points effective and created consistency. Using minimal colors for the icons increased the contrast of a point. The contrast and size of the icon point improved the issue of finding errors within the map. The issue with selecting features was improved by the size of the icon as well through increasing the clickable area.
DIRECTIONALITY
The improved custom Paintstyle was able to be adapted to the project by visually showing data that was relevant to the project. By viewing this data in the map, the steps of clicking on features to verify project data were reduced. This feature was added for points that included directional data as well as for data along lines.
DEFAULT PAINTSTYLE
CUSTOM PAINTSTYLE
LINES
These road lines were changed to improve the user experience and be project-specific. The width of the lines were increased to improve selecting and dragging while editing the map. Project-specific improvements were made to lines by displaying the relevant data alongside lines. If the data indicates that the bike lane or parking lane is present on the right or left side of a road line, it will display on the left, right, or both sides of the line.
CYCLE LINES
PARKING LINES
MIXED LINES
TEXT
The improvements made to the text were the consistency in color by displaying the text in the same color as well as the border of the text. This consistency in color eliminates the variation in text color and is legible on any line. The line weight and text work together on each zoom level to fit on the line, as the Default style would bleed over the line. The PaintStyles also provide the feature of turning on and off the text of street names and places. The option to turn off the text allowed for a clearer view of lines and points.
CUSTOM TEXT
TEXT ON
TEXT OFF
PRESETS
The Presets were improved by creating buttons with custom icons. The buttons improve the process of adding data to the map by eliminating manually typing the data into an input box. The icon reduced the size of the button allowing for more tools to be viewable to an editor. Forty custom presets were created to correlate with the project needs. By customizing the Preset icons, they were able to represent the data that was added to the map as well as the data that represents a point in the map. Icons correlate with the data and PaintStyle.
RESULTS
Multiple solutions were made to the editing process that contributed to its improvement. By accessing tasks easier and improved tools, associates accomplished tasks with comfort. With the cartographic improvements made for the custom PaintStyles and the Preset tools, the editing process was simplified and reduced the time to complete tasks.
