THE INSIDER
Branding and App Design Case Study
PROJECT BRIEF
The Insider was created to serve the purpose of providing users the ability of organizing items, storing, and locating boxes inside of their home, all through their phone. This project was created and designed for my UX/UI & Web Design (II) class during the Spring 2021 semester at Clemson University.
THE PROBLEM
The issue the app is attempting to solve is the unkown and guessing game that comes along with storage boxes in your attic, closet, basement, etc. If you are in need of a specific item that is stored away, you are solely relying on your memory of which box the item is in, and also where that box is stored at.
THE GOAL
The Insider was created to serve the purpose of providing an app for users have the ability of searching, organizing, and locating for specific boxes and individually stored items, rather than searching box through box to find items. The app was designed with two sides of the app, scan QR codes that are printable apon box creation, or search through your boxes individual items.
MY RESPONSIBILITIES
Branding, sketching, wireframing, user personas, high fidelity designs, prototyping, and style guides.
TOOLS UTILIZED
Sketch, InVision + Craft, Adobe Photoshop
THE PROCESS
DEFINE
Find the problem, and begin generating ways to fix it.
IDEATE
Create sketches, and design styles for the app to utilize.
CREATE
Begin designing the app based on the ideation designs.
TEST
With a complete design, prototype to share with others and receive feedback.
DEFINE
INITIAL PROPOSAL
The original proposal for the app was to construct an app that is minimal, clean, as well as data and image driven. The feel for the app should to be in “dark mode”, and include small accents of bright, fun, neon colors. The app needs to accomplish the users needs, functionally allowing them to create new boxes, include images for each item, and provide them storing with ease. The overall aesthetic for the app should be edgy and unique.
IDEATE
USER PERSONAS
Determine the target audience, what they should receive from the app, and how exactly the app would help them.
SKETCHING
Laid out all of the screens I would need for a complete app. Used sketching to formulate a unique and different design, as well as convey contrast and design elements.
WIREFRAMING
The wireframe of your skecthes becomes the backbone of devloping an apps design. This is the starting point of a concrete design, where you can digitally work, then share and recieve feedback from classmates, or my professor. This will highlight any kind of design imperfections, so you can fix them before diving into a fully designed product.
DESIGN
STYLE GUIDE
The style guide for Today’s Crave app design strongly illustrates the theme of the brand, and what to expect for the app design in itself. The style guide gives insight on background elements, brand colors, logos, pagination, button styles and icons, and typography elements.
HIGH FIDELITIES
When designing the high fidelities for The Insider app, I did not have too much changes within the design itself. The page that went through the most change would be the profile. I really wanted this page to be data driven, illustrating different boxes, items, and locations through different charts and graphs.
TEST
PROTOTYPING
These prototypes were shared with my professor and classmates to receive feedback. The prototypes were created using InVision with the Craft plug-in. While I was able to utilize the Craft plug-in inside of Sketch, making the static design clickable and functional, my Invision subscription did not allow me to transfer the prototype into my Invision account, therefor I do not have an Invision link to share.
LEARNINGS
WHAT THIS PROJECT TAUGHT ME
“Dark Mode” type designs are not as easy as they seem– getting a good contrast between design elements was a little tricky at times. However, without a slight contrast or pops of colors, it looked too closely to a wireframes design and not a high fidelity design.
Charts and graphs can tell a story better than you think– by incorporating charts and graphs on the profile page, I was able to illustrate and convey a more information than I thought.
