Bonanza E-commerce App

Bonanza iOS app flow

This is an unsolicited iOS app design for bonanza.com for shoppers. I started this in January, but took a break from working on it when I realized it was “Freedom February”.

Starting With Sketches

While looking at the design and functionality of the Bonanza mobile and desktop site, I had some ideas, so I did some quick sketches and took some notes.

I also wrote some some additional thoughts I had, not just about the app, but some broader themes to revisit, like color.

Bonanza app sketch

A Few Different Home Concepts

I‘ve never used Sketch before for an actual project, so this was an interesting learning experience on many fronts. The art boards in Sketch helped a lot with layout the various screens and seeing them side by side.

The first version I tried had search above the tab bar so it is easier to reach (I miss 4" screens at least 2x a day).

First pass, but it didn't feel right.

But then I figured I would stick with a more familiar approach for search. So, I tried a side-swiping-category-sort thing. I decided it wasn’t as useful as the larger, more visual category images. It felt redundant, if I didn’t put something else below it besides more categories.

The sliding category tabs.

The Final App Screens

Here are the finalized versions of each screen for the Bonanza app.

Nothing crazy here. Basically the same as your first time login experience in a browser.
This is your home. Don’t be too good for your home. Great for promoting collections and popular categories.
The good ol’ slide out menu.
Just realized I have 2 different heart icons. Update coming in version 1.4.2.

As a user scrolls, the header and footer tuck away for a better browsing to show more results at a time. The search field, however, is persistent for quick access.

Scroll back up slightly to bring the header and footer back.

I made sure to use real data when design so I didn’t paint an inaccurate picture of what the app would look like.

A product page, including the the functionality and additional info you provide on your average listing.

A Clickable Prototype

Using the screens above, I made this interactive prototype quickly with Marvel App.