Top banner for Schematic Capture app
Moving mechanics of large machinery into the 21st century.

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:

current technician jobsheet
Sample of a Job Sheet

Referencing schematics like this one:

current technician schematic
Sample of a Schematic used in conjunction with Job Sheets.

...until we built Schematic Capture.

🤷‍♂ ️Who’s “We”?

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.

screenshot of zoom call with team members for Schematic Capture
These are the lovely people that I worked with on Schematic Capture.
🔎 So what happened?

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.

screenshot of previous wireframes
These are some of the screens done by the previous designer.

🤔 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 set to work making a clear sitemap and comprehensive user flows for the entire system. That is when I discovered that the Administration side of Schematic Capture was largely unfinished.

screenshot of sitemap
This is a general site map for Schematic Capture, along with some of the functions for specific pages.

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.

screenshot of user flow
This is the “Add New” section of user flows that I mapped out for the project.
🤨 Ok cool, but how will it look?

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.

previous designer final screen
This is the final design of the desktop dashboard from the previous designer.
previous designer another final screen
My initial redesign idea bringing the information from the other tabs onto the dashboard.
initial welcome screen option 1
Final mobile design of previous team.
initial welcome screen option 2
Initial ideas for improving last teams design.
  • 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.

🤯 That’s a lot of information!

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...

Ryan's first redesign attempt for desktop
Second phase iteration of desktop dashboard.
Ryan's first redesign attempt for mobile
Revised idea of mobile dashboard.

And I tried...

Ryan's second redesign attempt for desktop
Experimenting with navigation bar instead of tabs.
Ryan's second redesign attempt for mobile
Incorporating tab idea while keeping daily jobs as focus.

And I tried...

Ryan's third redesign attempt for desktop
Adding relevant subsequent pages to navigation and live updates.
Ryan's third redesign attempt for mobile
Return to hamburger menu with cleaner data sheet presented.

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.

screenshot of a few options for dashboards for user research
Collaborative design and preference testing for various dashboard ideas.

The results for the desktop dashboard was obvious, but not quite for the mobile version.

I took to the internet to test futher.

screenshot of user research results
Based on the feedback and a desire for consistency, the hambruger/side navigation became the clear winner.

“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

🖊 Revise, revise, revise.

Now that the general style of navigation and layout is settled, it must be refined and then tested again for usability.

first draft mobile menu
Early attempt at mobile menu layout.
second draft mobile menu
Stripped color, and adjusted spacing.
third draft mobile menu
Added iconography.
final mobile menu
Using color as highlight.
first draft navigation on desktop
Initial side navigation concept.
second draft navigation on desktop
Considered expandable rail style to allow more room for data.
third draft navigation on desktop
Removed grey backgrounds for cleanliness. Attempted color highlighting.
final navigation on desktop
Understated color highlighting and lighter greys for better selected emphasis.

😤 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.

first draft mobile dashboard
Considering spacing and hierarchy for mobile dashboard.
second draft mobile dashboard
Incorporating iOS elements.
third draft mobile dashbord
“Dashboard” tested better, and added more spacing.
final mobile dashboard
Improved hierarchy and spacing further.
first draft project on desktop
Initial considerations for data hierarchy on desktop.
second draft project on desktop
Removed search temporarily, increased utilized space for data.
third draft project on desktop
Further increased space for information, began incorporating actions.
final project on desktop
Highlighted most important data field and increased spacing for legibility.

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.

first draft of add project screen on desktop
Initial concept for desktop modal of adding projects.
second draft of add project screen on desktop
Considered image previews.
third draft of add project screen on desktop
Improved potential spacing issues.
final add project screen on desktop
Final Add Project desktop modal stlyes.
🙌 The final designs.

I applied this new design system to the rest of the screens in the entire application.

Here are some highlights.

final dashboard design
Final Dashboard designs.
final project list design
Final Project page designs.
final assign technician design
Final Assign Technician modal designs.
final client list design
Final Client page designs.
final add project design
Final Add Project modal designs.
final mobile job sheet list screenshot
Final mobile Job Sheet designs.
final mobile job detail screenshot
Final mobile Job Sheet Detail designs.
final mobile job edit screenshot
Final mobile Edit Job Sheet designs.
🕵️‍♂️ What I found out.

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.