top of page

Urban Canid Project Website Redesign

SheinRedesignHomePagePt1.png

Tools used:

​

  • Adobe Photoshop 

  • Adobe XD

  • Visual Studio

  • Pexels.com -- images

Project Overview

During my last semester at UW-Madison, Spring 2021, I took the class LSC 532: Web Design for the Sciences. One of our bigger assignments in this course was to redesign a website’s interface by taking into consideration usability and using user-centered designs to improve the website. 

 

To complete the assignment, we were to:

  • Choose a website based on your usage

  • Analyze the website and list out what we felt could be improved

  • Brainstorm design ideas

  • Create a prototype (of the homepage)

  • Code the design and create a “working” page using HTML and CSS​​​

Goals

The goals of the project were to:

​

  1. Go through the complete design process from start (usability problems identified) to finish (a working usable website homepage).

  2. Make the website user-centered and catered to a specific audience

  3. Content marketing: "the art and science of pulling your audience towards your business." -- From Content Chemistry by Andy Chrestodina

    • Creating, publishing, and promoting content relevant to audience through:​

      • SEO​

      • Social Media

      • Email marketing

Shein Website Interface Redesign

For this project, I decided to redesign the popular, trendy, and fashion-centered website, Shein.com.  

 

As a person who enjoys keeping up with the latest fashion trends, I always see Shein mentioned on my social media platforms and in all sorts of clothing hauls online. The e-commerce website has gained quite the hype in the past few years and seems to be a go-to website for clothing, shoes, and accessories for many. From my understanding, many turn to Shein because of the affordable yet up-to-date fashion pieces that it has to offer.

 

Through the exposure to Shein through social media, I found myself caving into my curiosity about what I could find there. However, through the many times I tried shopping on Shein, I was never able to walk away successful in making a purchase. My realization about why I couldn’t buy anything was: the website’s layout– its organization & visuals and navigation.

 

Organization & Visuals. Shein has a huge variety of clothing; any style of clothing you are trying to wear, they probably have items for that style. The website could be a one-stop-shop, but the problem also lies in how there is so much stuff on the website. With so many items to offer, I felt that the organization had to be better for shoppers to find what they were looking for. Otherwise, they’d be like me: leaving the website shortly after arriving.

 

Some things that I noted about the organization were that the labels were repetitive. This was a problem because most of the time while looking through the categories, the same ones are being presented over and over again, leading the user to the same pages or pages that are too similar to each other; it felt confusing and like I was going around in circles on the website.

 

While looking on the home page, I also noticed that there were so many deals/information presented on the home screen right away. Of course, as a shopper, I want to know these deals, but seeing all of them at once flashing on the homepage was overwhelming. In the end, the screen seemed cluttered and there wasn’t a clear focus on what the website wanted the user (or me) to see.

 

For the visuals, Shein changes their theme every season or so depending on the occasion. This is quite nice for the regular users who land on their page and even the new users. The issue with the themes at times, however, is that these themes can be a bit flashy and extra colorful. Presented with the different deals and sales they have going on, the themes can take away from the main information they want their users to see. 

 

Navigation. Again, with so many things to offer, I felt that Shein could benefit from better navigation. Shein included a drop-down menu for each of the many repetitive labels they had. Once everything was on the screen, once again, it was hard to focus on anything and therefore hard to find items to shop for.


 

Through my analysis of the website, I did notice that the app of the site was much easier to go through. It could be that the desktop version of Shein didn’t work as well because it is mainly for mobile devices. However, if a desktop version of the site exists, it should still be working in tip-top shape.

 

--------------------

Note. I analyzed and created this project in early 2021. The website may have been updated since then and may no longer have the same issues I found when I did this project. Thank you!

--------------------

Brainstorming

According to the “About Us” section on Shein.com, the company wants to make fashion accessible to everyone. It sells to over 150 countries in the world and provides a variety of clothing for different styles, occasions, etc. They believe that clothes are a representation of who we are; they allow us to express ourselves and our personalities.

 

While thinking about new designs for this site, I tried to remember the information above; I felt that it was important to remember the values of the company I was going to redesign a website for to make the best decisions. 

 

As I stated earlier, Shein’s layout, in particular, the Organization & Visuals and Navigation, were the most identifiable usability issues for me; they were the main things that I focused on when recreating the interface of Shein.

 

In my recreation, I decided that I would try to stick to a particular main color as a theme; I chose green. During the time that I created this, green was a likable color, and it matched the picture that I found on the free stock photos website, Pexels.com. With green being the main color, I also felt that it would be appropriate to add black and white; so the main colors would be: green, black, and white– a simple palette that wouldn’t take away from the main information. I also felt that red, an attention-grabbing color, could be used to help draw the user to click/check out certain things. However, I wanted to treat the color as an accent to the website– a color that would catch the user’s attention, but not become a part of the theme.

​

To prevent all the clutter, I chose the main information (such as the deals that are happening right now) and presented it in the main image. All of the extra information that usually stays constant (such as shipping information or coupons that the site has for first-time shoppers) are shown on a bar at the top of the screen and can be scrolled through using the arrows.

 

To improve the navigation, I first went through the different labels and categories of the website. I did this to understand what could be combined and what the main categories of the website were. To organize the website in a way that would help the user, I combined some of the items on the navigation bars and eliminated the repetition of items (for example: taking out the category of “clothing” and just listing the clothing out on the navigation bar as “tops,” “bottoms,” “shoes,” etc.) so that the user would be able to have a specific place to go to for what they wanted.

 

Next, I changed up the icons on the top right of the website and made them easier to read. On the Shein website, there are many icons on the top right. However, it’s hard to tell what the icons are for. I changed the icons – in particular the one that would tell which country the site was for– so that it would be easier to read. I felt that this would be very important for the user to see as users from around the world are using the site and need to receive the correct items.

End Results

I received the grade I wanted on this assignment and was very proud of my work. I enjoyed learning about and going through the design process and found the results of my hard work to be very rewarding. I feel like this is definitely something that I enjoy doing, and is something that I would look forward to doing again if given the opportunity.​

​

Coded with HTML & CSS

bottom of page