Eater App Experience
Eater App Experience
A redesign focused in bringing this culinary news platform to IOS.
How it began
Eater.com is one of my most frequented online publications today. I love their consistent reporting on the latest in restaurant trends, and whenever I visit new cities, I keep tabs on food trends and restaurants they report on. As apart of a redesign project, I decided to give some thought to a custom foodie experience that could be achieved by bringing Eater.com to an app experience.
Eater.com has several types of content. Editorial stories, reviews, video, heat maps, city guides, all serve to inform on the latest in culinary news. There are also topic sections in the navigation. Features, cities, video, travel, pop culture, reviews, tech, policy, books. Each topic has stories related to the topic sections. The complex content would gain much more engagement as an app in my opinion, with more features that help users save and find the content they love.
Easy to navigate
Increase engagement, brand loyalty
- Must use all topic sections
- Also includes a video news feed
- Design must include Heatmaps and Lists
- Everything must be searchable, saveable.
- Must be easy to navigate, easy to engage with
Questions to answer:
Can AI help increase engagement in the app?
Do users know and understand the different types of content?
Can content be molded to user interests?
Is it easy to navigate?
Are users reading the content?
The current experience below is the current homepage of Eater.com. The content changes daily, each article fits into a modular component and is moved around the webpage depending on the 'feature' or 'topic' of importance. There are also banner ads placed throughout, and sponsored articles. The modular pieces for large feature content emphasize photography in their cards, but overlay a black shadow or white overlay ontop of the photography. This muddies the visual design in my opinion, and doesn't showcase the photography or article content clearly in the mobile view. In a sense, it's a pattern that is a little inconsistent with the list view (middle mobile screenshot) that keeps the photo content separate from the typography.
Also the mobile navigation is a little questionable, most of the navigation is hidden under more, a majority of the content is city based so that makes sense, but this makes the site's content a bit impersonal, how would the website it know what cities are frequented by whom? Sure it could recognize your location automatically, but what about users whom come to the website as foodie travelers? Recently, Eater.com also added London and Montreal as cities further complicating the importance of organizing by city. Eater.com has become global, and the personas no doubt more complex. Since Eater.com is a Vox Media owned publication in the USA, I'd assume the majority of readers are USA based. For this redesign, I thought it would be important to address this navigation as the foundation of the app.
For a homepage, I got to thinking about how I could increase engagement on article clicks by other methods than 'catchy headlines' or 'interesting thumbnails' that usually a visual designer would directly think of. Since new articles are published daily on Eater.com, I came up with the concept of an easily accessible trending section from the homepage for users to see what are the most popular articles of the day. My hypothesis is that this will get users to engage more, their thinking is that a top trending article will be a quality article, so therefore it will be interesting to click to view.
Afterwards, I focused on the screen views a user would see in the bottom navigation. I kept the bottom navigation in a similar order to the current look on Eater.com, my assumption is they have tested the most popular topics are what are listed first left to right. Instead of placing cities in the 1st most frequented tab, I have a curated homepage curated on an algorithm. If it senses a user's city interests, I think it should reflect in your homepage. If a user explores other cities, they have the option now in explore tab. The majority of the heavy lifting in organizing Eater's content is now in explore tab. Since Videos was placed 2nd in the navigation in the current website, I featured that in the 2nd most frequented tab. For the 3rd most frequented tab, I placed Reviews.
I think this could use iteration, but my hypothesis was it deserved it's place as 3rd most frequented tab because it's content was technically complex. Its reviews required different pattern structures compared to topic sections like features, travel, tech, policy, books. For all other topics, I placed them in explore tab as the 4th most frequented tab. And lastly, account in 5th most frequented tab where you can find saved articles, videos, and comments.
Using AI to power a curated feed
As for further personalizing an experience, I also began to think early about how a possible algorithm could help curate each user's homepage to show them more interesting topics depending on tags and previous behavior. I believe we can't completely replace the power of editors, but it's unrealistic to curate to each user by hand with a staff. It would require extensive testing, but I think this would greatly increase the engagement in the platform.
I also think it's realistic that user's behavior will change overtime as well, and the algorithm should decay the frequency of topics on the homepage too. This way, we are still serving fresh content curated by editors, but with a little assistance with an AI. The downside is that every user's homepage would be different, unless we placed certain articles for all users to view, which can be possible. It will also be very difficult to determine a balance between human and machine, and if the benefits will be worth the extra work to create this. I wouldn't want the experience to be insensitive to the user either, where just because you're from the Southern United States, doesn't mean you get an creepy amount of articles related to Southern Food.
The most difficult tab to design for was the explore section. I was stuck on 3 iterations, and could not logically favor one over the other. So I decided to mock up a few to test in high fidelity to see if a user would prefer one experience over the other.
I grabbed the person sitting next to me on an airline, asking if he wouldn't mind testing a potential app. It was quick, and I showed all three designs but was armed with questions I needed to answer. I wanted to know which versions were the most engaging, which one got the user diving into the content faster. My theory was the 2nd version would win out, simply because instead of taking the user to another mobile view for the topic, the results are already there to explore. What I didn't anticipate was the user thought it would be more interesting to see the buttons view in the first concept. His reasoning, was it gave the expectation of what the topic would be about before clicking. The other views did not set expectations for the content, therefore the 1st option was the best in this case, where the topics section had been split visually in buttons instead of my theory of the side-scrolling to view in the 2nd version, and the least favored was the last option, a list version.
Final Visual Design
I concentrated on keeping the typography and layouts consistent and clean. I also made use of similar visual treatments from Eater.com, but used the iconic red sparingly to not detract from the content. The visual design has the content as the hero, easily scannable and readable. In theory, each component card is templated with a limit on characters, space, with rules per each modular content similarly to Eater.com.
Heatmap content usually involves a list of places on a google maps rendered map. This interactive piece of content is unique to Eater.com, and easily translates to mobile IOS. These screens from left to right simulate the flow in the interaction. If a user clicks a number in the map, it will animate a card in with the rank, name, photo, location. If the user taps the card, the view expands to show the excerpt written by the author. This experience keeps the focus on one piece of information at a time, rather than showing everything at once (map, restaurant title, description, sharing options, visit the website and open in google maps buttons) through the entire experience.
Articles and reviews follow similar visual and interaction patterns. Each article and review will always have a save button in upper right following IOS 11 guidelines, and if a tab or topic section applies it will display in the center. Lastly for the top navigation bar, the user will always be able to return to their last viewed screen. All photos can be tapped to reveal a lightbox to view photos in detail, as a pattern this should be established throughout the website. A user can tap outside the pane of the lightbox to return to the article or review content.
Explore tab is filtered by topics, authors, cities, and tags. Under topics, those are broken out further into features, tech, policy, pop culture, international, and books. This is the main section of explore, and I've also added in a recommended side-scroller feed (based on algorithm) below the 6 topics before a user scrolls downwards to reveal curated topics to explore by editors (not algorithm). The difference is Explore is more curated by editors for a broad audience rather than like Home tab, where it is more for you the individual. Other filters like authors, cities, tags are also options for finding exactly the content the user is looking for.
To increase engagement, the account tab holds saved articles, videos, and your comments. Unlike the current Eater.com experience today, my hypothesis is by adding features like saving articles and videos, these will be more useful to users and in turn they will return to the app more often. If there's a great recipe in a review article, or a great video a user would like to reference later, it is much easier for a user to save it to their account than to search in the explore tab all over again for it.
Prototype coming soon!
Translating a complex amount of content to IOS 11 was harder than I expected, and simply mimicking the Eater.com mobile experience wasn't an option, as it would have provided a poorer experience in the IOS app. By focusing on bringing a unique curated news experience with a fresh design, I think I learned a lot more about engagement that I'll continue to take with me in future projects. I focused mostly on the interaction and visual design, but I think validating more of my assumptions with more users would make these solutions stronger. I also did not have any analytics or past learnings as an outsider looking in Eater.com, and if this were to be a real project that would be one of the first places I'd look for learnings for any project. I think in the end, this project unexpectedly became less of a simple redesign, more about thinking about the possibilities of future technologies being used in news and content tomorrow. Like the role of AI in news, or how to make anything feel personalized in an increasingly algorithm centric world! I also never really addressed advertising, which is essential for any editorial to keep afloat. I'd love to concentrate on that end as well, since I believe editorial news is constantly experimenting on how news content pulls in revenue.