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 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. I audited a few mobile webpages and found several usability and visual treatments that could be improved upon for the app.
Lower time spent on navigation
Refresh UI to be clear and consistant
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?
Below is the current mobile homepage experience on 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.
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 a usertester whom happened to be sitting next to me on an airline. It was quick, and I had my user click through all three designs. I wanted to know which versions were the most engaging, and which one got the user diving into the content faster. My theory was the 2nd version would perform better, 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.