TREELINE
Treeline is a project created in an interaction design class. My assignment was to use Figma to create an interactive app prototype for a made-up company. Company names and industries were generated and randomly assigned by my professor. My assigment was a company called “Treeline”, which was an outdoor recreation outfitter. I designed the logo and icons in Illustrator, generated the product photographs using a combination of Midjourney and Photoshop, and then combined everything into one cohesive Figma file. Scroll to the bottom of this page to test out the prototype yourself!
To start, I created a styleboard for Treeline. Since Treeline was an outdoor recreation outfitter, I looked for textures found in nature. I also looked for photos of outdoor recreation activities. Once I had a collection of photos and textures I was satisfied with, I selected my colors based on the colors I saw in my photos. I chose mostly greens and blues since these are nature-like colors, and then added in a magenta and a pop of red for a little more personality.
The next step was to create a persona. A persona helps to identify the audience that Treeline is aiming to speak to. I framed my persona around Mirabel Brooks, a specific, believable user with real goals, motivations, and needs. Mirabel has an adventurous, outgoing personality and loves to spend time outdoors. She aims to be active every day. Thinking through Mirabel’s lifestyle helped to identify what she might look for in an outdoor brand.
Now with a clear idea of Treeline’s style and target audience, I sketched out some wireframes on how I imagined an app would look. I thought through each of the page types I might need, labeled them, and mapped out where elements would potentially fit within them. I knew I might end up switching things around once I moved my ideas into a digital format, but it was very helpful to have my base ideas sketched out as a reference.
Before moving into Figma, I opened Illustrator. Treeline wasn’t a branding project, but I still wanted everything to be visually cohesive. Because of this, I created a simple logo and a set of icons for the navigation bar. I tied these elements together by using soft, rounded corners, as well as by using a repeated wavy squiggle. Want to see me design the icons live? Watch the beginning of the video at the bottom of this page!
One other non-Figma portion of this project I’d like to highlight is a mockup of the exterior of Treeline’s store. I generated the top two images using Midjourney, created the sign design in Illustrator, and combined everything into one image using Photoshop. Want to see me create this element live? Watch the video at the bottom of this page, starting at 9:07.
Figma! Curious how I created this? Well, you’re in luck because sophomore-year me was a genius and decided to screen record my entire design process. Watch the video below!
try me! i’m a figma prototype. i work like any app you might have on your phone.
tap through the screens, using the nav bar to help you!
Treeline was the project that made me realize how much I enjoy design work that allows me to combine my skils across multiple disciplines. The primary goal of the assignment was to learn how to effectively use Figma. However, in addition to strenghtening my Figma skills, I also found ways to incorporate branding and logo design using Illustrator, image editing and manipulation using Photoshop, and video editing in Premiere through creating my process work video. Combining all these different aspects was very energizing, and I have continued to find ways to work across disciplines in my design work ever since. I did also learn a lot about Figma during this project. Upon it’s completion, I felt way more confident in my understanding of components, variants, and auto-layout practices!