Beast Mode App

Beast Mode App featured image

Bout That Action Boss

Marshawn Lynch is one of my all time favorite NFL players. Marshawn earned the name Beast Mode for his unstoppable force style of play. So after he retired from the Seattle Seahawks last season, Marshawn went and developed his own clothing brand called Beast Mode. Being such a prominent figure in football garnished Marshawn with a loyal fanbase, and it's proven to be a successful business venture. So with Marshawn hailing from ICE CITY, and myself reppin the Bay til I'm old and grey, I felt that it was my duty to take a stab at creating some mockups for what I think a Beast Mode e-commerce app would look like.

For the Beast Mode e-commerce app, I wanted to design something that felt unique to Marshawn’s brand. Big pictures, without words or prices, that will grab the attention of a user to click through and view more pictures of said product. I wanted to clothes to speak for themselves, not the prices.

Home Screen

I didn’t want to use a tab bar for this app, instead I wanted to try a variant of the hamburger navigation bar that’s been used ad nauseum, but with a unique twist. Joey Rabbitt wrote a great article on what he calls the Curtain Menu. The Curtain Menu acts as a replacement for the accordion style navigation that you see happen all the time with sidebar navigation menu’s. So instead of fumbling through an ongoing list within another list style of navigating, you instead click a category, and another navigation bar from the right side of the screen slides in, revealing the categories for that particular section. The benefit of this style of sidebar navigation is that you can acclimate your users to the icons on the left side of the screen with their names, and when they click on a category, the name of the category is hidden, but the icon is still visible. Therefore users can always tell where they are when navigating through the various sections of an app.

I used the Curtain Menu for the Beast Mode app, and with that, users are able to navigate the different sections of the app with ease. I wanted to use nice large images for the categories within a section so that users could easily tap them to go to that particular area of the app.

Sidebar Curtain Screen

When a user clicks on a category from the Curtain Menu, they’re taken to that particular categories screen. Here they can browse all the latest and greatest in Beast Mode fashion. Users can easily swipe to view the other categories within a section, and when they do see something of interest, they’re able to view that item in better detail. I like that there’s a healthy amount of negative spacing within the categories screens and item description. Having that extra space allows users to view each item more easily instead of trying to cram as many items as possible.

Category Screen

All in all, I like what I’ve come up with for a Beast Mode e-commerce app. It’s not complete, and it needs lots of refinements. I didn’t design for the five different states: Blank State, Loading State, Partial State, Error State, Ideal State, but I would have if this was going to be a real app. I would also like to really work on the search bar and search screen more, because I don’t like the idea of just having a search icon in the upper right hand corner of the navigation bar. When it comes to e-commerce apps, the search input should be prominently placed for users, because that’s what the majority of people look for instead of using the navigation bar to search for something. I think I’ll prototype this app in Flinto this time instead of Principle. Click on the images below for high resolution screens of the UI’s I made.

Login Home Search Sidebar Menu Sidebar Curtain Men's Sidebar Curtain About Hoodie Tees Item Description Quantity Size Cart Delete Item Order Confirmation