target banner

Target UI Pattern Library

Target being a big name in the retail sector I found that their website had too many inconsistencies with regards to the UI. I choose to make a pattern library for target collecting the existing information, normalizing any inconsistencies and making suggestions for future implementations to enhance the user experience.

target new ui pattern

The buttons have been normalized considering the brand colors the typefaces used and the iconography used on the website. The buttons are divided as the call-to-action buttons which have rounded corners that the website originally uses and other buttons which are rectangular.

target new login ui pattern

Login form has been updated to the using best UI practices to make the user experience better and making it look easy with little visual clutter. The form fields us helper text to inform the user what is expected to be entered into fields to avoid erroneous entries. The helper text uses language which is friendly so the users can resonate to it. Hence, building a trust factor.The payment process needs to be normalized. The input fields, labels need to have a proper structure for better user experience using best practices in UX.


The introduction of the chat feature on the website is an immediate and personal way to helping customers out 24x7 with any concern which they might have with regards to not only package delivery, exchange and returns but also personalizing the experience. For example, if the user was looking to buy a gift for a 3 yr old the chat assistant could help suggest you products which would be appropriate to your needs and information provided. It can also assist with things like forgot password and payment related questions.

target new features


The home page could also feature videos which could be how-to, or a DIY tutorial for a new product demonstration, video recipe, new look, makeup tips etc. This UI design pattern is called an Article list. Having social media presence is great but the user needs to know how they would they gain from following Target across various social mediums. Providing a social feed for allows the users to have a sneak peak at their activity directly from the homepage without having to go to the respective social media platform. The user can then decide if the content interests them and if they want to like follow and perform similar activities. As for the target itself, it can be a good way for story telling if and when people hashtag about Target on twitter, Instagram etc.

target new features


The page can be customized to the kind of user browsing the website if the user is all about coupons and discounts the user can toggle between "feature story" and "show offers" view. The view with hidden offers would then consists of more informational stories to build a better customer relation by selling products through stories, expert advice, articles etc, suggested in the story feature previously.

target new features


The website can offer a product comparison UI Design pattern for making decisions about which camera here, in this case, easy. It might not be used by every user but come very handy when a customer is torn between different devices or has price concerns and wants to compare the features of the more expensive to the affordable one. This can not only be applied to electronics but to a variety of product categories across the website. As for food items, there could be a comparison based on their nutrition value.

target new features


target new features

UI Pattern Library Documentation

You can download or view the entire documentation here for target.