top of page
In a nutshell
Branko’s is a historic Chicago restaurant in the Lincoln Park neighborhood. The restaurant feels like a time capsule from the 70s as it preserves its original design. Even today customers have the option to order off the menu or mix-and-match ingredients to get their desired order. Having a reputation for delicious offerings at competitive prices, it is often found with queues of customers and long wait times for orders.
As part of my first steps into the world of UX, I signed up for Google’s online course. I chose designing an app for Branko’s as my project. The app aims to stay true to the spirit of its namesake; Honest and approachable, comfortable in its skin while adding conveniences such as allowing users to customize and place orders in advance.
With the advent of generative AI, I set forth to redesign this app. Google advocates the use of ‘design-thinking’. In this redesign, I explore the potential of AI within each step of the design-thinking process and document its pros, cons, and potential applications.
The process
Traditional design and research techniques as well as gen-AI tools were explored for each stage of the design-thinking process. In some cases a single method proved most effective and in others a combination of many. The diagram below details the process used for each stage of design-thinking to get the best results:
01/02 Empathize and Define
I used the same personas from my original design problem. After drafting the user story for each I used the ‘Create a GPT’ feature from GPT 4.0 to have a conversation with each of the personas. This helped be better understand their potential goals and frustrations.
After the GPT was defined, I had extensive conversations with each to get a detailed list of goals and frustrations. I tallied these against my initial list to spot similarities, points I hadn’t considered, and AI hallucinations. Finally, I used Dall-E 3 to generate images for these personas.
Insights:
While there is no substitute for actually interviewing users, AI is helpful to work with in tandem once user profiles/personas have been defined. GPT had no hallucinations and provided helpful input beyond my initial consideration when defining the personas’ goals and frustrations.
03 Ideate
I explored a big-picture and a close-up scenario where a persona uses the app. This technique helps to start placing features for key user problems during their journey through the process of placing an order.
After the storyboards, I used the ‘Create a GPT’ feature again. This time defining an experienced UX mentor to compare solutions with. Once again, I tallied my initial list of solutions with the ones provided by my AI mentor, spotting similarities, valid ideas I hadn’t considered, and hallucinations.
Insights:
Once again AI is helpful as an ideation partner with no hallucinations and helpful design/feature recommendations beyond my initial consideration.
Storyboard Big picture
01
Lata is almost done with her last class of the day. She is hungry and wants a quick meal.
02
She remembers that there are food trucks and restaurants near campus.
03
She also realizes that it’s the month’s end and she should be frugal.
04
She uses our app to customize her order, ensuring it is within budget while still being nutritious.
05
Upon order confirmation, she gets an estimate time for when her order will be ready for pickup.
06
Lata gets done with her class and her order is waiting for her. Another happy customer!
Storyboard Close up
01
Lata opens the app and selects the item she wants to order.
02
She can choose the ingredients. The app shows the cost and nutritional value of each.
03
Lata reviews the final cost and nutritional value.
04
Lata is satisfied with her choice and confirms the order.
05
She selects her preferred payment method.
06
Order confirmed! The app displays a timer to let her know when the order will be ready.
04 Prototype
The next step after defining the set of features was coming up with the sitemap for the app. I asked the GPT UX mentor as well as Relume’s AI site builder for a sitemap proposal. I compared this to my design to see if there was scope for improvement.potential goals and frustrations.
After finalizing the sitemap, I used Relume and Figma’s AI ‘Wireframe Designer’ plugin to generate lo-fi screens for the app. I compared these to my design to once again look for areas of improvement.
After finalizing the lo-fi screens, I designed hi-fi screens for the app. I used Dall-E 3 for creating visual assets for the same.
Insights:
Organizing the site map myself was the most effective as AI tools struggled with considering the number of elements simultaneously and tended to miss or forget certain features, even when reminded. Additionally, traditional method of hand-sketching ideas and then turning them into digital wireframes using Figma were faster and more effective for adjusting and iterating designs. AI tools tended to generate ‘genetic’ designs ans struggled with unique features.
High fidelity screens
New design, Old soul
While Branko’s branding has changed, the restaurant’s interiors remain unchanged from its opening in 1976. The visual design of the app takes inspiration from the old branding seen in the picture, circa 1980.
Visual cues are taken from restaurant and food branding from the ‘80s and ‘90s. Dalle-E3 was used to generate assets wherever needed to maintain a consistent aesthetic.
05 Takeaways
Generative AI provides high-quality results in a short amount of time provided it is given sufficient context and a narrow scope. Open AI’s tools generating virtually no hallucinations was particularly impressive.
When used correctly, AI was able to enhance my work in almost all parts of design thinking. There is no substitute for interviewing actual end users, however, using AI to run mock tests is beneficial to identify potential blind spots or simply refine the test plan. The flexibility of GPT 4.0’s ‘define a GPT’ was a welcome addition as purpose-built AI models performed better since the context was baked in. Dall-E 3 fared well in visual design, generating high-quality and context-specific artifacts in seconds. It thrived in a limited role and helped me enhance the quality of my prototypes. Where AI came up short was user testing, with no platforms currently offering a compelling and capable tool.
There are other AI models available that excel at specific tasks e.g., Midjourney for image generation. However, multiple subscriptions can be expensive. Open AI’s $20/mo subscription is good value as it grants access to GPT 4.0, Dalle-3, and the ability to define custom GPT models.
I leave this experiment feeling reassured with most of my concerns about AI dispelled. AI is a powerful tool that will empower designers rather than replace them. It is up to us to familiarize ourselves with the various AI tools available and identify where they fit in our design process.
bottom of page