wireframe-new.gif

Raycon - Prototypes

I created the Raycon website in Adobe XD with high fidelity wireframes. My design includes four pages created within the constraints of Shopify and Raycon's updated information architecture. Given the clear fact that there are higher bounce rates for e-commerce sites outside of big platforms (Amazon, eBay, etc.), the primary function is to get and keep attention through browsing and payment. Flow is critical.

Prototype Link

Prototype Link

I provided an original prototype link below. Feel free to check it out:

Raycon Prototypes

Raycon Global Official website

All original designs by Jing Zhao

Information Architecture

Information Architecture

Content Hierarchy:

- Be consistent

- Keep it simple

- Keep depth and breadth in check

Navigation:

While planning navigation, I adhered strictly to the following:

- Prioritize consistency: Dropdown menu

- Avoid deep navigation: No more than 3 layers

- Design responsive compatibility (device agnostic)


UX-ALL-NEW.jpg
UX-02.jpg
  Content Hierarchy:   - Be consistent  - Keep it simple  - Keep depth and breadth in check   Navigation:   While planning navigation, I adhered strictly to the following:  - Prioritize consistency: Dropdown menu  - Avoid deep navigation: No more tha

Content Hierarchy:

- Be consistent

- Keep it simple

- Keep depth and breadth in check

Navigation:

While planning navigation, I adhered strictly to the following:

- Prioritize consistency: Dropdown menu

- Avoid deep navigation: No more than 3 layers

- Design responsive compatibility (device agnostic)

home-page.gif
dropdown.gif
product page.gif
UX-WEB-01.jpg
UX-WEB-02.jpg
UX-WEB-04.jpg
UX-WEB-05.jpg
wireframes-web.jpg
wireframes-mobile.jpg