sneakernews app

I ADMIT IT

I’m a sneakerhead. Okay maybe a little more than a sneakerhead, but what’s wrong with that? I love shoes.

I’m not ashamed to admit that I visit sneakernews.com every single day of my life—multiple times a day. I love keeping up with the sneaker scene, what’s happening, what shoes are releasing, and what trends are currently dominating the market (I’m looking at you Y2K runners).

THE PROBLEM

This project was born from a Cristian-specific need: a sneakernews app. Since I visit this website daily, I thought surely there was an app I could download that would allow me browse the site’s content in an optimized way. Nope. And that’s when I set out to make mockups of what the sneakernews app could look like.

I used Sketch to make these mockups. The copy used was captured from the website at the time.


LANDING PAGE


ARTICLE PAGE

STRATEGY

My main goal was to capture the atmosphere and feel of the site. I used the same assets that were used on the site, as well as the same color palette and font family. Where needed, I took creative liberty.

My thinking behind the landing page was that it should capture the most-viewed article in the past 24 hours. At the time, Travis Scott was making waves in the hip-hop scene, so any news about his upcoming shoe, the Air Jordan 6 “Travis Scott”, was blowing up. Below the most-viewed section, I thought to add other popular stories as well. “POPULAR STORIES” would scroll from left to right on the screen to add visual flare and draw attention. This section would include two articles that were popular in the past 24 hours. I also added the “fire meter” (basically a user’s rating of the shoe), how long ago the article was posted, and how many comments the article had received so far.

The “LATEST STORIES” section would serve as the title implies—an area that showcases the latest articles that have been published to the site. This section would have articles in list format, which would include the category of the article, the title of the article, a relevant graphic, how long ago the article was published, and the author of the article.

The header and footer are assets that would stay statically placed even when scrolling so the user has easy access to navigational elements.


MISC. PAGES

This is what an article would look like once a user has tapped an article.

Starting at the header, there’s a back button for easy backtracking, the article’s category title, and a hamburger menu for quick navigation. When tapped, the category title would take the user to a page that houses all other articles with the same category tag. The header would stay statically placed.

Moving down, the article’s title, subheading, author’s name, and chosen graphic are centered. I then put the fire meter under the image so that a user can easily vote on how they’re liking the sneaker. I use a line separator to divide the title section from the body section. Below the body is the technical information section which houses style codes, prices, release dates, and more pictures of the sneaker. The user can swipe left and right on the graphic carousel to check out more images of the shoes.

To the left is an example category landing page, which gives the user community rating information, a relevant graphic, and a description that fades out but can revealed if “SHOW MORE” is tapped. I’ve also included links that take the user to where they can purchase a product, then listed all articles that are tagged as the category. The list is meant to be scrolled until all of the category’s articles have been displayed.

To the right is an author’s landing page, which houses a picture of the author and a complete list of articles they’ve written. The list is meant to be scrolled until all of the author’s articles have been displayed.


END

This project was a ton of fun to work on. I actually applied to be a designer/copywriter for sneakernews, submitting this as part of my portfolio, but I never heard back from them. That’s unfortunate, but I hope they enjoyed the mockup of what their website could look like as an app!