For a long time, I have struggled (and also seen others struggle) with household issues, particularly leakages, and being in a situation of waiting helplessly until a technician comes to the rescue, after several hours (or even days). Inspired to create a more immediate solution to maintenance-related problems in middle-income households, I decided to put pen to paper and design SUTE — a web application — using concepts from Interaction Design.

SUTE is a digital solution to a shared tool shed. Based on my user studies associated with a long list of maintenance issues, I came to realize that many users in communities:
a) lacked knowledge of what tools are out there, and for which kind of repairs; and
b) couldn’t afford heavy-duty equipment due to space and financial constraints.

Moving-in to an apartment in the US five months ago further fuelled by my own desire to obtain returnable tools, instead of buying them. I faced several challenges when I moved in, especially plumbing-related ones. Since the turnaround time for repairs and fixtures was long, the engineer in me was always impatient and begging for do-it-yourself tools to fix several issues with my own hands.

This was my motivation for coming up with Shared Utility Tools & Equipment — or “SUTE” — designed to serve lower- and middle-income residential communities. With each community having its own set of tools and equipment shared among residents, the app would track usage and activity through NFC and RFID technologies.

This app was conceptualized in tandem with my learnings in Interaction Design (INST 711) with Prof. Alex, at the University of Maryland, and built using Figma.

Timeline Sep – Dec 2021

Tasks Research, Prototype & Test

Tools Figma (Design + FigJam)

Defining the User

Using Lynda Barry’s “Basic X-Page” method¹ for user creation, I came up with three users. This looked like the following:

In the end, I decided to focus on the most typical user, with the following notes:

– Joe, 1st generation immigrant male, in mid-40s
– Blue-collar worker, works 9-to-5 through the week
– Uses phone on and off through the day
– Short-tempered, impatient and little inclination to learn
– Finds peace in mowing the lawn and taking walks
– Has worked in a garage; has excellent understanding of heavy-duty tools

I have outlined detailed notes on my user creation over here. The main reason for choosing this user was because I visualized a preferable future, according to the Dunne and Raby’s Possibility Cone², that is, it will provide ideal utility for users in this target audience.

Wireframes

Right from the start, I wanted SUTE to be most easily accessible to members of middle and senior age groups. This inspired me to make good use of Fitts’ Law³ and create simple design layouts, with large icons, well-spaced components, easy-to-read text and minimal colours. Using a fine-liner, highlighter and black-and-gray markers, the first set of wireframes were thus produced:

This process also inspired a set of mobile wireframes, which took a step further in terms of core functionality. Detailed design notes on these frames can be found here.

Component Libraries

Creating components in Figma was a fun and deeply engaging challenge, since it involved transferring elements from paper to the screen! To begin with, I created the main states and an accordion menu as follows:

I had received strong feedback here that the chosen font, Red Rose, was an apt design choice for headings, but less so for smaller text. I haven’t been able to find the perfect font candidate for smaller text, but I’m happy to take any recommendations! I have a strong preference for a sans serif font, if that helps. SUTE’s entire component library can be accessed here.

Dark Patterns and Forms

In the sessions that followed, the class created apps with dark patterns, using each other’s component libraries. This was a highly interesting exercise! It helped me understand how several businesses online are tricking users into performing unintentional actions (just for business’s sake), and how our own apps might invariably contain them. Using my classmate’s component library, I designed FitnessWare — a retail app selling fitness items, with three dark patterns. This was done in Figma, too, and can be accessed here.

The task of creating form designs followed the Dark Patterns exercise. I created Figma components for a text box with four states, a dropdown menu, and radio and checkbox buttons. These were then added to the forms, and this is where I was really able to appreciate Figma’s information architecture, and the simplicity of re-using components with different properties.

I have added more form layouts and outlined their design choices here — I highly encourage a visit!

Corporate Design

An additional exercise in the process was customizing the app for Apple’s Human Interface Guidelines and Google’s Material Design specifications. This was a healthy and hands-on way of understanding and incorporating industry standards, since it introduced constraints that I never originally considered!

High Fidelity Prototype

Finally! In the first week of December, a hi-fi prototype was ready. Components in place, and screens linked together with animations. I had a splendid time learning how to use Smart Animate in Figma, and tweaking transitions with custom animations. Several pieces of user feedback were successfully incorporated in the flow, while some remained — requiring more time and deliberation.

Building SUTE has been a wonderfully fulfilling exercise, and while there are advantages about this app that would provide much-needed utility for several users including myself, there still remain concerns that remain to be fully fleshed out. These are addressed in the next section.

Drawbacks and Future Work

Based on user studies, I found the following concerns to be most pressing:

C1. “The app seems to be more product-oriented than solution-oriented; most people out there do not know which tools to use, in the first place.”
This is very true. My feeling is that the app should serve both novice and expert users, and right now, it certainly seems more focused on the latter. For novice users, we could lead them to a separate flow with categorized selections, where they can be guided based on the problem.

C2. “Since this app has associated hardware, how can we deal with or keep track of lost or stolen equipment? How would you account for mechanical failures, such as instances where RFID tags cannot be scanned?”
A GPS-based technology could be a possible solution here, for every device. I believe that finer thought and inspiration can be obtained from the plethora of successful hardware-sharing services out there, and this will require more studying from my side.

C3. “Who would be funding the tools? Who will be held accountable for damages to the equipment?”
There are several options here — resident services as an entity; an interested subset of residents; or a combination of both. Healthy finances are certainly important for the functioning of SUTE, and we have to prioritize an equitable solution for monetization as we develop this further.

I’m happy to take further comments and feedback in addition to the above. Do let me know your thoughts, and I sincerely thank you for reading this post!

Building SUTE would not have been remotely possible without the large-heartedness of my classmates, and most importantly, Prof. Alex, our instructor. Their feedback and help has undoubtedly contributed to this app, and inspired me to greater heights as a design-oriented technologist.

References

1. Barry, Lynda. “Basic X-Page.” Making Comics. Drawn & Quarterly Publications, 2019, pp. 144-146.
2. Dunne, Anthony, and Fiona Raby. Speculative Everything. The MIT Press, 2013.
3. Fitts, Paul M. “The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement.” Journal of Experimental Psychology, vol. 47, no. 6, 1954, pp. 381–91. DOI.org (Crossref), https://doi.org/10.1037/h0055392.