App Critique: Yelp

Yelp’s search result page (left) and restaurant information page (right).

The Target Audience

The target audience is college educated (65.8%), upper income (46.3%), between the ages of 18-54 with the 18-34 demographic and 35-54 demographic being pretty evenly split at 36.5% and 36.7% respectively for 2017 (https://www.yelp.com/factsheet). The interface was recently updated so it feels more cluttered than it used to. However, the users in the target audience are tech savvy and can likely navigate the interface fine. The app uses typical UI elements as explained below. 

Does the content, organization, and navigation make sense for a mobile or touch context?

Yes, the content, organization, and navigation makes sense for mobile. 79% of searches on Yelp were done through a mobile device and 65% of new reviews were written on a mobile device (https://www.yelp.com/factsheet).

Yelp is information heavy and includes both text and photographs. The challenge is displaying all the information in a way that is easy for users to find what they are looking for. Yelp employs many different types of content display and navigation including a top search bar with filters, horizontal sliding collection views embedded inside a table view - this is mostly used to display photos or filters for the search results,  as well as a bottom tab bar for navigation to different sections of the app itself such as nearby, search, profile, activity, etc.

I like, I wish, what if?

I like how Yelp orders reviews by displaying your friends’ reviews first in the list before other users. I am are more likely to trust my friends’ reviews, giving them more weight than reviews of people I don’t know. I also like the cute icons for sandwiches, American, burgers, etc. above the restaurant ads.

I wish Yelp went back to their old search result display where the list of queries shows up first and the ability to toggle to the map view is off in the corner, instead of their current update with the map and list both displayed on the initial search result screen. The map is on the top half of the screen and the list is below it. In most cases, I am searching in an area I am familiar with, and thus do not need the map (or I can look at the map location for a specific restaurant that interests me). I would rather just see the list since it shows a location’s distance (ex: .01 miles) from the user anyways.

What if Yelp hid some of its ancillary content in its UI through dropdown menus or other elements in order to streamline the app and make it feel less overwhelming.

Additional Thoughts

Yelp tries to do too many things at once. It started out as a simple search app for local businesses, but now you can order food off the app, view curated lists of businesses, make reservations, or even save a real-time place in line for a restaurant. There’s also a gamification aspect where users’ check-ins earn them badges. When there are too many features in an app, it can feel cluttered and that the main purpose of the app is diluted. I still use Yelp as my go-to search for restaurants, and I generally just use the search functionality and not the other features.

Countdown App

Disclosure: Some of the links below are affiliate links. This means, at no additional cost to you, I will earn a commission if you click through and make a purchase.

The Challenge

June is a travel addict and she can't wait to go to Hawaii this year. She wants to create a countdown to her vacation in 100 days to keep her motivated. June believes her vacation reminder will inspire her throughout her workday.

Create a mobile app that is simple, meaningful, and compelling for June while keeping in mind June's experience and story.

First Steps

I created some sketches of the mobile countdown app and then uploaded them to Marvel Pop. Thinking about what information is necessary to show on the screen, I decided on:

• the countdown

• the event info including the date, name, and location

• a background photo - so the experience feels more customized

I wanted the countdown displayed vertically to maximize the use of screen real estate and for the countdown to take front and center as the most important aspect of information on the screen.

Creating the Prototype

I found uploading the screens into Marvel to be fairly straightforward and similar to Invision. Hotspots are created on one screen that links to another screen with different screen transitions and triggers available such as click/tap, swipe, and hover.

One problem I did have was getting a longer screen to load with the bottom of the screen aligned with the bottom of the phone.

The keep scroll position function works when navigating from one long screen to another long screen but not from a short screen to a long screen.

When tapping on Event Name, the keyboard should pop up at the bottom and the rest of the content gets bumped up above the keyboard, so the text field will be just above the keyboard. This way the user does not have to scroll up or down to see what they're typing.

Ideally, when the user presses Enter to complete one text field, the cursor automatically moves to the next text field which is repositioned into place just above the keyboard.

As a workaround, I tried creating the keyboard and text field as a fixed footer, but this resulted in the countdown being cut off and partially displayed below the footer. I also tried a smaller screen with the top cut off to fit the phone size, but this obviously gets rid of the scrolling ability from the longer screen. 

Anyone have a good solution to this problem? If you do, please let me know! Leave a comment below.

Watch the video or

Just Chill Menu Design

I just finished my fall semester of graphic design classes and wanted to show the work I did for my Intro to Computer Graphics class. The assignment was to design a menu for a fictitious ice cream company called Just Chill.

Requirements

• Incorporate the shop name and ice cream into the logo.

• The brand needs to appeal to both millennials and children.

• The message and tone is modern, youthful, and feminine.

• The logo must fit into a square for easy posting on social media.

The Logo

I chose pastel colors and a cursive script to convey a feminine feel in meeting the requirements. The logo is made of simple geometric shapes, in the flat design style, brought together to make a more complex shape. This communicates a modern yet youthful aesthetic to appeal to both millennials and children. Ice cream, as well as the company name, is incorporated in the logo, which fits nicely into a square, as requested.

Brainstorming ideas for the logo incorporating the shop name and ice cream.

My pick for the logo.

Color palette and typography

The logo design

Creating the Menu

First I sketched out some ideas on paper, drawing from our tutorial design for inspiration. See the sample tutorial I completed.

Sketches for the menu design

I ended up taking elements from both thumbnail menus that I liked and putting them together for the final design.

I went with the bicycle picture for the background on the front of the menu since the logo already featured ice cream; I felt a photo that also featured ice cream would be too repetitive. The bicycle photo is also a nice pink color which matches the branding, a large portion of the top of the photo is also just the metal wall, so it was not too busy but still had some texture thus making it a good background. I added a white, partially transparent rectangle behind the logo to help increase contrast against the logo since two of the ice creams would have been pink on a pink background otherwise. 

The front menu page

I added the size, cup or cone, and flavor assets from Illustrator and used a marble background image. I added the cups of ice cream photo to the bottom of the third page, retouching that picture in Photoshop to change the color of the marble to better match the other marble background. I used the directional feather to help blend the two assets as well as make the flavor text more readable where it intersects with one of the ice cream cups.

Ordering options

For pages four and five, I added two photos and some text with the company headline. I decided to keep it simple here and not add more menu options like in the thumbnails since having too many options can sometimes feel overwhelming. I wanted the focus to be on the ice cream.

Images I edited in Photoshop that helped convey the brand.

Finally, for page six, I repeated the background photo, white transparency, text pattern from the front page to promote consistency but with a different photo and text.

Back page with the shop’s business information.

Note: I was having problems with the images and vectors showing up pixelated when I used the Publish Online feature in InDesign even though I adjusted the resolution and image quality settings. I found this article to be helpful in fixing the problem.

Setting up a custom subdomain with GitHub User Pages and Namecheap

I finally found a succinct guide to setting up a custom Namecheap subdomain with GitHub pages.

My objective was to redirect my GitHub user page ellatronic.github.io to my custom subdomain projects.ellatronic.com. This process was actually alot easier than the hours it took me to figure it out, mostly due to the new format of the Namecheap dashboard and the old format shown in other guides I referenced.

1. Log in to Namecheap, go to Dashboard > Domain List.

2. Then click Manage on the domain you want.

3. Click Advanced DNS, then under Host Records click Add New Record.

4. Enter the following:

   Type: CNAME Record
   Host: the subdomain name, for me this is projects
   Value: the GitHub pages URL, for me this is ellatronic.github.io. Namecheap will automatically add the last “.” if you forget it.
   TTL: Automatic

5. Press the green checkmark to save the record.

6. Next, go to the GitHub user page repo (username.github.io), for me it is ellatronic.github.io.

7. Add a CNAME file containing subdomain.domain.com, so mine is projects.ellatronic.com.

   Make sure CNAME is in all capitals.

   Do not put http:// before the subdomain.

Here's what the GitHub file looks like

Hackbright Front-End Web Development | Week 9 and 10

Week 9: Monday

• Debugging

  • HTML & CSS

    • Common bugs include incorrect nesting, forgotten or misspelled tags, incorrect use of float, clear, and positioning, CSS rules overriding in unexpected ways.

    • Use the developer tools to inspect your code and remove elements until the problem is found or it starts working. Adding borders and background to see sizes and nesting can help.

  • JavaScript

    • Common sources of bugs include when callbacks are not hooked up to the correct events or variables are not being set correctly.

    • Break up changes into small pieces and always make sure the code is runnable.

    • Use consistent formatting.

    • Try console.log or debugger to find the problem.

Wednesday

• Further Education

  • Always have something to work on.

    • Lots of small projects are better than one big project.

    • see: jenniferdewalt.com

      • 180 websites

  • Develop the habit of finishing projects/work.

    • It can be very easy to get excited and start something new, but power through to a complete a project to the point you can show other people.

  • Develop a plan with deadlines.

    • Help keep yourself on track.

    • You can't improve what you can't measure.

    • Don't get discouraged if you fall behind, instead think about how you can improve your process.

  • Contribute to open source.

    • Look at github.com/trending to find projects.

    • Delete old issues that are fixed or no longer apply.

    • openhatch.org is a non-profit that matches free software contributors with communities, tools, and education.

  • Strengthen your fundamentals

    • Object-oriented programming (OOP)

    • Algorithms

    • Data structures

  • Learn a backend language

    • Python - regarded as beginner friendly

    • Node.js - leverages JavaScript knowledge

    • Rails - still popular

  • Explore then specialize

    • UX research and design

    • Big Data

    • DevOps

    • AI

    • Mobile

  • Go to Meetups

    • Beer.js

    • Openlate

    • Protonight

    • Women Who Code

  • Don't work for free!

    • Your time is worth something!

    • You have a valuable skill.

    • Take small jobs slightly above your skill level.

    • Be transparent with clients that you are still learning.

Week 10:

• Demo day!

  • We presented our porfolios and our group projects.