In this project I redesigned the ordering food experience through a phone app. In the proces of creating this app, I went through 8 phases that guided me to what i have designed.
Interviewing the target audience
Before starting with the prototyping i had 7 phases infront of me to help understand the food ordering experience. First i had to gain empathy by interviewing my target audience. In my first interview i learned that my audience is often hungry and lazy. They eat freezer food once every 2 weeks, make food themselves every second day but it’s usually healthy foods like chicken & greens. They prefer door 2 door delivery and it’s usually when together with friends or drunk they order food.
After getting some ground understanding I went in to dig a little bit deeper from what i learned in my first interview. I learned that the audience would really like some more healthy options that isn’t extremely expensive. Even though my target audience is really interested in healthy food they also think desserts would be a cool edition for food ordering. The part of being lazy was also very prominent in this interview.
Here’s my notes from the interviews.
With the interviews done i went in to capture the main findings and afterwards define the problem. My audience needs is cheap healthy food, but they’re also very lazy.
So my audience needs a way to get cheap healthy food because they’re lazy and there’s not enough availability on the market.
Reframing the problem from what i learned during the interviews.
With a understanding of the problem i’m trying to solve i went on to start ideating some app ideas. After having doing some sketches i got some feedback based on what i had sketched.
Process of sketching
After getting the feedback i changed some small things and went with the first design
Final sketch idea
After being done with the last sketch I finnished my project in Adobe Xd.
On my final prototype i have some mistakes that i will have in mind the next time i design an app. I accidently did a hover effect which doesn’t make any sense on a phone app, I also forgot a checkout menu for entering card details and such. I also had plans to make a profile tab but sadly didn’t get it done in time.
Besides those mistakes i’m pretty confident and happy with the general look and design of my final protoype.
In this project we had to make a short story using Adobe Animate.
Storyboard
I decided to try something new which was making my storyboard in Photoshop instead of drawing it by hand. It ended up alright and definitely helped with the vision of what i was aiming for.
Adobe Animate Process
In the process of creating the animation it self i used 5 symbols to make everything work out. As a challenge to myself i choose to create everything inside Adobe Animate so i could learn from its available drawing tools. I also used a bunch of classic tweens to make the trees, car & wheels move.
As my moving art artwork i choose the album cover of The Velvet Underground & Nico’s Debut album “The Velvet Underground”. The album cover is a banana painted by the artist Andy Warhol in 1966. I’ve always had this exact album cover on my cornea as an interesting art piece. I was especially interested in choosing this album due the albums alternative cover which is a peeled banana i thought it could be cool to show what’s behind the iconic banan. I had this great idea to peel the original banana cover and then make the alternative album cover be eaten, then close it up again and repeat the whole process.
“The original album cover ↑““The alternative album cover ↑“
Preperation in Photoshop
I started out by isolating all my components for the animation in Photoshop.
I also made a story board to show the general idea and define the states the banana would go through
After isolating my components in photoshop and making a story board i decided to make a quick gif using my photoshop knowledge and the Timeline feature. I ended up with a pretty good result and made my idea very obvious.
Here’s a pic of my workspace in photoshop. I used the transform warp feature frame for frame.
Here’s the process of my animate project. For the peeling of the banana i used to asset warp tool and for the biting of the banana white circles for making it look like bite marks.
In my animation i’ve used stretching of the banana peel to make things a little interesting to look at. I did this by warping it the 2 isolated peels. i’ve also used the principle of appeal since I believe i’m not the only one who wonders what the inside of the banana looks like. I’ve also somewhat used the principle of anticipation in the way that the banana peel kinda slowly opens and closes between the biting actions.
For our introproject we drew the notes loving coffe and hating stress. With those 2 themes in mind we decided to make a brainstorm in our group on what we could create with that. Since we our theme basically went hand in hand we obviously had a lot of ideas.
Brainstorm
Our first idea
Topic – Stress & Coffee Title – Evil circle of overwhelming stress Focus Points – Coffee, Time, Notes, Stress
Frame 1: In medias res – loud alarm, start of the day (black screen) Frame 2: Arrival at the office, dark and still Almost no posting or work assignments Frame 3: The light comes on, ready for the working day Frame 4: Coffee is made – coffee in picture Enjoy it and the silence before the chaos starts Frame 5: Ready to start, almost completely neat and tidy To-Do Frame 6: The PC starts, notifications loud noises and pop-ups Perspective to the post and today’s tasks Deadlines! Frame 7: Working day, several posted The clock is in focus as time goes by less coffee Frame 8: Empty coffee pot Makes more coffee Frame 9: Focus on the clock, the day almost finished Almost no one posted back Frame 10: Piles of paper, posted – DEADLINE sound image: loud bang heavy
Our Second Idea
Morning routine: Car stress, driving towards campus Campus is crowded, no parking Goes to wrong building Change by class local Halter out making coffee in the hallway color and light spectrum is in class doing project
Our Third Idea
Coffee bar: See picture of latte art Employee loves to make coffee Then the store opens More and more customers are filling the store Lots of queuing making coffee, stressful Spills coffee, burns themself more depressed mood queue is endless finally finished
Our Fourth Idea
Coffee advertising: Atmosphere over nuances High brightening screen 3rd person working partner comes in with coffee color spectrum change more elated
Story board
After brainstorming taking a look at our ideas we decided to take the first idea. We believed it was the most plaussible project to finalize within the timeframe we got.
Before beginning taking pictures for our stop motion movie we thought it’d be a good idea to make a storyboard so we all understood what sequence of pictures we were about to take.
Recording The Production
When we all had our mindset in the same place we began setting up for the shoot. We found a nice quiet place on UCL where we could work undisturbed. Due having access to a nice DLSR camera we concluded we had to use it. We sat everything up on a table for it self so we didn’t have any shaking problems.
Speaking of shaking we were kind of scared that clicking a button on the DSLR every time would make a shaking result. We solved this by installing an app that could connect up with the DSLR and remotely take pictures for us.
With all of our pictures taken we agreed to do the editing in the in the evening together on discord. And of cause that’s what we did.
In our call i sat and edited everything together while everybody gave immediate feedback and came with sound effects that we could use.
In the whole process of editing we used Premiere pro.
As our target audience we choose 18-25 year olds. Our main plan was redesigning the interaction between people on dating apps.
With our minds in the right place we decided to find 2 people that fit our target audience and asked them both the same questions.
Questions Round 1 “Where do you live? What do you do in your sparetime? What are your preferences in gender? Have you tried dating before? > Which apps have you used? > How often do you use dating apps? > How do you interact with possible hookups on dating apps? > Why not? What would make you use a dating app What is important to have in a dating app What is something problematic with dating apps that you’ve experienced before?”
Our first person Peter is from Odense Centrum he has a lot of interests like sailing, gaming, football, basket, D&D and much more. He prefers dating females and have used apps like Tinder, Snapchat & Facebook to make new connections. He doesn’t use those apps anymore but used to for hookups. He would be interested in using a dating app again it it means a new easier way to find women or new social groups. When he interacted with women on the apps they usually were talking interests, finding common ground and possibly doing something together. Peter really liked the way you can see how you’re linked to your match kind of like the way Facebook shows you your mutual friends. Peter really dislikes the way people are able to not be themselves on most of the possible apps out there.
Our second person Bea is from Odense Vestby she enjoys being with her friends & boyfriend, training in fitness and playing tennis. She has tried dating apps before like Tinder and Happn to find hookups with men she usually did this on saturdays. They interacted by chatting, having some conversations and sometimes linked up face to face. She would be interested in using a dating app again if she was single. She liked using Tinder but never really had anything she disliked about the app.
Dig Deeper
After having spoken to Peter & Bea we got a better idea of what current dating apps were missing. But we needed to go a little deeper. So after listening to our 2 target audiences we formulated a 2nd round of questions from what we’ve heard.
Questions round 2 “How important is having friends with similar interests in activities just for you? Would like to see if the people you’re interested in have mutual friends? If you could make new friends on an app would you be interested? How would you feel about the picture on the profile would be smaller than fx. Tinder so there would be more focus on the bio/interests How would you feel about connecting all your media up in one app?”
Peter thinks it’s very important to have friends with mutual interests, he also thinks it would be nice if he could see if people he is interested in have any mutual friends. Peter is also open to make new friends and not just a possible partner. He doesn’t think appearance is top priority when it comes to making new friends or partners. Peter would be open to use his Address/phone book to find new friends, but he’s a little bit skeptical of connecting most social media.
Bea doesn’t mind making new friends with dissimilar interests. She also thinks it would be nice to see if possible friends or partners have mutual friends. All though she has a boyfriend right now she be interested in using an app where she could get new friends and possibly even new career acquaintances. She doesn’t really care for appearance when it comes to making a new friends. Bea is not interested in connecting her phonebook up but open to use her social medias.
Capture findings
Needs: A new way to connect with new people with the same interests as yourself
Insight: Profile picture isn’t as important as currently are on other dating apps, so it would be nice with more focus on interests and bio.
Define problem statement
Name: Peter Needs a way to: Connect with people who has the same interests as himself But: He would also like a way to make networking connections, so he can find people who are already done with the same major as himself so he can talk/ get help from them.
Name: Bea Needs a way to: Connect with people who has the same interests as herself Because: She already has a boyfriend, so has no need to find people to date.
Sketch at least 5 radical ways to meet your user’s needs
We then proceeded to create 3 quick wireframes each
Share your solutions and capture feedback
We then shared our wireframes to get some feedback from our audience.
Peter said : Use the best from all 3 and combine them in 1
Bea said : Use the emojis Description on the emojies The first profile setup
With that feedback in mind we decided to create a final Lo-Fi Wireframe
Reflect and generate a new solution
We hadn’t thought about messaging and profile settings and small ways to interact with the interface. So we added a messaging page where you can see your contacts and write to them, a profile page where you can change your own profile like the bio, picture and interests.
Hi-Fi wireframe
We also decided to make a style tile to make it would be easier for us to style the Hi-Fi Wireframe.
“The alternative album cover ↑“
“