CMU Bookstore Redesign

CMUBookStoreFinal

CMUPageFinal

Website
2013
Individual Project

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.

Project Process

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.

Store Front

Wireframe

Wireframe

Wireframe

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).

First Round

First Round

First Round

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.

Round Two

Round Two

Round Two

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.

Round 3

Round Three

Round Three

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.

Product Page

Round 1

Round 1

Overall, I thought this first design for a product page was very effective. I felt that only small things needed to be changed.

Round 2

Round 2

Round 2

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s