Case Study: Visiostack

I had the great opportunity to come on as a contract UX designer for the company Visiostack.  They help railroads inspect, assess, and record repairs along hundreds of miles of rail lines.  They created RailLinks, a web-based application, that allowed the client to access a database of all their rail assets.  This allowed them to easily organize all their assets and manage the ongoing work.  Their users had a problem that they wished to see Visiostack address.  They had to manually record the data about the rail assets and then return to the office to enter the data into the RailLinks app.  Visiostack came to me to see if I could help them interpret their current design into a non-native mobile application.

I began my design by first walking through the web application with the developers.  Our first goal was to create a design for the most used portion of the application.  As we clicked through the original design I would ask questions about the user's needs and actions they had to take to accomplish their tasks.

I then created a rough sitemap and content map to plan out the processes.  Once I had buy-in from the stakeholders I moved on to create clickable wireframes.  I felt the interaction was necessary to illustrate at this early stage since the design had such a rigid information architecture.  A user couldn't move on to another step if they didn't enter specific data.

Once we had the wireframes crafted, and the process flow drafted out, I created high-fidelity prototypes that followed the existing graphic direction established in other parts of the application.  I worked with their existing graphic designer to make tweaks to the UI in order to provide a seamless graphic transition into the Field Inspection process.

After completing the first process I had the pleasure to adapt the same workflow to four additional functions that Visiostack wished to incorporate into the app.  These additional functions cross-referenced much of the data entered in the Field Inspection portion.