Personal Project
In-N-Out Burger App Concept
2021
Product Designer Wannabe
The In-N-Out Burger mobile app is a conceptual digital product intended to demonstrate the potential of the In-N-Out Burger brand to expand its business into the digital age. As with many self-initiated projects, the main reason this project exists is to illustrate some of my UX, UI, product, and visual design skills that I am unable to showcase through client work. Open Figma prototype.
Some design challenges include but are probably not limited to: dealing with the many nuances of a secret menu, creating interactions that enable users to customize orders with different onion options or different sizes of drinks, and organizing the information architecture in a sitemap that makes sense.
Figma work-in-progress wireframes
Like most digital products this concept began with wireframes, which I completed using Figma. I utilized the wireframes for layout and functional iterations I could later use as skeletons for the final designs. My wireframe style is somewhat flat due to a combination of my own taste and getting a sense of the gravity the elements together will have that is not always accurately communicated using more line-based wireframes. The wireframes may contain minor errors like spelling mistakes, but these are meaningless since most of the polishing takes place in the design and prototyping phases.
Figma work-in-progress visual design mockups
This is where the product begins to take shape. Using the wireframes as a guide, visual designs for all key screens of the initial launch are completed down to the pixel. Just like the wireframes, I used Figma to create the designs, though I could’ve also used either Sketch, Adobe XD, or Photoshop since most design layout programs function the same.
Figma work-in-progress prototype
I know I already posted a link to the prototype at the beginning for those who just want a basic idea of how the app functions without reading paragraphs of text, but here is where we product design nerds who have made it this far get to discuss the prototype. I used Figma to build the prototype.
I could have used BBEdit to build a higher fidelity prototype in HTML, CSS, and JavaScript to illustrate functionality, subtle animations, and other interactions that cannot be illustrated using Figma (eg, fixed elements, hover effects, videos, and dropdown menus), but the additional work necessary to code it would not have been worth the incremental gains in interactive demo. Open Figma prototype.
