Lemon app 🍋 Design Process
“Good design is as little design as possible” — Dieter Rams
Just a general PSA, this is a general design process which has some values that may or may not differ from the industry, enjoy.
The main reason I’m writing this is to document the design process taken to bring Lemon to market and provide an awareness that we do emphasise on design just as much as engineering and business.
User Experience
The key thing to note when designing a user experience that changes user behaviour is to study behaviours through observation, being very present with what users are doing is paramount. We observed how long it took customers to order, eat and pay.
The goal of any product is to figure out touch points of friction and where the magic moment lies.
Friction: Always figure out places where it’s causing user an annoyance or pain.
Why it’s important?: You’ll figure out the direction of your UI pretty easily.
Lemon’s friction: Decision making and distance.
Magic Moment: This is where your customers face lights up in surprise.
Why it’s important?: Capitalize on parts where customers are delighted and then double down on it.
Lemon’s Magic Moment: Ordering.
User Interface
There were plenty of UI iteration before this, like a lot. We tried grid, masonry and many more styles but we felt the 2x2 portrait way would be the de-facto design for the menu section.
Color Palette
Version 1 color palette: We replicate the color of an actual Lemon; hence, the yellow and green.
Yellow: PANTONE 109 C
Green: PANTONE 7487 U
Blue: PANTONE 2175 C
Black: PANTONE PROCESS BLACK C
Version 2 color palette: We removed yellow after feedback of Lemon perceived more of a health app than a mobile ordering app.
Changes made: Increased the contrast the both the green and blue but we reduce the contrast of the black to give a more ash black feel.
Green: PANTONE 2271 C
Blue: PANTONE 2132 C
Black: PANTONE XGC
Blue and Green are our main UI color, why?
- Differentiation
Most food apps goes with the red or orange hue but we decided to replace the yellow with blue and mix it with green and it worked. - Function first
Blue represent function and security while green represents ease of use and progression. - Unisex
A research did by Kissmetrics said that blue and green individually as colors are loved by both sex. - The Infatuation
They provided us inspiration to go down this color way.
Animation
Animation on app should be used sparingly on occasion where we want to convey deeper meaning of a feature. We realised a simple animation can invoke a feeling of achievement for the user, sometimes the small things pays.
Font
Lemon uses Apple’s native SF font however, we originally wanted to use Proxima Nova or Circular as our standard font but we decided to stick with SF.
Tools used
Prototyping
We use a lot of Principle to prototype and for video purpose. I occasionally use Framer when there are things I can’t do on Principle.
UI/UX
We use Sketch a lot! like a lot to do all our designs, icons and wallpapers. Photoshop is mainly used for gifs and mp4 conversions, while Illustrator is used for CMYK print materials.
Animation
Airbnb released Lottie an open source real time animation rendering for After Effects. I use After Effects to create animation which will be exported through Lottie as a json file.
Video
I use final cut pro to edit any videos that is needed from my iPhone.
Music
Music is important and it’s subjective. My co-founder dig the more classical genre guess it works better with the engineer’s mind? while I prefer EDM and pop. These are some of the music we jam to on Apple Music, have a go at it!
Dessert
There are many more processes that went into this but I believe we’re still far from our mission and the eventuality of our product design, heck even now we’re already changing parts of the UI/UX.
Our dream is to build a company that values great design not just engineering. Engineering is highly valued anywhere in the world but marrying design serves different aspect that engineering will never fill.
Self-sponsored ad
Lemon is an app on iOS that allows you to order anywhere without waiting in restaurants and cafes.
Great use case:
- When you are waiting for a waiter/waitress.
- When you are reading.
- When you are smoking/vaping/shishaing.
- When you are in a meeting but want to order without the awkwardness.
- When you do not want to be disturbed.
- When you are playing boardgames in a cafe.
Download here
P.S. I’m currently writing about Lemon’s Design Process. Do follow us on Facebook or Instagram to stay in the know.
Checkout http://lemonable.co for more information about Lemon
