Process Work
Who is Sticky Sweet?
Sticky Sweet is a kickstarter based in Portland, Maine. Created by two sisters who enjoyed making ice cream that is all-natural, they together started their own kiosk selling ice cream that is vegan and gluten-free. Sticky Sweet was aiming to hit their kickstarter goal to kick off their own ice cream shop and sell their product outside of Portland. At the time this Kickstarter launched, Sticky Sweet’s online presence was mainly their Instagram and Facebook page. Their own website hadn’t been developed yet and redirected to their social media pages.
For this Interactive ll project, we were to take a kickstarter and rebrand them, design a web and mobile app site, and code the site using HTML and CSS in a two-person group. The process work for this project is the work Nicole Basta and I did for this project. After this UX/UI project was finished, I went back the next semester and rebranded Sticky Sweet again, and created a new design for their site and mobile app.
Click here to view the final version of this project.
Logo Exploration and Word List
I created a word list to help formulate ideas for the logo, as I wanted to create a logo that shows the all-natural qualities of Sticky Sweet products. Since Sticky Sweet uses coconut as part of their ingredients, I wanted to mix the idea of a coconut and a scoop of ice cream. These logos were designed when I rebranded Sticky Sweet on my own, after the Interactive ll project. The logo used in the group project was designed by Nicole B.
For the logo, I wanted to go with a hand-drawn type, as I wanted to brand Sticky Sweet in a way that isn’t too girly or cute. Sticky Sweet prides itself on being inclusive to people with dietary restrictions, so I wanted to brand it to appeal to all genders. The logo is graphic to be visual and attention-grabbing.
Branding
Typography and Color Palette
The logo is meant to look graphic and illustrative, and to appeal to a wide demographic of customers. I created the logo from drawing different roughs of Sticky Sweet logos and turning it into a vector in Adobe Illustrator.
The white, brown, and green colors of the color palette are based off the colors of a coconut, to represent the organic nature of Sticky Sweet products, as well as their use of coconut as one of their main ingredients. The yellow, pink, and brown are reminiscent of vanilla, strawberry, and chocolate ice cream.
The type used in the Interactive ll project’s web and mobile app design was DejaVu Serif Condensed Bold for the header type, Bit Vera Sans Bold for the secondary header type, and Bit Vera Sans Roman for the body type. The type used in my portfolio project’s web and mobile app design is Niveau Grotesk Black for the header, Niveau Grotesk Light Small Caps for the button type, and Bit Vera Sans Roman for the body type.
UX/UI
Why Does Sticky Sweet Need a Website and Mobile App?
At the time, Sticky Sweet’s online presence was just a website that redirected to their social media pages. Sticky Sweet had yet to have a website that allowed customers to find information about their product or purchase their product online. Per the project guidelines, we were to find a kickstarter and design a new site and mobile app pages such as a Home page, Shopping page, Product page, Shopping Cart page, and a Thank You page. We rebranded Sticky Sweet and took turns redesigning the web pages. Once the final design was done, we coded the pages using HTML and CSS.
This first set of Sticky Sweet web pages was designed by Nicole B. These were essentially the first roughs that were created. We both came up with color palette and type, and Nicole designed the logo.
This is second set of roughs designed for the project; I designed these based off of Nicole’s design and feedback from the professor.
This is the third set of roughs designed, based off changes made by both of us from the second set of roughs. By this point, the roughs that were created were a collaborative effort between both of based off of feedback from the class and the professor.
This is the final design we made for the Interactive ll project. We then took this design and designed the mobile app version of it. The mobile app has the same features as the website, as per the assignment.
After we completed the web and mobile app design, we hand-wrote the code before coding the site in CSS and HTML. We coded the mobile site first, then moved onto the web site.
