Design for Organization

Srikar Ayyalasomayajula
6 min readApr 21, 2021

Introduction

As a student studying Computer Science at the University of Michigan, most of my experience had been with development and purely technical projects. I never had much confidence in my design abilities and did not consider learning design a necessity in the slightest. However, after working on some applications from start to finish and taking some design classes, I fully realized the symbiotic relationship between design and development. Apart from the programming skills I have gained through industry experience and the Computer Science program, I was also able to gain experience using wireframing technologies and product management software. I even adopted a careful, iterative design approach and learned robust usability and quality assurance techniques. With both design and development skills, I realize that I have everything I need to create applications that have the potential to create impact and seriously contribute to people’s lives. My goal is to create the next go-to application that people use in order to organize their lives and face the world with more confidence.

Problem Statement

Landing page for the “Tree Planner” application

The product I have designed is called “Tree Planner”, and its tagline is “Always be one step ahead”. Often, life planning and setting goals can be super stressful and variable, especially in terms of setting a timeline for goals and making plans to meet those timelines. While many users of traditional planners make every effort to calculate their steps, people cannot help being subject to unexpected events and external circumstances. People need a planner that accounts for every possible outcome of events so that they can always be prepared for life’s twists and turns.

Tree Planner uses a tree-like structure to plan out goals and roadmaps instead of a list-like structure, so that for every step in the plan, there are subsequent “children” steps that are based on whatever possible outcome that step has. This way, no matter what life throws at us, Tree Planner will have you always one step ahead.

Audience

This product has a wide range of audiences, since everyone can use a planner in their lives. The Tree Planner is simple to use not matter what is going on in your life, and can accommodate a variety of different nodes. However, there are some groups that would get a lot more use out of the product than others. Therefore, we will single in on some main personas that it will benefit the most.

  1. Students in the peak of their extremely busy college careers will find great use out of this product. They will be able to create event nodes for each of their classes and make modified graduation plans for every possible scenario of passing or failing courses. They can make nodes for their clubs and organizations and create events for whether they get into certain clubs or not. This way, students can ease a lot of the stress that comes from uncertainty and face their lives with clear and level heads.
  2. This product is also good for heads of households. They can create nodes for all of their payments, upcoming required purchases, and the necessities of their dependents. Since there are many twists and unexpected events in the lives of those taking care of many others, it is useful to have a thorough planner for all of these events that can account for if they go wrong and a backup is necessary.

Design Process

The design process for this product took a variety of iterations and levels. I first designed the bare bones of the product with no color or stylistic fonts. This allowed me to finalize technical aspects such as dimensions and functionality when it comes to clicking and hyperlinking. I would create one page, then test it to see if the buttons were easily clickable and the dimensions looked okay on different screens. Finally, after testing all of the bare pages, I went back and chose a color scheme that both represented the product and looked aesthetically pleasing. I went with a green and white theme, since we are linking trees and organization, and I went with black text to keep things bold and visible. After adding all of the components, I did extensive testing of all links from all paths in order to make sure everything was going smoothly. I also made some small color fixes after seeing everything in full swing.

Solution Rationale

Tree planner with three nodes: a parent and two child nodes

You can find a link to the prototype of Tree Planner here.

Initially approaching the solution was quite intimidating, since nothing like this has quite been done before. Therefore, I took some time to write ideas down on paper before beginning the wireframing. I decided to split pages into sections that required individualized attention. Therefore, I decided to make each “Add Node” interaction its own page. By doing this, I allow users to place a full focus on putting as much information as possible in each node.

While the notion of the tree-like structure was there from the beginning, the exact execution took some iteration. I had many ideas for what to include in each node’s preview on the grand calendar and what to save for when the user clicks “More Info”. In the end, I decided to include only action items in the preview and all other descriptors in the “More Info” section.

Another element that was integral to the solution was the “Date” and “Undate” options. Pressing “Date” will cause dates and lines to appear on the screen, and pressing “Undate” undoes this. The lines and dates allow users to put their nodes into a timely perspective and analyze where they stand in terms of dates and time. However, I realized that these lines may be obstructive to some nodes and some users may prefer the cleaner design over the added functionality of the dates. Therefore, I chose to leave the option to the user.

Feedback

The product had been through many iterations, as mentioned earlier, and each iteration brought with it a number of critiques and edits from users. In the beginning, I had one screen for every type of node creation, and had a pre-filled box called “None” in the Parent field when creating another root node. I was told this was confusing, as people would not know how to manually specify parent nodes and transitions. Instead, I changed it so that each node has its own “Add Node” button that will automatically add the new node as a child of that node. The dates were also a point of feedback. Initially, I just had the dates there without the lines going across and was told they looked out of place and confusing. Therefore, I added the lines and even the option to remove them entirely. Finally, since the concept is so new, it was difficult to navigate the prototype as intended, and I tried to take the mistakes users made to help make the prototype easier to follow. This included adding more screens for every possible button and adding a blank screen for forms initially before the screen with them filled in.

Next Steps

In the future, we are looking to implement a dashboard feature that highlights different events and the progress of those trees in order for users to be able to select what to focus on. Students and workers should also be able to import their calendars and have it parsed into trees. Once integration with Artificial Intelligence becomes more streamlined and universal, we will also create a personalized “Goals and Milestones” report that categorizes all nodes and creates a plan of action based on them. Essentially, we want users to be able to take the majority of their life planning burdens and put them down on our platform.

--

--