About the Project
The main goal of this project was to incorporate knowledge of typography and grid systems, and make appropriate design decisions based on the website’s content and client’s objectives. This aim of this website is to show my skills of designing a website with current best practices in industry with consideration of good user experience. The audience of this project is my client, the Carnegie Mellon University Bookstore. There weren’t many constraints, except that we had to design for the most popular monitor resolutions. The end product turned out to be an visually pleasing, apparel focused storefront for Carnegie Mellon’s Bookstore.
When I first started thinking about content, I knew I wanted an apparel focused storefront because apparel is fun and spontaneous. Things I wanted to focus on were: navigation, call to action, and overall visual appeal of the website. The current storefront had unclear labels, no clear call to action, and an unprofessional look.
This was a good start, and was a good idea for a layout of what I wanted in my end draft. Overall it was a simple design with a focus on store promotions (in banner) and apparel (body).
The first prototype stayed true to my original wireframe. Overall, I decided to change the lower bar in the header to a different design, and move the search bar up to the top. There was really no need for the Home button, and the top bar had too much blank space without it. Also, there were too many popular items. Most stores only have one row, so I decided to go with one row of popular items and one row of new arrivals. The boxes at the footer stood out too much. I found that making the inner boxes darker and the text lighter, this would look less boxy. Another thing I was doing wrong was that I was using pure black, which is a no because nothing we see is ever really pure black. I decided to use shades of grey to fix this.
Here I have updated many things I just spoke of. One thing I still didn’t really like was the banner. Although I had updated the visual hierarchy within the banner, I was imagining a full width banner, without the need for a sidebar. The sidebar also made for difficult placement with the navigation dots. I also updated the Carnegie Mellon University text at the top the actual horizontal logo.
Here, the banner is full width, no sidebar. There were many small but noticeable changes. For example, the “Click Here” link in the middle footer was made lighter so it could be read more clearly. The images were also changed to higher resolution. The buttons for Mens, Womens, etc. were also changed to a more oval, natural looking button. In addition, the effects on the button were tweaks a bit more so it would be more clear that that was the category selected. Some things I would change before heading this out to production would be to change the “Go” at the bottom banner to something else. Perhaps make the field separate and have a button that says “subscribe” at the bottom right of the field.
Overall, I thought this first design for a product page was very effective. I felt that only small things needed to be changed.
As you can see, the pictures have been swapped for high resolution images, and the adjustments to the footers on the storefront have followed. All things that are clickable are now red, to make it more clear that it can be clicked. In addition, I made the Add to wish list and Share text smaller, so there is clearer visual hierarchy. Other than that, other adjustments include, alining of bread crumbs and adjustment of spacing between information.
Overall, I think my final drafts of the website achieved what I wanted: better navigation, clearer call to action, and overall a more visual appealing website.