TREES INTERNSHIP
Week 1
Trees (https://www.trees.app/) is a company that aims to sell their app to colleges. The app gives students a questionnaire they can fill out. Based on their answers, machine learning, and previous students' responses, they match students with action plans that are best suited for them. My job was to work on the super-admin panel which is for the people at Trees to use.
My partner and I were tasked to design some things for the super admin dashboard.
This is what someone at Trees would use to create a new instance of the app. A new instance of the app would be for each different college they sell their app to. They can check the categories of plans in the database and they would be in the new instance.
This is how you would search for a specific plan within a category.
This is how you view the plans within a category.
This is how you would create a new category(tag).
This was my first week interning at Trees. It was cool meeting my supervisor, the founder of the company, and my team members. Everyone was super friendly and I was very excited to work with them. My partner and I also worked well together and were able to produce sketches effectively.
Week 2
This week was the first week we used Sketch/Lunacy to create prototypes. It was my first time using Lunacy so I was still messing around and learning the design tool.
This is how a Trees admin would add or remove tags from a path(plan).
This is a prototype of the creating a new instance sketch from the previous week.
The user can sort by rating, most used, and alphabetical in the database to put into the new instance.
This is a screen for all the previous instances and creating a new instance.
Overall, this week my designs were pretty basic. I was still learning Lunacy, so I was not very comfortable with how everything worked. I also learned that Sketch/Lunacy is the industry standard. I want more experience working with this so I can be better prepared in the future.
Week 3
This week, I was tasked with creating a dashboard where the people at Trees can see all the admins for the different schools. It would show their basic info and would let you see more if you click on the ‘view details’ button. The Trees admin also has the ability to edit information, add, and disable admins.
Here is how a Trees admin would see the list of school admins.
This is the screen the Trees admin would see after hitting ‘view details’.
This is the profile picture uploading screen.
I was asked to make the school admin list in a “tabular view” format. I did not know about that term before this, so I had to do some research. I followed the general format that Google gave me and I tried my best to replicate it for this instance. The grayed out names would be for admins who were disabled. I felt a little bit more comfortable with Lunacy but I was still nowhere close to being proficient. That is okay because I still have the rest of the internship to learn and improve.
Week 4
I was asked to go further with what I did last week and give them more options.
It might be easier if there was a little pencil thing after each entry so I made this.
I also moved around the layout for the detailed screen to give more options.
An important step in the design process is iteration. Iterate, iterate, iterate. It does not hurt to have more options to choose from. But only after those options are created can we find out what works and what doesn’t. I learned that it is not enough to just make one version of a screen. Making multiple will lead to better results.
Week 5
For this week, the plan was for me to use the toolkit or the style guide that Trees has, for the designs I already made in the previous weeks. This way, my designs will have the same font, colors, and format that the existing designs have. However, we ran into a problem. The design tool that we use is called Sketch, which is for Mac only. The design tool I use is Lunacy, which is Sketch but for PC. Usually, I can easily import Sketch files into my Lunacy to edit. However, when I tried importing the toolkit into my Lunacy, it just would not work and the formatting was always off. We tried many different ways to make it work, but unfortunately we were not able to. Therefore, it would be impossible for me to create designs but with the Trees format. I talked it through with my supervisor and the founder of the company and we decided that it was best for me to focus my time on something else because it would be a waste of time making designs that cannot be used for Trees.
Week 6
Dashboard layout
Instead of doing designs, this week I was tasked with a research report. I was to look into admin panel designs and do a report on them
I looked through many sites such as Pinterest and Dribble and found 3 categories of dashboards.
The 1st category are ones with lots of boxes such as follows.
I like this one if there are a lot of different things we want to show. It is easier to display as separate sections and it can be easier for the user to manage.
The 2nd category is less boxes.
I like this one better if we do not have as many sections we need to show. Also, this would be more useful if we have bigger amounts of info under one section. Both this one and the previous ones are viable options depending on what needs to be displayed.
The last category is admin panels with no boxes.
This one does not organize the information with boxes but it still can display what is needed pretty clearly.
After meeting with my supervisor and the founder of Trees, we decided that too many boxes is not something we want because it is too distracting. Little or no boxes is better for Trees based on the information we want to display. Also, we agreed that the bar on the left that shows the sections is something that we want in our Admin panel for better organization of the sections. I suggested that we should also label the symbols of the sections instead of just the symbol so it is more clear for the user.
While I was sad that I would not be able to continue doing designs in Lunacy and improving my design ability, I actually had a lot of fun doing this research assignment. It was cool to see what other people have done already and to extract what works for Trees.
Week 7
Breadcrumbs
For this week, I was assigned another research assignment and this time it was on breadcrumbs.
I first did a bit of research on what they were and how they are used.
There are actually 3 types of breadcrumbs
Location based - shows where the user are in the website’s hierarchy
Attribute based - displays the elements of the page
Path based - shows the steps a user takes to go to their current page
Benefits of using breadcrumbs
Convenient for users
Reduces clicks or actions to return higher-level pages
Doesn't take up a lot of space on the screen
Tips for using breadcrumbs
Don’t use breadcrumbs if the site is relatively simple with not too many layers
Don’t make the breadcrumb navigation too big
Always include full navigation path
Go from highest to lowest level from left to right
Breadcrumb titles should match page titles
Keep the breadcrumb area uncluttered and clean
Some more examples of breadcrumbs
Breadcrumbs in admin dashboards
Breadcrumbs are prevalent in all types of websites and it makes our life as users so much easier. It was very eye-opening to research them and appreciate something we barely notice and take for granted.
Week 8
I was asked to help make a recommendation of how to use breadcrumbs in the Trees admin panel. I first pointed out that the breadcrumbs used in the admin panel must be location-based. We do not care how the user got to the current page they are on. We only care about the location in which they are currently at.
I also found that someone else already tried making breadcrumbs in their design.
I recommended that they should move the breadcrumbs down instead of it being in the header. Most breadcrumbs I see on websites are not in the header because it changes based on what page it is. I also recommended that they change the breadcrumb color to blue so it signifies to the user that those are clickable and it would bring them back to those pages. Here is the same page but with my recommendations, that was created by other designers a week later.
It was so cool that the founder of the company listened to my advice after I did research on the topic and gave my recommendation. I actually made a real impact on the company and these upgraded breadcrumbs would be on most of the pages.
Week 9
For this week, I was tasked with making an infographic on what Trees is as a company. I was provided with all the text. I was also told to draw 5 small withering trees for the first sections and 5 bigger and flourishing trees. I made the following three designs with Figma.
I made sure to iterate this time so I can present my supervisor and the founder with more options. I also went for a more cartoon-like version of the trees but I thought that they would find the trees weird-looking. However, they really liked my take on the trees and thought that it would fit the overall theme of the company.
Week 10
This week, I was asked to make it more clear that the trees in the top row are under the same conditions. Therefore, instead of individual boxes, I put them on the same landscape to show that they are existing within the same environment. They also wanted a bigger emphasis on the trees themselves so I made the boxes taller. I made the trees in the top row smaller to show how different environments can allow them to flourish individually on the bottom row. I reformatted where the colors change to put more emphasis on the “They’re individuals” part. I also changed the colors to fit the Trees theme.
This was my last assignment of the internship which was kind of bittersweet. However, looking back, I actually had a lot of fun with this company. I had my doubts going in because they are a small startup and I wondered if I could gain actual experience here. The people were really nice. My weekly meetings with my supervisor and the founder of the company were very beneficial for me. I was able to get feedback, advice, and help so quickly. The other designers I worked with were also cool people and helped me grow as a designer. While I thought I would be proficient with Lunacy by the end of this internship, that was not the case. I did get to do research projects which I thoroughly enjoyed because it also gave me more insight into the design process as a whole. In these 10 weeks, I learned a lot and am very grateful to Trees giving me this opportunity to work with them.
