For a class project, I was required to design input diagrams for a system we designed as a group. I took this task ten steps further by designing a static but working mockup in Figma.
As a brief summary, the fictional company Katie's Landscaping needed a new system to:
We began by creating a list of nouns that appeared in the system requirements document. Next, we wrote a list of business objectives based on the nouns. Then, we created use cases based on the business objectives.
Once I had the list of use cases, I designed several re-usable components in Figma. I also created several text styles for page headings, group headings, and body text. Together, these components greatly reduced the time it took to design the screens, and ensured consistent styling as to not confuse the users.
I then began planning out the navigation. The core use cases should be accessed the easiest, and as such I realized a 4-tab navigation bar with a call-to-action button on each tab should be the starting point for the user after they log in.
I then began to consider how the information should be communicated to the user. Each of the many supplies had two defined facets of information associated with them: the current supply level, and the minimum required on-hand supply level. The easy way out would have been to just list those two pieces of information on a screen somewhere. However, reading a large list of data can get overwhelming to the user, a graph or some other visual indication can communicate the information much more effectively. This was a much more difficult task than it seemed. A bar graph would not be optimal, as each supply can have a different minimum value, and there is no limit on how much of one supply the company could have. A circle graph would not be optimal either for the same reasons. I attempted using many different types of graphs without success. The optimal solution required reading between the lines— what does the user really want to know when they are viewing the supply levels? Based on our use cases, the user needs to view the supply levels when they are selling supplies or scheduling deliveries, and thus needs to know if they have enough supplies on hand to not affect upcoming scheduled deliveries. This realization presented me with a third facet of information that is both more important to the user and easier to visualize. I settled on a handful of symbols that represent the predicted time a certain supply will run out in, which are based on the current and minimum supply levels, as well as the dates and amounts of upcoming deliveries.
Finally, I finished the rest of the screens based on the use cases. It was relatively smooth sailing from here on out. I often went back through the use cases and modified them, as I found more optimal ways to complete the business objectives than what we listed on the use case diagrams. You can play with the finished product below!
☆ For the best experience on desktop devices, fullscreen the Figma applet, click 'options,' and select 'fit' as the zoom option.