Blue Ear Books' website, although usable, has much room for improvement with respect to navigation and way finding.
Firstly on the home page, there is lots of text content that is not related to the images placed on the page. There is no thought for use of scan patterns when considering the design of the site.
The site also has little style consistency. They attempted to make this page look like a 3 column newspaper article, but later in the site changed up the content layout to a blogging website layout.
Once reading the text, the text content does not at all match the contents of the images. Proper use of proximity and content grouping can easily be implemented to prevent this specific issue
The navigation bar on the current site is cluttered and has two sources of navigation for search and browse functionalities as indicated by the "Books" and "Authors" dropdowns. The issue that comes into play is that there is no option for a landing page to view all books or authors. This would become problematic especially when a visitor may want to just browse books.
Above the fold, the description included is resourceful and provides more context to the book. However, the issue is that there is no real call to action to purchase the book. Only until you scroll past the fold the visitor can see the add to cart functionalities. The issues do not end here, however. When the visitor clicks on the link they are taken to another page on a PayPal payment portal. Looking back, the link didn't give the users any type of visual cue that they would be redirected to another page... WOW!!
Keeping in mind the constraint of not removing any text or content from the site, there was content on the home page that did not pertain to any of the images. We created crude 3D mockups as placeholders to fill these areas.
Our new redesign heavily focused on proximity and hicks law. We wanted to make sure to communicate what text belonged to which image or book cover for the visitors to be able to easily view the content. We also added in a method for the visitors to be able to navigate quickly through the carousel.
Above is another page from the home page carousel. Because some of the book descriptions were so long, we utilized dynamic resizing to allow the user to learn more about the content connected to the book pages. We noted this visually by linking consistencies relying on habituation for users to understand the functional properties for the "view more" link.
Firstly, we implemented a way for the visitors to be able to browse all of the book selections (pictured left) using a grid layout. We also changed the call to action button styling to blue. We included the text below the CTA for the user to know they would be going off of the current page to an out-link. Effectively this would help increase the users' trust knowing they are being directed to the right page.
The biggest challenges during this project were the constraints of having to keep all existing content on the page, and not modifying it in any way outside of styling and layout. This was difficult because we had to make sure we weren't unintentionally modifying or omitting any text, imagery, buttons or links on the page. Making sure that content was in tact and all was used forced us to take a step back and pull knowledge from class and apply it to the new website implementations.
Another challenge that we faced was communication across the group. Our group was two senior Software Engineering students and two sophomore User Experience students. Because of this, there were communication and availability gaps that caused us to have to communicate asynchronously. Sometimes a group member would not get something done, but the project still had to move forward. To navigate past this hurdle, we made sure to have open communication if someone was unable to meet a deliverable in the time specified. We also implemented a strike system so there would be fair judgment if someone from the group was not contributing or meeting deliverables consistently.
Within the time that we spent on the website redesign, we were unable to meet or work with users and solidify our designs in research. We also had no access to stakeholders to be able to work with. To work past this major constraint we looked to other sources for boutique bookstore websites as well as bigger stores such as Amazon, Kohls, and Barnes & Noble.
I became more efficient in creating components and prototyping the UI to be more interactive. I also learned to create a dropdown menu using component states.
My favorite part of the website redesign process was ideation with the group. During this time we were free to throw ideas out regardless of feasibility based off of the information that we learned from in class and the book.
