| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Karma - Jan | GoMkt - Ia | Food For All - Jan | Olio - Stacey | Crave - Stacey | Ritual - Ia | Starbucks - Mystie | Today Tix - Mystie/Ia | Groupon - Mystie/Jan/Stacey | ||||||||||||
2 | |||||||||||||||||||||
3 | Tone/brand voice | Friendly, trustworthy, social | Eco-friendly and simple | Trustworthy Logical Academic Sterile | Fun and friendly | exciting and motivational | Reliable and motivational | Optimistic, casual, and encouraging | Exciting and energetic | Lighthearted people centered fun quirky clean | |||||||||||
4 | |||||||||||||||||||||
5 | Target audience | Young Adults that like value British | Audience who cares about environment and are budget conscious | Young singles or couples | Young families/mothers who are tech savvy and have an interest in sustainability. | Budget conscious professional into food culture and eating out | Budget conscious audience who get who encentified with points and discounts | Men and woman ages 25-40 with larger incomes and professional careers | average age of audience is 32 | young adults making over $100,000 | |||||||||||
6 | |||||||||||||||||||||
7 | Brand Adjectives (3) | colorful, friendly, youthful | Easy, modern, impactful | economical common sense ecological | Inclusive, Resourceful, Caring, Ambitious | Trendy, fast-paced, adventurous | Trustworthy, rewarding, social | Hip, contemporary, Relaxing | Motivating, fast real-time, | Fun, Social, Clean'Fun | |||||||||||
8 | |||||||||||||||||||||
9 | |||||||||||||||||||||
10 | |||||||||||||||||||||
11 | |||||||||||||||||||||
12 | Takeaway | Motivational, Fast, energetic and easy, fun and casual, youthful, socialand community, reliableiliable and trustworthy | |||||||||||||||||||
13 | Section headers | ||||||||||||||||||||
14 | |||||||||||||||||||||
15 | Onboarding | wants loction first with a global map wants cc info up front--too early not letting me browse as no services in my location gives count of meals rescued on landsing page | The app doesn't really have proper onboarding screens. On the start page there is simpler explanation what the app is about and the next screen reminds you to enable the location access. | absolutely no text contrast in their form fields | Onboarding is quite long. Sign up -> location request -> notification request -> # of users near you -> tutorial starts -> select 3 things to give away -> tips -> give or take -> reminders -> 4 tool tips Onboarding screens | You can swipe right or left. No button. Onboarding is simple, total of 6 screens. Uses a nice microinteraction that makes a rather boring screen more interesting. Most of the verbiage makes sense, except the last screen. Unsure what the last screen means. A bite out of the plate micro interaction | onboarding consists with 8 pages of sign up screens, location access and verification screens, fairly boring , but you get option of skipping it | Starbucks onboarding offers a user to go straight into the app and join rewards program at convenience. | it has 8 onboarding pages including informative screens about app and sign up pages | Goupon + is a thin carosel tutorial within the app | |||||||||||
16 | Do they use app screen shots or animations or videos or illustrations or stock photos? | cute static illustrations | They are using photo of the food on the white background, also symbolic graphic of the location map with pins | micro interactions on landing screen currated food illustrations | They use a lot of emojis and big bold text. Some sections you have to tap a button to progress. Some sections you can swipe to progress. Not all sections you can move backwards. Takes you from one tutorial to another to another to another. Was confusing because I felt like I was going to home page but would take me to another tutorial. | They only use screen shots of the app. the last screen uses a stock photo cut-out of a plate. | photography | Use illustrated cards on carousel along with text heavy graphic cards in a listview. Use of professional product photos (mostly marcro) against a dark green background. | photography and graphical icons are used | Inhouse curated stock photos | |||||||||||
17 | Takeaway | It's good to allow users to skip onboarding, tutorials that are fun, order of intro screens and sign up screens vary, Customized illustration and animations were eye catching and focal point for each screen | |||||||||||||||||||
18 | Color Usage |  |  |  |  |  |  |  |  |  | |||||||||||
19 | |||||||||||||||||||||
20 | Illustrations/Graphics |  | none |  | little to no illustrations. They use a lot of emojis on the onboarding. They have this one reoccuring illustration of a carrot character that's cute. | No illustrations are used. | Using simple graphics and different cons | More hand-drawn illustration with stipling textures and retro/vintage (ie hipster) feel. Modern use of colorful vector graphics on gift card illustrations - more flat color, but also the slight use of shading and stipling for adding noise depth | Illustrations and graphics are used heavily in show posters and adds, also simple graphic icons for navigation buttons | Fun Graphics for categories that give a pop of color Fun categories to get you to pick more categories | |||||||||||
21 | |||||||||||||||||||||
22 | Takeaways | Primary Pallette: Vivid green, Red and White . Secondary: greys | |||||||||||||||||||
23 | Photography |  | The app uses inhouse library photography | text over photography close-ups of food in house photography for food vendors for a consisstent look | All images are user-generated. People upload what they have to donate. There was one really stocky image used on the onboarding. | All restaurant images look professionally taken. No images of people. All focused on the food. | High quality stock photos or in-house library photography is used | Most photography is professional macro product shots with a negative space dark green background. | Most photography is professional show adds | Lots of people photography full screen width to engage use Focuses on zoomed in shots | |||||||||||
24 | |||||||||||||||||||||
25 | Takeaways | Close-up high quaility, food photography, professional product, super close-up people shots. Some were duotone with people for brand imagry | |||||||||||||||||||
26 | Microinteractions | not sure | none | landing page graphic moves map location points fall down at different times | Tool tips activate when you're a first time user. Windows pop up highlighting certain tools telling you how to use them. | Small microinteraction for tutorial. They use tool tips, but the tool tips are unclear - they don't clearly point to what function they're talking about. They just gray out the whole screen and show the tool tip in the general area. When tapping on a restaurant, the deal slides up last with some force. Makes you read the deal (which is in all read text) first. loading state is a loading wheel that turns into the logo. | System triggered mickrointeraction on redeem page showing balance when you get more points, also animation on photos of the restaurantes that shows closed ones. | Card swipe carosel "tutorial" changes text as user horizontal scrolls.Parrallax scrolling for product image screens. Gift cards resize smoothly into the upper left-hand corner to make room for the form fields/purchase. Map screen uses a kind of bottom sheet overlay to filter nearby stores similar to Google Maps/Facebook Local (FB Events) | simple animations on each screen of tutorial. | Micro Interactions on the notification page with a swipe down from the top. It shows presents which turn into their logo and confetti when you let go. | |||||||||||
27 | |||||||||||||||||||||
28 | Takeaways | Pull to refresh used in Groupon is fun. (similar to snapchat. Crave had a great micro interaction in onboarding. Ritual had a micro rewards animation for progress. | |||||||||||||||||||
29 | Layout | Clean and organized drawers from sides and bottom Mostly map based | The information is displayed on vertically scrollable cards and grid cards | card based scroll | Primarily uses full size cards (full width) when showing previews (items and forum discussions). This view is primarily vertical scroll. For items that are almost gone, they show small cards (3.5 on screen) and scroll is horizontal. You're able to change your view to see smaller cards so it's more a list view. Cards are clearly defined by shadows. | Uses full-width cards. Most of the screen real estate is given to photos. Most of the app uses vertical scroll. When looking through photos in an individual restaurant, you side swipe. Uses tabs to | Information is displayed in various cards depending on page, it uses vertical and horizontal scrolling cards | Uses mostly lists and cards as well as bottom sheet overlay | full-width cards. clear disctinctions between cards with a slight shadow. vertical scroll for browsing tix. side swip for viewing pictures. clear distiction between cards (sections) on show view. Uses modals for to read full descriptions of shows. Discover page used image background with opaque cards. Categories are placed under hero image as smaller buttons. | Long scroll of offers integrating pictures and white text cards The white cards offer great use of white space to make the app usable | |||||||||||
30 | |||||||||||||||||||||
31 | What icons and tabs used for bottom nav | simple icons with text | Four bottom navigation icons =Map, Stores, Shop, Profile, Card | 4 icons on bottom nav: home/map/fre meals/orders | Bottom nav icons = food, non-food, (+) to add a post, forum, messages...includes icon and label | Only uses icon, not totally sure what each bottom nav icon means unless you tap into it. home (?), map, favorites, deals | in bottom navigation icons are labeled, they are pretty standard: home, search, rewards, my team, more | 5 tab labeled bottom sticky nav with grey inactive and green dotted to show active include: Home, Cards, Order, Gift, Stards | In the bottom navigation there are 5 labled tabs. red is indicating active and gray inactive . fallowing tabs: Al Show, Discover, My list, Me | ||||||||||||
32 | |||||||||||||||||||||
33 | Navigation | Top Nav: Words and search bar On Location Screen: Near/Selling?Following?New?Name Bottom Nav--simple icons Discover/Locations?Orders/Profile | top and bottom navigation | 3 tabs on top nav: All/Pickup Now/Favoritestop and bottom navigation bars are different colors Bottom is black with white icons hamberger menu on top left to open drawer with all other info | navigation is slightly confusing. There is a bottom nav and and a hamburger menu drawer. Some of the options in the hamburger menu drawer, I would want to see on the bottom nav like my impact. To get back to the bottom nav screens, you hit home on the hamburger menu, | most navigation is driven by bottom nav. There is the top slider/toggle on home page. when you tape the profile icon on top nav, a screen slides up with a few options - profile edit, terms of service, tutorial, contact, sign out. | simple top navigation and bottom navigation | 5 tab labeled bottom sticky nav with grey inactive and green dotted to show active | Main navigation is bottom nav. Secondary navigation on discover screen as categoire buttons | Top Bar: Green with search bar prominant.back arrow, hamberger and shopping cart. Secondary Top nav #1: Has 2 tabs: All Deals/For You Secondary top #2 with white button categories:category/brand/price/sortBy Third bar is a carosel of features Bottom Nav: Five Buttons: Featured/Search/Notifications/Saved/MyStuff | |||||||||||
34 | |||||||||||||||||||||
35 | Takeaways | Favorite layouts were easy and clean: Starbucks, Karma, Crave. Map screen that were good Food for All, Ritual, Karm and Starbucks We loved how horizontal carosel scrolls change locations on the map as a filter in real time. | |||||||||||||||||||
36 | UI Elements | Scrolling bottom sheets map cards Filter Icon butoons with graphics carousels with square icons toggle switches | Simple grey icons with labels for bottom navigation, also simple green icons, cards, tougle as filter | drawer on left side ofr filters menu Long scroll Drawer on left side for extra info cards filled with mostly pictures of food | Top nav has Filter to sort by distance, question mark icon that takes you to a FAQ webpage. Icons are simple but use pretty thick lines. | filter for map, search function with a clock icon where you can search deals based on times. There's a "live now" toggle. Not clear what that does. Lots of icon use - to help illustration info like business hours and address, icons tappable on restaurant page for menu, call us, find us, favorite. | simple iconography is used through the app, progress bar | Bottom action sheet over map for search/filters chips for filter selection radio list for further selection information icon floating action button "Join Now" "Order Here" ios system alerts to automate things like "add from contacts" top labeled underlined form fields with red color and exclaimation warning icon for errors | Search filters, ability to bookmark straight from show preview, tappable calendar to find tickets, dropdowns to reveal calendar to change dates once in ticket view. + and - buttons to increase tix # | Simple colorful icons for categaories bringing introducing a small amount of color | |||||||||||
37 | |||||||||||||||||||||
38 | CTAs | Playful, bright and Cheerful Pink with white text | Bright green CTA button at the bottom of the page | RED buttons with white text | CTAs are clear because buttons are big and they use the purple only for CTAs. Buttons go across the fill screen width. | CTAs and active state are all red | big blue CTA buttons are easily noticeable | Green FAB for "Join Now" and "Order Here" | Big red check out button is highly contrasted on white acreen | Big White Apple Pay CTA or Green button the width of the divice with white text Buy Button has a free shipping yellow corner | |||||||||||
39 | |||||||||||||||||||||
40 | Takeaways | Floating Action CTA dependeant on screen (Starbucks) | |||||||||||||||||||
41 | Typography | Avenir next rounded pro | Effra font family White text on photographs White text on black | Cerebri Sans (font family) - looks similar to helvetica neue. Very round and inviting. Tall x-height. sans serif. | Gordita, open sans (inconsistent use for body copy on website) type is sans serif. round and easy to read. tall x-height | Sofia pro bold used for headers, Sophia pro regular for body text, typography is clear and easy readable | Use Lato–sleek sans-serif type family with slighly rounded edges which uses classical proportions to add styel and elegance to the lettering | HK Grotesque–Sans Serif typeface inspired by classical grotesque designed for a friendly yet distiguished feel and legibility for small sizes such as moble app design; Also makes use of ITC Avante Gard Bold for H1 headliens which adds both an exciting and urban feel | Roboto | Open Sans – Humanist sans serif featuring wide aperatures and a large x-height. Humanist are often read as more friendly and approachable and a large x-hight with wide aperatures are often more easily read on small devices. | |||||||||||
42 | Roboto Ariel | White text on buttons | Discounts are shown in green with actual amount in large green text and percent discount in a light green block | ||||||||||||||||||
43 | Takeaways | Rounded San Serif Font Families to make it friendly, inviting, and large X heights for readable. ie:Opan Sans, Robato, Lato | |||||||||||||||||||
44 | Gamification/Incentivize | not seen | none | Points to collect to get free food progress circle the color green differentiates the game | There is a screen where they show you your individual impact. You start off with a newbie badge but I assume as you use the app more, you level up. | deals are incentive to use the app. no game or leveling up or collecting of points. | rewards system works by earning points that can be redeemed in the orders | Starbucks reward card earn "stars" towards a "reward" | Makes use of Rush and Lottery tickets for reduced price tickets to select shows. Uses social sharing to incentive and "unlock" rush and lottery options. Although one can unlock without sharing. | Groupon+ gives you cash back for purchases made woth it | |||||||||||
45 | |||||||||||||||||||||
46 | Takeaways | Today Tixs used social incentification. Milenials want to share. | |||||||||||||||||||
47 | Whitespace | Nice Use of Space | Plenty of white space | I think they can use more white space as the offerings run into each other | Lots of white space between cards. Leading is very open as well. | Inbetween cards there's ample white space. Lots of space around icons. Most amount of white space is around section that has the info about the deals. this section is simple with big colorful bold text | lots of white space used that makes it look clean and not lcosterd | Balanced use of whitespace for an uncluttered relaxing feel | There is much content so negative space is used to balance mostly in padding elements such as type in comparision with positioning to other type (subheads and body copy) as well as reference icons and hero images/graphics | Good use of white space with the copy cards dividing photographs.Only 2 full width photos shown at a time with white cards underneath with coppy | |||||||||||
48 | |||||||||||||||||||||
49 | Hierarchy | Shades of grey indicating heirarchy Color text to show navigation | Typography hierarchy using different scales of type | Not done well: only price stands out Red CTA button | They use bold and bigger type for headers, but the contrast isn't enough so it seems like everything is one style. | Uses bold darker text for headers and light shade of gray for body or secondary text. This app groups information well so it's easy to scan even tho they provide a lot of information | Typography hierarchy is well defined by using different weight and size fonts | Uses weight and Size to create intuitve headlines, subheads and body copy as well as underlined links and icons to show more. Does use some shade, but not as much as weight and size. | Larger headlines and price points uses scale and some shades of dark grey to enhance body copy legibility. Headlines are much larger than subheads and use a different typeface (ITC Avant Garde Bold) | Text hierarchy seems to make sense in terms of size and color in the way that heading are larger and darker. On the Featured screen, hierarchy could benefit from consistancy with size, and alignment to help differenciate the layout and further define sections. | |||||||||||
50 | |||||||||||||||||||||
51 | overall look and feel | simple and professional playful | easy and simple | Trying to be fun the long scroll makes the site seem lifeless | Olio has a very family-friendly feel. The big round text and emojis on the onboarding make it feel very playful and almost a little elementary. | the overall design is bold and exciting. there is a sense of urgency with the red text paired with the "real-time" deals. Feels very much like the NYC lifestyle - make the most of a night with a deal on-the-go. | Feels pretty accurate, trustworthy and useful, gives you enough information on deals. Looks easy | Matches their goal of feeling like a place to go between home and work. Very familar, easy, comfortable | Organized and Easy to Scan. Follows stardards of most event-finding apps. There is a lot of content, but it still feels oraganized and intuitive due to adhereance to mobile standsards. | People centered. Clean A bit busy Pictures fill wth of screen divided by white cards | |||||||||||
52 | |||||||||||||||||||||
53 | Takeaways | ||||||||||||||||||||
54 | |||||||||||||||||||||
55 | Strengths | Overal the look is clean, modern and colorful Fun Graphics brand gives an enjoyable vibe can share impact on landing screen food filter page is fun and colorful | Strength is in simplicity. The app feels very easy and quick to use. | Illustrations of food give it a friendly feel progress circle to show rewards Tutorial is clean, minimal and fun. It has a micro interaction that adds a little interest as one swipes from page to page UI element of hamberger menu with drawer works well to hide a list of information | Their impact screen is very clear and concise. It uses both graphs and stats but in a playful way to show a persons individual impact. They have a question mark icon that you can tap to view how they calculate some of the metrics which is very valuable. The only con of this is that it takes you out of the app to a webpage. | They strategically draw the eye to what's the most important using color, font size, and microinteractions. The app is easy to scan and the information for each restaurant is easy to understand. They do a good job of highlight what is really important to the user. | well developed rewards system makes the app more incentive, progress bar shown on the home screen motivates users to use the app to earn points and save more. Animation on photo of closed shops is fun make you smile when you discover it. The app is easy to understand and use. | Popular and loved by users, even edge cases of their target demographics.Thus strength is customer loyalty and retention. Established and credible. | 4.9 rating in app store. Strengths are in smooth and easy process/understanding due to familar and standard interface. | Humor in Copy Showing how much money saved per month and average neigbor savings is good incentivism. And they put text in red if there is a limited number or time left | |||||||||||
56 | |||||||||||||||||||||
57 | Opportunities | Onboarding is not successful when you are not near one of their locations Onboarding also does not include the tutorial screens which are found in the information section Pink might be a turn off to some users | lack of information of app concept and idea. Map is not working properly does not show actual map. shows only pinc and distance of users location and the target destination. | Needs to grey out price also when option is sold out Red CTA's Text contrast is horrible! Can't read it especially on the form fields Has a filter but doesnt filter food preferences--only distance Hides the friendly tutorial | They don't play up their impact screen. It's hidden on the hamburger menu. If this is supposed to be incentitive for people to track their stats, it should be front and forward. Right now this seems like an after thought. This idea should be intergrated better with the overall app. | Takes a little time to understand how the app works even with the tutorial and tool tips. Tool tips need to be clear what they're pointing to. | loading screen takes long time. lack of tutorial screens | They are pretty cutting edge and profeesional seemingly making best use of UX/UI principles. So nothing initial to note for opportunities for improvement at this time. | Loading processing for sign up took more time than expected. May have some oportuniites with a map screen for more current/intuitive of finding nearby events. Opportunities to refine seach and filter features. | The site could still benefit from some organization wiithin estabishing heirarchiy and ifrmation architecure. There is a lot going on and some of the content seems crowded. Incentives on how much one saves each month is nice but they are not visual | |||||||||||
58 | |||||||||||||||||||||
59 | Screenshots | ||||||||||||||||||||
60 | |||||||||||||||||||||
61 | Looks like "In and Out" | ||||||||||||||||||||
62 | |||||||||||||||||||||
63 | |||||||||||||||||||||
