ux/ui design.

modern redesign for the Playstation website to create a seamless shopping experience.

role.
duration.
tools.
UX/UI Designer
4 - 5 months
Figma_ Adobe Illustrator
01 / 24
overview.

The Playstation website provides users with various experiences to explore numerous games and services provided by Playstation. This redesign of the website through mobile and desktop applications will enhance the experience by creating an easier flow users can follow as well as become engaged visually with updated graphics and visual indicators.

challenge.

The current website has two sections that separates the content and creates unnecessary detours. The flow is too tedious for users, and the Playstation website redirects users to a completely different sub-website for shopping.

The goal is to make the task flow as smooth and simple as possible, as well as create a visually modern and sleek UI that will encourage new and visiting users to engage with the website.

02 / 24
task flow.
03 / 24
mobile wireframe.
04 / 24
desktop wireframe.
05 / 24
landing page.

Landing page contains content that ranges from news to new products and even the latest deals from Playstation. Scrolling down the page will keep users engaged and interested.

The hamburger menu icon on the top left will open for easy navigation. Users can access their Playstation accounts or choose to browse a specific category.

06 / 24
07 / 24
search for a product.

Tapping on the Search Icon and typing in a product search will prompt a dropdown menu of suggestions to appear. If the product the user is looking for is not present, they can look at all the search results.

To narrow down the search, the filter can be applied to find a specific product. After applying the filter the results will reorganize to make the search easier. Results after a filter is applied will show the desired products in whatever category is needed.

08 / 24
09 / 24
checkout.

After selecting a product, the user is taken to the Product Detail Page where they can add the product to their favorites, rate the product, or add it to their carts.

Adding an item to the cart will prompt a checkout card to appear. This is a quick way users can go checkout immediately after finding a product or view their cart.

10 / 24
11 / 24
product detail page.

Users can see details about the game such as screenshots and even a description. The PDP has drop down menus for Description, Reviews, and Add-Ons to make the PDP less congested.


Reviews can be seen according to username, date it was posted, the review itself, and the number of likes and dislikes in terms of helpfulness. Add-Ons show additional content that can be purchased with the product as well as price.

12 / 24
13 / 24
desktop website.

The flow of the desktop mirrors the mobile version. The desktop version displays the content differently to adjust for the screen size. The search, profile, and cart icons can still be found at the top, while the nav has now been taken out of the hamburger menu and has been placed to the left of the hero image.

14 / 24
15 / 24
16 / 24
17 / 24
Aa
typeface_ roboto
medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
black
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
18 / 24
primary.
#0068D4
secondary.
#9DE5F1
tertiary.
#051543
cancel.
#CC0000
black.
#000000
footer.
#353535
search.
#717171
caption.
#8C8C8C
divider.
#B5B5B5
19 / 24
icons and buttons.
20 / 24
cards.
21 / 24
components.
22 / 24
components.
23 / 24
mobile and desktop grids.
24 / 24
ux/ui design.

modern redesign for the Playstation website to create a seamless shopping experience.

role.
UX/UI Designer
duration.
4 - 5 Months
tools.
Figma_ Adobe Illustrator
overview.

The Playstation website provides users with various experiences to explore numerous games and services provided by Playstation. This redesign of the website through mobile and desktop applications will enhance the experience by creating an easier flow users can follow as well as become engaged visually with updated graphics and visual indicators.

challenge.

The current website has two sections that separates the content and creates unnecessary detours. The flow is too tedious for users, and the Playstation website redirects users to a completely different sub-website for shopping.

The goal is to make the task flow as smooth and simple as possible, as well as create a visually modern and sleek UI that will encourage new and visiting users to engage with the website.

task flow.
mobile wireframe.
desktop wireframe.
landing page.

Landing page contains content that ranges from news to new products and even the latest deals from Playstation. Scrolling down the page will keep users engaged and interested.

The hamburger menu icon on the top left will open for easy navigation. Users can access their Playstation accounts or choose to browse a specific category.

search for a product.

Tapping on the Search Icon and typing in a product search will prompt a dropdown menu of suggestions to appear. If the product the user is looking for is not present, they can look at all the search results.

To narrow down the search, the filter can be applied to find a specific product. After applying the filter the results will reorganize to make the search easier. Results after a filter is applied will show the desired products in whatever category is needed.

checkout.

After selecting a product, the user is taken to the Product Detail Page where they can add the product to their favorites, rate the product, or add it to their carts.

Adding an item to the cart will prompt a checkout card to appear. This is a quick way users can go checkout immediately after finding a product or view their cart.

product detail page.

Users can see details about the game such as screenshots and even a description. The PDP has drop down menus for Description, Reviews, and Add-Ons to make the PDP less congested.

Reviews can be seen according to username, date it was posted, the review itself, and the number of likes and dislikes in terms of helpfulness. Add-Ons show additional content that can be purchased with the product as well as price.

desktop website.

The flow of the desktop mirrors the mobile version. The desktop version displays the content differently to adjust for the screen size. The search, profile, and cart icons can still be found at the top, while the nav has now been taken out of the hamburger menu and has been placed to the left of the hero image.

Aa
typeface_ roboto
medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
black
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
primary.
#0068D4
secondary.
#9DE5F1
tertiary.
#051543
cancel.
#CC0000
black.
#000000
footer.
#353535
search.
#717171
caption.
#8C8C8C
divider.
#B5B5B5
icons and buttons.
cards.
components.
mobile and desktop grids.