Introducing Bikebox. An online bike shop, made simple. The purpose of this project was to showcase my ability to follow through with a specific set of guiding principles and requirements.

The top needs of my users included:
- Free, easy returns and customer support
- “Modern and Clean” UI with simple navigation and advanced filters
- Inventory accessible without an account
- Variety of payment options
Planning and Wireframes
Jobs and Tasks
Based on the following user tasks, I created a user flow diagram. This helped me decide what content would need to be displayed on each screen. I wanted my users to be able to:
- Browse for products in the store
- Add multiple products to a “cart” before checkout
- Check out and select delivery options
- Create an account
- View/edit account details
- View previous purchases
- Create returns
- “Advanced filtering options”
Low Fidelity
(Balsamiq)
Mid Fidelity
(Figma)
Prototype Testing
Using Figma, I created a quick prototype of my mid-fidelity wireframes. I asked users to follow through the process of using the "Bike Finder" to add a bike to the cart and go through the checkout process.
Here are a few highlights from the test feedback I received:
Feedback

“Not constructive, just thought it was interesting that the tab bar wasn’t accessible during the tool.”

“The 'anything else?' page is a bit confusing, I'm not sure what the purpose of the bike part buttons are.”

“I also didn't totally understand how the pills on the "anything else" page were supposed to interplay, though I liked the look/feel of them”

“Maybe I'd expect some sort of marker or feedback on the "box" when something is in it, so I know that adding the bike to the box worked before I go to checkout.”
Notes/Changes

I decided that having the “Finder” be fullscreen would be more focused and immersive. Added a “Cancel” button so that the user doesn’t need to go back through all screens to exit

The buttons were not meant to be active in this prototype as I hadn’t yet designed the filter selection overlays. That said, I designed the filter select overlay to complete this part of the app.

This will certainly be implemented in my next wireframes. It also seems as though using “box” in place of cart is confusing for users. I Changed “box” to “cart”.
Bike Finder User Flow

Again using Figma, I created a more in-depth protoype of the "Bike finder" section of the app. Here I utilized the Bikebox logo I created to indicate the user's progress through the task.
Final Screens and Mockups
↑Back to Top