alfred — ai powered luxury dining experience

project

personal project

tags

product design
research

timeline

'21 (revamped in '23)

readme.txt

I began this project at the very beginning of my transition from a graphic designer to a UX/UI designer, back in 2021. After finishing it, I knew that making this case study wouldn’t do the project any justice as my UI skills were very poor at that time, so I decided to leave it be for a while. As product design is all about iteration, I revisited it when I felt I had the necessary experience to create what I had originally imagined. To me this is a special project because, in a way, it reflects my evolution as a designer.

problem

2020. The world has suffered a global pandemic. It’s been a hard year for restaurants, most of them having to close because of the sanitary situation. People aren’t exactly eager to go out dining again like they used to, which creates an opportunity for the delivery service.

solution

Enter... Alfred, the AI-powered virtual waiter that learns user preferences through interaction, and then makes increasingly accurate suggestions.

The process of ordering food from home is impersonal, there’s practically no exchange between customer and vendor. That’s where Alfred comes in, emulating the figure of the waiter, something that until now had been absent in the process of food delivery.

uniqueness

No two are alike: each user has its own distinct characteristics and preferences. Alfred brings exclusivity through the personalization of each users’ experience. As the user continues to order, this virtual waiter continues to learn, increasing his ability to tailor unique meal recommendations.

simplicity

Nowadays, ordering food apps have so many elements and sections that it’s like browsing movies on Netflix for 20 minutes, only to end up watching nothing because, how could you decide between so many options?

Alfred’s interface is stripped down to the bone, allowing restaurants and dishes to step into the spotlight, emulating the hierarchy food has in high-end gastronomic experiences. The virtual waiter’s guidance drastically reduces the time it takes to make a decision while ordering food.

research

goals

1

Understand the users’ needs and preferences when it comes to ordering gourmet food through an app.

2

Comprehend how to translate the experience of going to a luxurious restaurant into a food delivery app.

interviews

We decided to go with interviews as our main investigation method because they would provide us with deep understanding of users’ thoughts, motivations, emotions and pain points, allowing us to capitalize on that valuable information.

the sample

Gastronomy lovers
with high purchasing power ranging from 30 to 65 years old who frequent top restaurants looking for exclusive experiences...

and elite chefs.

Gastronomy lovers
with high purchasing power ranging from 30 to 65 years old who frequent top restaurants looking for exclusive experiences...

and elite chefs.

Gastronomy lovers
with high purchasing power ranging from 30 to 65 years old who frequent top restaurants looking for exclusive experiences...

and elite chefs.

Jesus (27)

Jesus (27)

Laura (44)

Albert (32)

Andrea (30)

Ignacio (36)

Cristian (32)

discoveries

We interviewed 6 people that matched the sample we defined. All of them had been several times to Michelin star restaurants and frequently ordered food from home. In summary, this is what we found:

“it’s like they don’t

know how to design

menus, making it

hard to order”

“it’s like they don’t

know how to design

menus, making it

hard to order”

“there’s so many
options that it’s

difficult for me
to decide”

“there’s so many
options that it’s

difficult for me
to decide”

“food styling is

really important”

“food styling is

really important”

Finding

Finding

Information in food apps is overwhelming and unorganized.

Information in food apps is overwhelming and unorganized.

“going to these
places makes you
feel like you’re part
of a play, it’s magic”

“going to these
places makes you
feel like you’re part
of a play, it’s magic”

Insight

Insight

Top restaurants pamper the customers, making them feel unique and special.

Top restaurants pamper the customers, making them feel unique and special.

Insight

Insight

Eating is a sensory experience, and sight is the sense that most influences when it comes to food.

Eating is a sensory experience, and sight is the sense that most influences when it comes to food.

“they give you
advice while
you order and
tell you the story
behind the dishes”

“they give you
advice while
you order and
tell you the story
behind the dishes”

“it’s not just how

they serve the

dishes, but the

atmosphere”

“it’s not just how

they serve the

dishes, but the

atmosphere”

“restaurants
with great reviews
sometimes don’t
meet expectations”

“restaurants
with great reviews
sometimes don’t
meet expectations”

“to me photos are

a big deal because

I want to know

what I’m ordering”

“to me photos are

a big deal because

I want to know

what I’m ordering”

Finding

Finding

It’s difficult to trust ratings because they’re not objective nor are they verified.

It’s difficult to trust ratings because they’re not objective nor are they verified.

Finding

Information in food apps is overwhelming and unorganized.

Insight

Eating is a sensory experience, and sight is the sense that most influences when it comes to food.

Insight

Top restaurants pamper customers, making them feel unique and special.

Finding

It’s difficult to trust ratings because they’re not objective nor are they verified.

opportunities

This is how the findings were translated into actions:

Eating is a sensory experience, and sight is the sense that most influences when it comes to food.

Remove unnecessary elements, give more hierarchy to photos and include videos to enhance the experience.

It’s difficult to trust ratings because they’re not objective nor are they verified.

Alfred’s consumer-first AI compares and analyzes reviews and ratings making them more trustworthy.

Top restaurants pamper the customers, making them feel unique and special.

Each user receives tailor-made dish suggestions according to their tastes and preferences.

Information in food apps is overwhelming and unorganized.

Apply Hick’s Law, reducing the users’ options by relying on Alfred’s custom recommendations.

Information in food apps is overwhelming and unorganized.

Apply Hick’s Law, reducing the users’ options by relying on Alfred’s custom recommendations.

Apply Hick’s Law, reducing the users’ options by relying on Alfred’s custom recommendations.

Eating is a sensory experience, and sight is the sense that most influences when it comes to food.

Remove unnecessary elements and give more hierarchy to photos. Include videos to enhance the experience even further.

Remove unnecessary elements and give more hierarchy to photos. Include videos to enhance the experience even further.

Top restaurants pamper the customers, making them feel unique and special.

Each user receives tailor-made dish suggestions according to their tastes and preferences.

Each user receives tailor-made dish suggestions according to their tastes and preferences.

It’s difficult to trust ratings because they’re not objective nor are they verified.

Alfred’s consumer-first AI compares and analyzes reviews and ratings making them more trustworthy.

Alfred’s consumer-first AI compares and analyzes reviews and ratings making them more trustworthy.

visual

ui

While wireframing, I’d sketched different versions of Alfred and couldn’t wait to bring him to life. As the task involved luxury and sophistication, I went for a thin line style, not only for the illustrations and icons but for typography too. I used very big images and cards but balanced them with these subtle line details, so it wouldn’t become too brutalist. I chose typefaces that express elegance, yet are still modern and, of course, very legible. As always, I avoided ornamentation in the components and kept it simple, so the food could do all the shining.

alfred

Meet Alfred, the AI-powered foodie extraordinaire, always ready to recommend you the perfect dish based on your mood and taste. He keeps track of all past orders and preferences, so he knows just what you like.

Even though the timeline of this project was very short, I thought it would be a nice addition to add some gamification. In his tab, users can see the overview of Alfred’s level, calibrate his AI, claim level-up rewards and even let him take control and order food by himself. Don’t worry, his orders can still be customized during the checkout.

The challenge was to give Alfred presence throughout the app while still making sure he wasn’t invasive, as most chatbots are.

Alfred

Alfred

Alfred

Level 5 - Silver Bowtie

Level 5 - Silver Bowtie

Level 5 - Silver Bowtie

Lv. 6

Lv. 6

Lv. 6

8 orders left to reach Golden Bowtie

8 orders left until Golden Bowtie

8 orders left to reach Golden Bowtie

Levels are based on the frequency and variety of your orders. Higher levels mean more accurate recommendations and unlock special rewards.

Levels are based on the frequency and variety of your orders. Higher levels mean more accurate recommendations and unlock special rewards.

Levels are based on the frequency and variety of your orders. Higher levels mean more accurate recommendations and unlock special rewards.

Learn more

Learn more

Learn more

Alfred says

Alfred says

Alfred says

“This restaurant has 5 dishes you enjoy”

“This restaurant has 5 dishes you enjoy”

“This restaurant has 5 dishes you enjoy”

Recommended

Recommended

Recommended

4.4

4.4

4.4

Tres hermanos

Tres hermanos

Tres hermanos

Spanish food

Spanish food

Spanish food

Alfred says

Alfred says

“If you don’t like this place, next order is on me”

“If you don’t like this place, next order is on me”

Recommended

4.5

Gofio

Gofio

Classic cuisine

Classic cuisine

Alfred says

Alfred says

Alfred says

“Hey! this dish goes well with...”

“Hey! this dish goes well with...”

“Hey! this dish goes well with...”

The majestic

leaf salad

The majestic

leaf salad

10

10

Sauvignon Blanc
Rasteau 2014

Sauvignon Blanc
Rasteau 2014

16

16

AAA

Primary #EBDAC1

AAA

Primary #EBDAC1

AAA

Primary #EBDAC1

AAA

Primary #EBDAC1

AA

Secondary #C37143

AA

Secondary #C37143

AA

Secondary #C37143

AA

Secondary #C37143

AAA

Tertiary #3D2927

AAA

Tertiary #3D2927

AAA

Tertiary #3D2927

AAA

Tertiary #3D2927

AAA

00 #111111

AAA

00 #111111

AAA

00 #111111

AAA

00 #111111

AAA

10 #1C1C1D

AAA

10 #1C1C1D

AAA

10 #1C1C1D

AAA

10 #1C1C1D

AAA

20 #2F2F2F

AAA

20 #2F2F2F

AAA

20 #2F2F2F

AAA

20 #2F2F2F

AA

30 #848484

AA

30 #848484

AA

30 #848484

AA

30 #848484

AAA

40 #A5A5AE

AAA

40 #A5A5AE

AAA

40 #A5A5AE

AAA

40 #A5A5AE

AAA

50 #F2F2F2

AAA

50 #F2F2F2

AAA

50 #F2F2F2

AAA

50 #F2F2F2

AA

Error #DD5757

AA

Error #DD5757

AA

Error #DD5757

AA

Error #DD5757

AA

Success #46AD74

AA

Success #46AD74

AA

Success #46AD74

AA

Success #46AD74

AAA

Warning #FFDE67

AAA

Warning #FFDE67

AAA

Warning #FFDE67

AAA

Warning #FFDE67

AA

Information #608FC7

AA

Information #608FC7

AA

Information #608FC7

AA

Information #608FC7

Satoshi

Satoshi

Satoshi

a modern yet sophisticated typeface with geometric letterforms that is highly legible and has personality.

a modern yet sophisticated typeface with geometric letterforms that is highly legible and has personality.

a modern yet sophisticated typeface with geometric letterforms that is highly legible and has personality.

Helvetica Neue

Helvetica Neue

Helvetica Neue

balanced proportions and adequate spacing between letters to ensure the maximum legibility of paragraphs.

balanced proportions and adequate spacing between letters to ensure the maximum legibility of paragraphs.

balanced proportions and adequate spacing between letters to ensure the maximum legibility of paragraphs.

custom iconography

Although most icons are from existing libraries, I designed some custom ones to give the app it’s own personality.

product strategy

product strategy

Strategy wasn’t part of the brief so it wasn’t included in the original version of the project, but I thought it would be a nice addition to the revamp so the app could be monetized and actually be viable, in case it ever got developed (it can’t hurt to wish).

monetization strategy

One potential strategy could involve partnering with high-end restaurants and featuring their signature dishes within the app, only as long as these sponsored elements are integrated without interfering with Alfred’s food recommendations.

To ensure that the sponsored content doesn’t compromise the AI recommendations, the sponsored restaurants and dishes could be clearly labeled as such, and have less hierarchy. This way, users can make informed decisions about whether to explore sponsored content or stick with the AI recommendations. Alfred could also be designed to prioritize recommendations based on user preferences, even if they don’t come from sponsored restaurants.

Alfred says

Alfred says

“If you don’t like this place, next order is on me”

“If you don’t like this place, next order is on me”

“If you don’t like this place, next order is on me”

Recommended

4.5

Gofio

Gofio

Classic cuisine

Classic cuisine

Sponsored

2.094

Kitchen 43

Kitchen 43

Modern cuisine

Modern cuisine

engagement strategy

To keep users coming back to the app, this strategy revolved around sending push notifications about new restaurants and dishes Alfred thinks the user might enjoy, making users feel that the app truly understands and learns from their tastes.

These notifications would be sent at appropriate times, such as when the user is likely to be thinking about food, but without exceeding frequency so as not to disturb.

To incentivize them to open the app and place an order, these notifications would also include discounts or special offers.

project evolution

before & after

As I mentioned before, this project was revisited 2 years after its initial design. Comparing both designs was the perfect excuse to identify areas where the first design was lacking and also see how these shortcomings were addressed in the revamped version. A lot of things were improved, but I’ve only highlighted those that are more relevant.

iconography

(Before) I designed all the icons from scratch because I wanted them to have their own personality, making them disproportionate and with poor contrast.

(After) I used an existing library with icons that match the look & feel I wanted for Alfred, and designed a few custom (and important) icons in addition.

accessibility

accessibility

proportions

proportions

visual design

visual design

accessibility

(Before) I didn’t even know this existed at the time of the initial design.

(After)
All colors and text styles were carefully selected to meet AAA or AA contrast criteria according to WCAG Guidelines.

proportions

(Before)There was a big proportion difference between some elements, there wasn’t much harmony in any screen basically.


(After) Designed viewing the screens through a smartphone, to accurately see proportions. Reduced button and icon sizes (among others) and made adjustments in spacing between elements.

visual design

(Before) You could visualize what I was going for, but elements seemed scattered and placed without much thought. The lack of UI skills was obvious.


(After) Absolutely everything was placed intentionally and better design decisions were made.

iconography

iconography

AfterBefore
rrrrrrami - alfred

conclusions & learnings

As this app was not developed and tested, its hard for me to really evaluate the success of the project. It would have been great to see users interacting with Alfred to see if his recommendations helped in any way. Although this started as a fictional project, it would be nice to actually create an MVP to see if the idea really took off.

What I can say is that I learned how to approach a whole UX/UI project from zero, in almost all its stages, from initial research to design and prototypes. Until this project, I had never done research that would later translate into design, and to me it was fascinating.

As I mentioned before, I had the chance to revisit the initial designs and improve them greatly, applying what I had learned these years. Seeing the growth between the projects is seeing my evolution as a designer, and that is why Alfred is such an important project to me.

thank you!

In these short attention span times we're living in, I highly doubt any human has made it this far. If you did (you deserve a medal), I hope you enjoyed reading this as much as I did making it.