Nike is the world’s leading sportswear and footwear brands, known for its innovative designs, high-profile athlete endorsements, and the iconic “Just Do It” slogan. However, the company has moved less of its efforts towards online experience in recent years and I feel it has taken the fun out of its online shopping experience compared to its fun and functional shoes. In this project I wanted to bring back that experience and focus on the Women’s side of the website to encourage empowerment and expression for women. This project was done in my Capstone Thesis class at Tyler School of Art and Architecture by myself and with guidance of my professor. I am confident that I have brought a fresh new look to the website and brought back the engaging online experience that Nike has lost while exploring UX/UI design.

While researching for this project I noticed some problems with the Nike website that needed some fixing both with user experience and website design One of these problems is I found the website has a very dull color palette. For example, there is only black and white on the pages and some red in the text on the collection pages with the products. My solution to this would be simple, add a vibrant and bold color to the website. Another problem I found was there was no differentiation between types. For example, throughout the website there is very little differences between type hierarchy through fonts, sizing, and spacing. My solution would be to introduce more fonts, create a hierarchy of sizing and fix the spacing. The last challenge I found while on the original site was Simplifying Navigation and Filter features. For example, I found at the top of the website there were 4 navbars and the collection page had too many filters. My solution would be to bring down the amount of nav bars and only have at maximum 8 filters in the collection part of the website.

With all my design projects I have a plan on how I’m going to execute the task and examples of my design process. My process would be to first create a user flow and content page of all the information needed and the site and what content needs to be on each page. The next step would be to create style tiles and a color palette for the site. The third step would be to create low fi wireframes for all the pages, as well as collect all the content for them too. The final step would be to create high-fi wireframes for all the pages, test them and create the final prototype. One part of the process that was also very important was organizing all my layers in figma before I started prototyping. This ensures prototyping goes smoothly and makes it much easier to find content. The process took about 3 to 4 hours to complete but is a mandatory step. The next step I took was for the screenflow presentation of the project was to make a list of how the pages were gonna connect seamlessly so that all the interactive features and essential pages were featured. Once I made a list for each essential page I went down the list page by page and prototyped the interactions and connections.

Throughout this project I also experience some challenges while working. One problem that occurred was that I ran into a block on how I wanted the website to really look. For example, I was debating whether the website should have a bold look with inky and marker strokes or the use of lightning bolt art. This decision held up my schedule. But eventually I chose to go in the route of the ink splotches because it felt less tacky and could be a potentially rebranding opportunity to make the brand have a chance to embrace expression and uniqueness. The next problem that occurred was after my images were edited to have a colorful and bold design I realized that it took away from the actual picture of the shoe, which is why I added a hover state to the picture on the collection page to show the show with just a simple white background so people could really understand the product they are looking at. The final problem that occurred was I needed to change the type from what I originally had in my style tile. One font called dunbar did not go well with the rest of the website so I simply removed the font and replaced it with Forma DRJ Deck.