Robert Lopez Studio

SKAPA - UX eCommerce Site WIP

This project is in pre-alpha phase. Please contact me to learn and see more. 

August 2017

UX/UI, PRODUCT STRATEGY, UX RESEARCH

For my UX Design II course, the project that I'm tasked is to create an e-commerce company and provide the following: sketches, research, prototype, mockups, personas, user-testing and analysis. I'll be sure to update this page once the website is complete. For now, enjoy the work in progress (WIP). If you would like to see the full Style Guide, click here or on the image above. As of now, here is what is completed thus far:

  • Formalized and conducted user testing sessions
  • Developed product and brand strategy
  • Produced both low fidelity prototypes as well as interaction specs.


Brand Colors

Mood Board

Typography


Wireframe

Let the Foundation Begin!


Store Listings


Product Listing


Add to Cart


Checkout Summary



Prototype - Low Fidelity - Checkout Process


Objective: To provide a GUI using branding guidelines, for the purpose of showing how the checkout process will look and feel.

Software: Axure RP 8, Assets imported from Adobe XD

Duration of Time: 3 hours

Export File Type: .RP, .JPG, .PDF, Webpage

Date of Creation: 08/21/17

Association: UX Design II Course via UC San Diego


Home Page (WIP)

Home Page has been updated to reflect call of actions: Start a Subscription or Purchase Items from our store.

Product Listing

Showcase how the product listing page will appear. It has come to my attention to add various products, various pricing and utilize the width-space up to the edge of the search bar.

Add to Basket

Add to Basket page - Still developing on what information is needed and how if descriptions are necessary. After testing, users indeed wanted more description on the contents that were being purchased and provide highlight details to ensure they are indeed making a good decision on the purchase.

Review Order

Review Order - At this point, we want to make the act of completing an order as simple as possible. For Payment method and billing address, to take place in an account page, instead of being listed here. The user has the option to make changes or select another form of payment or new address. The only suggestion to make changes was to add "back to shopping" button. This will allow the user to rethink and possible add another item (or more) until satisfied before completing an order.

Confirmation

Confirmation Page - The confirmation page thanks the user for the order and provides a reference number (date of order and order count). A button is added to allow the user to continue shopping and find new opportunities. It is important to remind the user of where the product is shipping to, payment method, delivery date, price, quantity and any additional information that will summarize the experience. Feedback for this page is still pending and will update again. 


Using Format