Buy Sell Trade

Mobile App - UI Design

Tools & SkillsData Analysis | User Testing | Prototyping | Wire-framing | Pen and Paper | Adobe XD | Adobe Illustrator | Mock Ups — **Tools & Skills**
Data Analysis | User Testing | Prototyping | Wire-framing | Pen and Paper | Adobe XD | Adobe Illustrator | Mock Ups

Competitor Analysis
OfferUp uses a few different patterns in its app. The first one is Feedback. When you first open the app you are prompt to put in your zip code. Once this is done you hit save location and the app pulls up all products that are for sale within 30 miles of your location. This is also saved so every time you open the app it automatically goes to the product page within 30 miles of the zip code you entered. OfferUp also uses the pattern of Gathering Input. To purchase anything you have to sign up with a Name, Email Address, and Password.

Etsy uses a navigation pattern that is quickly seen as a grid of all available products. When we click on an image we expect to be brought to a page that offers more information on that product or image, which is what happens in this app. Etsy also uses a data analysis pattern when it keeps track of your past purchases and the products you have liked so the app can provide potential new products for you. You can also add your favorites into categories which provides even more data for the app to collect.

Wire-Frames
Low Fidelity

Objective
Buy Sell Trade aims to showcase products users want to get rid of with an easy-to-navigate app. Users can easily search and filter for products to find exactly what they need. When a user first enters the app they don’t need to sign in or create a profile. This was intentional because I want users to find a product they really want and then be forced to create an account to send a message to the owner for the project. Users that have a product they want to sell can easily add it by uploading an image, creating a title, description, and zip code location.

Wire Frames
Mid Fidelity

My mid fidelity wire frames were pretty close to the final results, but need a lot of tweaking to finalize them. This version included a bottom navigation that stretch the entire screen with icons that were too large for the screen. The final version I decided to go with a smaller flowing navigation so more of the screen is visible. The header logo was not needed, and was changed to a screen location name. The chat boxes were playing off of the rounded corners I have on the list view, but ended up making the conversion difficult to layout and flow.

Wire Frames
High Fidelity

Summary
The objective of this project was to showcase products users want to get rid of with an easy-to-navigate app. Users can easily search and filter for products to find exactly what they need. After this app was finished I feel that this objective was successfully completed. While creating the app I made the decision to not start with a log-in screen, instead, start with a zip code screen. This keeps the user interested in finding a product they want and then in turn will have to create a profile to set up a meeting to purchase the product.

If I were to create this app again, I would make various changes. This first change would be to change the three-column grid to a two-column. This would increase the size of each product image and make it easier for the user. I would also change the layout of the pricing and favorites on the grid page. The rectangle around the pricing right now changes sizing depending on the price, it takes away from the app and I want the product to be the focal point with the price being secondary.

These cosmetic changes would improve the app, but the bones of the app would remain the same. It's an easy-to-navigate app where users can find new or used products from local sellers.

Take a look at my other work.

Responsive E-Commerce Website - UI Design