Eatery 2.0 (Pt. 3) — Designing Easy to Scan Cells
Improving Home Feed Eatery Cells
The Problem
- The grid layout was hard to scan. Although users could see a lot of eateries at once, it was also a lot of information at one time.
- Cells needed to be updated to reflect information users look for most.
- Cells had repetitive information and constraints.
What cell format is the most scannable?
Users should be able to easily locate the information they need on a card, and then tap on the cell for more detail.
I first explored different cell layouts that would be easy to scan.
Option A — Displayed too many cards at once and felt overwhelming with only text.
Option B — Images are not what users really look at. However, having them on the top of each card helped separate information and prevented from seeming overwhelming. Users can also easily locate the information they need on the white card. I chose to go with this one.
Option C — Many people would look at the right half of the screen, as the images were not important. Because of this, it feels unbalanced.
Option D — Every eatery has its unique logo already. However, they vary greatly in fonts and sizes, making the cells look very inconsistent and chaotic with all the different graphics.
What information is most important?
I then needed to figure out what information was most important to users. our research showed that proximity and whether users had enough time to reach an eatery before it closed are the most important pieces of information people look at. Thus, I decided the cards would show
- the eatery name
- distance
- its opening / closing time
- accepted types of payments
Showing Opening Hours vs. Open / Closed
I was debating between
- just putting open / closed
- “closes at 00:00”
- “closing in __ min”
Because users mostly care about eateries that are open, eateries that are open will come up first. I also put sticky headers stating “open” and “closed” at the top of each list, eliminating the need for the green circles.
Do Users Need Minutes or the Actual Time?
If open, the card state “closes at oo:oo” so users can make a mental note of when it closes later in the dat
If an eatery is open and closing soon, then the card would display “closing in 00 min”. Students usually know how long it takes them to walk somewhere, and by displaying how many minutes are left before an eatery closed, they can quickly tell if they could make it or not.
Both options were chosen so users would not have to calculate minutes from the time or vice versa.
Can Color be used to quickly show when an Eatery is closing?
I also explored using colors to indicate whether an eatery was open, closed, or opening/closing soon, but found that it was too distracting and confusing.
How Should the Cells be ordered?
We were initially going to order the cells alphabetically. However, because convenience and opening times were most important to users when browsing, we chose to order the cells by proximity instead. Users can use the search bar or favorites if they are looking for a particular eatery.
Final home feed eatery cell design
- Turned the two column grid into a single column layout for easier scannability.
- Inclusion of distance so users can identify proximity
- Got rid of the green / gray circles indicating if an eatery was open or closed. Replaced instead with “open” and “closed” sticky headers.
