Underground with a clipboard, no internet access, taking pictures with a mobile phone and checking off a list, hoping to remember which piece was the subject of which photo in order.
This is how technicians of large machinery had to assess items in job sheets like this one:
Referencing schematics like this one:
...until we built Schematic Capture.
We were a team of two iOS engineers, five web developers, and one user experience designer.
We were the third team to spend two months on the project. It was our duty to get this application to a point of viability for deployment.
I was the only designer on this team, and I was tasked with finalizing the designs and testing the application before it launched publicly.
Two previous teams meant that the problem was already well defined, and clear solutions were well on their way to fruition.
I got myself up to speed on previous reseach and designs and started wondering what was left to do.
They had done a great job to that point and so it took some time to figure out what was missing.
🤔 After the inital meeting with the client, whose company this was for, I had an even better idea of the scope and specifics of the application, but less idea of what was still needed.
I mapped out the whole system for each permission level, Technician, Admin, and Super Admin, and revised that map several times until I had the simplest system for the job.
Using the last designer’s final screens as a jumping-off point, I set to arranging a more efficient and informational dashboard for the Super Admin.
I presented some of these ideas to the team. We had a productive conversation that let me know that I had some extra constraints to consider at this point.
The Web engineers had a lot of technical debt to clear up before they got to adding new features.
The mobile side was solely iOS, and that limits possible designs to some degree due to their stringent standards.
The previous team didn’t finish the styling and many screens were bare bones and unfinished.
The navigation was very different than what I was proposing and that might take a lot of time
However, the team really liked my designs and was making plenty of progress, so I was encouraged to keep pushing in the direction I was heading.
The amount of data on that needed to be presented on each screen had me a little stumped. I was used to different kinds of informational hierarchy than giant data sheets.
How was I to highlight certain information while keeping the rest of the information, all of which was important, from fading into the background?
So I tried...
And I tried...
And I tried...
I facilitated some collaborative and iterative brainstorming sessions with my team and other designer collegaues. This lead to the realization that sheets work differently than say, recipes.
Both offer a lot of information, but the ways that information is highlighted is very different.
The results for the desktop dashboard was obvious, but not quite for the mobile version.
I took to the internet to test futher.
“The menu is more intuitive and standard, while the tabs feel kind of overwhelming.”
- Anonymous tester
“The side menu makes for a cleaner and easier navigation system.”
- Anonymous tester
Now that the general style of navigation and layout is settled, it must be refined and then tested again for usability.
😤 With navigation decided, next was the layout of the massive amounts of data.
🤦♂️ At first, I made each column different in an attempt to point out which information was most to least important, but I quickly found that it had the opposite of the desired effect.
I landed on a particular order for the columns and used color to emphasize the main subject for each page.
The rest worked with standardized text styles and plenty of breathing room.
I repeated this process of revision and testing, continually asking the team, my colleagues, and potential users for feedback for the other facets of the design such as modals and parts lists.
I applied this new design system to the rest of the screens in the entire application.
Here are some highlights.
I learned some essential lessons during this project that I will take with me forever.
Having a client with a clear idea about what he needs, but who is open to input and regularly gives feedback is one of the coolest things in the world. I knew exactly what I needed to accomplish to make the application successful, and had the freedom to explore design avenues as long as it made sense for the needs of the mechanics.
Not all information is the same. I’ve designed systems for conveying restaurant information, recipes, web developer marketing, and more, but trying to convey sheets of information effectively was completely different.
Just keep iterating and getting feedback. A couple times during this process I got really discouraged because it seemed like the designs just weren’t coming together the way that they needed to. Instead of retreating and just throwing my hands up, I sought help and feedback from my mentors, colleagues, teammates, and more. It’s because I never gave up that I ended up with a design that both me and the client were happy with.
Thank you for taking the time to come along on this journey with me.