The TV Shop
Role: UX/UI Designer
Tools: Figma and Photoshop
This UI project was built as an e-commerce exercise. “The TV Shop” is a premiere website for purchasing televisions and electronics. I wanted to work through a design process for a website that feels familiar to many users, allowing them to navigate with ease using conventions we expect from a modern website.
The landing page consists of a hero image and a navbar with commonly used functions. A prominent search bar and account link for users to login is placed within the navbar. The cart button is placed in the right side header and is persistent on every screen to expedite the checkout process when a user is ready. A new arrivals, horizontally scrolling group, is placed below the hero image advertising new products to users. Additionally, this area can be dynamic for holiday sales or target products based on a user’s past purchases.
After a search I used an open layout to show the options for the user, giving priority to the image of the product, it’s name, and an add to cart button. Additionally, a multi- function group field is used for filtering options. Each section uses different components in regards to standards the user would expect. For example the Brand section uses checkboxes giving the user a dynamic way of filtering the searched list.
On the product page I formatted the layout to standard conventions of e-commerce sites. The image of the product on the left and the information on the right. Underneath the product’s name sits a tag to inform the user if the product is in stock as well as the price. An aggregate user review score, which doubles as a link to the review section, and a description of the product follow. I decided to use a drop down group for the features allowing the user to scan over the specifications without confusion, and the ability to collapse the list when not in use.
Conclusion: This project was an informative look at what goes into designing an e-commerce website. The challenge of incorporating the layouts and conventions that users expect was an enriching exercise that has broadened my skills and approach to website UX/UI design.