Recreate Adobe XD Tutorial “Food Ordering App”

burger app

Earlier this week I watched Adobe MAX Sneak Peeks and it’s super cool! (make me want to work there!) Then I stumbled upon this Adobe XD tutorial because the title has “food” word :p

I found the tutorial interesting. It tells about the new interaction function in Adobe XD: the auto-animate, the drag function, and voice command. In this prototype I made, I only made the build the burger part (did not make the voice command part) because of the time limitation at the time.

The Burger App

Here are the screens I made:

Credits:

  1. Burger vector: https://www.freepik.com/free-vector/hamburguer-ingredients-design_1029754.htm
  2. Icons: flaticon.com

Here’s the video of the prototype

Trial & Error

While working on this design, I faced some problems which now has been solved haha (otherwise, I won’t make this post). Here are some problems I faced, hopefully, it would help anyone that needs it

Q: Why can’t I drag and drop my Ai file to XD?

A: It because the drag function can only be done in Mac while I’m using Windows. Unfortunately, I cannot import Ai file (I don’t know why). I could make it works by converting the file into SVG and drag to Adobe XD windows.

Source: https://theblog.adobe.com/faster-together-opening-illustrator-files-in-adobe-xd

Q: Why the Auto-animate does not work?

The burger supposed to expand when I clicked “Build It” button, but it did not expand (only usual page transition)

A: It happened because I used different names for the burger object in screen 1 and 2. After I edited the object/group name, the auto-animate worked.

Q: Why can’t I drag the cucumber to the right? Why it’s only provide drag left?

A: It’s because I deleted the “cucumber” object in screen 3. I did not set the final position for the draggable object. Apparently, due to that the Adobe XD could not decide which direction the drag should be. Don’t delete it, do this instead:

  1. Group all the burger ingredients, maybe name it to “burger” group. So that the draggable element or “the cucumber” is still part of the screen, not the pasteboard.
  2. Move “the cucumber” to the outside right of the screen (make sure it’s still in “burger” group)

If you want to try..

Below is the link of my Adobe XD file:

For shared – Google Drive

No Description

I do not own the idea, the vector, and icons (I mentioned where you could download them above)

If you have any question, feel free to write in comment section, thanks 🙂

Continue Reading

Foodies – App to Order Food

Hi everyone, this time I want to show my design for #AdobeXDUIKit contest on twitter. The contest was to design a food order app using Restaurant icons from Ana Miminoshvili . This is my first adobe XD contest haha. I did this contest to give myself a design challenge. I know there’re still things to be improved from my design. However for now, I just want to post this 😀

 

This is a clickable prototype of 2 screens. Feel free to try and give some comment 🙂

 

Continue Reading

Cognitive Designer – Don Norman

I want to write about UX and this is just baby steps. I hope I can get better in writing. For now, it just several points about the video I watched yesterday. It’s nice and concise 🙂

 

 

Several points from this video:

  • Cognitive designer is a new kind of designer that includes all the other kind designers.
  • We’re trying to make tech work well with people. We take what we understand about the human being, human cognition, and apply that to making tech, services, systems better for people.
  • Applying cognition for the benefits of people. A bridge between tech, people, and human capabilities.
Continue Reading

Eavesdropping (or Overheard?) In Public Places…

As an introvert, I don’t like being in crowded places, not because sometimes I’m alone in those places (Yes, I enjoy wandering around by myself, it’s actually fun, tho LOL). Crowded places just overwhelmed for me haha.

But there are times when I cannot just stay at home or kostan, that’s when I have to face the crowd. In order to “have fun” in the crowded places, I think of it as a lab, I observe people. And eavesdropping is part of it. I don’t mean to eavesdrop, but some people are just talk so loud that I overheard what they say :)) First, I overheard, then if the conversation is interesting (there are some overheard conversations that i decided to not continue listening to, haha), I continue listen to it (is it called eavesdropping?) *smirk* 

Is it my fault that i overheard what they say? They talk so loud in a public place after all 😂
And what i do next? I analyze the observation result :)) I think about their personalities, age, behavior, background, what makes them do what they do, what make their personalities :)) This thinking process make my experience in crowded places enjoyable haha weird, I know. And very UX (?) or like an investigator who spy on people? (Yeah, i watch many films and series in this genre such as NCIS, The Catch haha)

It’s a random post i write while waiting for movie. How about you readers, do you have similar experiences? What do you do when you overheard people next to you?

Continue Reading

Affective Forecasting

Affective forecasting

is the process of predicting how future events will influence emotional well-being. People often use affective forecasting when making decisions. For example, people make choices about who to marry, where to live, and what to buy based on their affective forecasts about what will bring happiness. Unfortunately, affective forecasting is prone to error, which can lead to decisional regret (e.g., divorce, buyer’s remorse, etc.). Thus, psychology and behavioral economics research has focused on understanding and improving affective forecasting in order to help people make decisions more effectively.

Source: www.affectiveforecasting.com

Also known as hedonic forecasting or hedonic forecasting mechanism.

Continue Reading

Adobe Experience Design (XD) Finally Arrived for Windows

Yes, as you have read on the title, Adobe XD finally arrived for windows device 🎉🎉🎉 I was browsing this morning when I stumbled on something about this awaited software (which actually has arrived 2 days ago *cmiiw). 

Finally arrived!!

Wait no more (fortunately I have finished my task), I went to Adobe XD page and downloaded it right away and did my first trial. Well, the installation process was quite fast and the app is light in my laptop. The software interface is so simple, which is nice since the canvas will be filled with many elements of app design. At first, I was a bit confused about how to use it, but thanks to YouTube, I could learn how to use it quickly.
Here’s the YouTube video which helped me to use it~

Adobe Experience Design: Interactive Wireframing

Though all the hoopla around XD has involved finsished designs, let’s not forget XD can be a great tool for creating interactive wireframes and Rapid Prototyping.


Thank you~

I was excited and so happy, I made my first wireframe with this app and also try the interactive prototype 😆😆😆

My first wireframe with Adobe XD

Yaaay!!! Can’t wait to explore this app 😆😆😆

Continue Reading

Why Storytelling?

As a person who works in UX field, I know that storytelling is important. However, I did not really understand why they said storytelling is important until I found this article in HBR (https://hbr.org/2003/06/storytelling-that-moves-people)

A big part of a CEO’s job is to motivate people to reach certain goals. To do that, he or she must engage their emotions, and the key to their hearts is story. There are two ways to persuade people. The first is by using conventional rhetoric, which is what most executives are trained in. It’s an intellectual process, and in the business world it usually consists of a PowerPoint slide presentation in which you say, “Here is our company’s biggest challenge, and here is what we need to do to prosper.” And you build your case by giving statistics and facts and quotes from authorities. But there are two problems with rhetoric. First, the people you’re talking to have their own set of authorities, statistics, and experiences. While you’re trying to persuade them, they are arguing with you in their heads. Second, if you do succeed in persuading them, you’ve done so only on an intellectual basis. That’s not good enough, because people are not inspired to act by reason alone.

The other way to persuade people—and ultimately a much more powerful way—is by uniting an idea with an emotion. The best way to do that is by telling a compelling story. In a story, you not only weave a lot of information into the telling but you also arouse your listener’s emotions and energy. Persuading with a story is hard. Any intelligent person can sit down and make lists. It takes rationality but little creativity to design an argument using conventional rhetoric. But it demands vivid insight and storytelling skill to present an idea that packs enough emotional power to be memorable. If you can harness imagination and the principles of a well-told story, then you get people rising to their feet amid thunderous applause instead of yawning and ignoring you.

So What is a story?

Essentially, a story expresses how and why life changes. It begins with a situation in which life is relatively in balance: You come to work day after day, week after week, and everything’s fine. You expect it will go on that way. But then there’s an event—in screenwriting, we call it the “inciting incident”—that throws life out of balance. You get a new job, or the boss dies of a heart attack, or a big customer threatens to leave. The story goes on to describe how, in an effort to restore balance, the protagonist’s subjective expectations crash into an uncooperative objective reality. A good storyteller describes what it’s like to deal with these opposing forces, calling on the protagonist to dig deeper, work with scarce resources, make difficult decisions, take action despite risks, and ultimately discover the truth. All great storytellers since the dawn of time—from the ancient Greeks through Shakespeare and up to the present day—have dealt with this fundamental conflict between subjective expectation and cruel reality.

Continue Reading