In my Multimedia Design and Development course, I was required to redesign another app for the Insomnia Cookies brand as my final assignment.
*This project is only meant for STUDY purposes *
Since I enjoy working on creative projects as a multimedia designer, I selected this new venture. I am passionate about logo design, wireframe sketching, digital design, and user experience.
Research and Proposal
Insomnia Cookies is a rapidly expanding late-night bakery concept headquartered in Philadelphia, PA, and New York, NY. Founded in a University of Pennsylvania dorm room by then-student Seth Berkowitz, Insomnia Cookies has been feeding the insatiable hunger of loyal Insomniacs since 2003. Today with more than 190 nationwide locations and growing, Insomnia Cookies offers a wide variety of delicious cookies and sweet treats in-store, for local delivery, and nationwide shipping.
I challenged myself to create a redesigned cookie app of how the front of the project will look using Figma Software, rather than Adobe XD. In order to prepare the proposal, I studied the competing applications, determined who my users are, discussed the problems, identified my role as a UX/UI designer, and came up with appropriate solutions.
Project Goal
The plan is to redesign a poorly designed app or website. It is the main purpose of this project to redesign the “Insomnia Cookies” app in order to improve usability and design overall using different types of software: Adobe Illustrator, Photoshop, and Adobe XD.
It is the main purpose of this project to redesign the “Insomnia Cookies” app in order to improve usability and design overall.
I plan to conduct creative thinking research on the cookie app in order to learn more about it.
During the creative process, I’ll create a Design Sprint:
1. User flow
2. Wireframe Sketches
3. Logo brand redesign
4. UI Style Guide or Style Tile
5. Mid/High-Fidelity Prototype in FIGMA software
- Incorporating the feedback of my classmates, before creating the mid-fidelity wireframes and progressing on to visual design prototyping.
Role
My role as a UX designer involves redesigning the cookie app concept and its delivery method-like shipping experience.
Problems
The cookie cards and product features will switch to browsing mode when you tap them. It only delivers cookies in the States.
Solution
Cookies can be shipped worldwide by pressing the shipping mode button for a better customer experience. Designed new cookie selection cards.
Technology Used:
- Software: Adobe Illustrator, Photoshop and Figma Software
- Resources/online tools: Dribble, YouTube
What are the Design Challenges?
- What is the problem I am trying to solve?
- The purpose of solving this problem is to sell different kinds of cookie flavours.
- There is also a plan to design an app that offers and sells fresh cookies, such as classic or vegan cookie boxes, to make it easier for customers to order online and have them shipped across the country.
- Also, can be delivered online or pickup within the delivery range.
2. Design Questions
- What is the maximum quantity of cookies I can add?
- What is the best way to ship my chosen cookies online?
- My cookie needs to provide users with a shopping experience that enables them to purchase cookies. How will I accomplish this?
Competitive apps:
- Starbucks
2. Subway
3. Tim Hortons
4. Big Fat Cookies
The Chosen Design Thinking
Using this design technique will help me to develop my design progress including my final interactive app prototype.
Undertsand →Explore → Materialize
Retrospective App- User
As part of my redevelopment of the cookie app, I will create a retrospective user analysis in order to identify my target audience. Cookie lovers will be my target audience for my redesigned cookie app.
I listed ten pain points for users to understand their frustration and feelings when experiencing bad customer experiences with the redesigned app.
Also, Following the list of pain points, I included the solution and expanded more ideas for the Cookie app.
User Persona
User Journey
Problem Statement Solution
- I plan to use this solution to facilitate the progress of my design sprint to sell cookies online by means of online delivery/pickup or nationwide shipping.
Feedback from classmates and peers
After presenting this Research and Proposal to my classmates as my peer in-person class, I received good feedback from them:
- The shipping nationwide mode concept works well to deliver cookies on the app.
- Focus on the main objective of global shipping delivery.
- Focus more on the target audience.
- Solve the delivery or nationwide mode more.
- Optional to add a cookie subscription monthly delivery service.
- Redesign the Logo brand for the app.
User flow :
An app’s user flows guide users through features and screens until they reach their goals. This process describes how a user achieves a desired outcome, such as purchasing cookies or ordering delivery. In the user flow, after you purchase cookies online, I made options such as Local delivery or Worldwide shipping buttons.
Wireframes:
The user flow was followed to create wireframes for screens such as the Get started screen, the login screen, the Home screen, the buy cookies screen, the shopping cart screen, the review order screen, the thank you screen, and the tracking details screen.
I sketched these wireframes using my wireframe sketchbook as a guide given by my previous professor from my previous semester. This is really helpful in speeding up my project without any delays.
Logo Design brand:
The Insomnia Cookie logo is outdated, so I used Adobe Illustrator to design a brand new version using Grid alignment, and colour gradients to adjust the theme, change Fonts, and changed the tone almost like a similar but different logo but in a different style.
UI Style Guide:
Figma software allows me to create a user interface style guide that helps define typography, colours, layouts, and other elements that should be used in accordance with the cookie app’s brand guidelines.
Mid-Fidelity Mockups
Having sketched wireframes in my sketchbook, I then transfer the wireframes to Figma app to create mid-fidelity prototypes of the cookie apps to show how they look before the final high-fidelity version.
High-Fidelity Mockups
Final Deliverables
- Here is the Figma link to the Final Fidelity prototype (iPhone 14 Pro Max): Click here
- Also, a Figma link to the Mid Fidelity prototype (iPhone 14 Pro Max): Click Here
My Reflection:
I was thinking of creating a new different project of redesigning an App individually after my last project of designing a three series of 15 seconds Nintendo switch motion graphics.
Honestly, I am familiar with UX/UI app design thanks to my Multimedia Professor named Asma Arslan, and I have good skills in that area, having designed Icons, Logo brands, Mid and High-Fidelity prototype designs using Adobe XD software.
It is time-consuming and hard to maintain a study schedule before the final prototype, but it is still worth studying for future UX/UI design jobs.
My professor Kristopher Ohlendorf gave me the challenge to learn the UX software App known as “FIGMA”, and I was able to learn quickly how to use it for creating components and more, and now I am able to use both Figma and Adobe XD software.
What I learned in college is that I must be ready to apply for what fieldwork I want based on my current project.
As my last Assigned project before I graduate from Humber College, I am very grateful to my professor for giving me the opportunity to make more projects during my previous semesters.
Read the full article here
