Ampeg ReDesign

The main purpose of my redesign for the Ampeg website was to give it an updated aesthetic that would match the loud, in your face nature of their product in addition to being simplified and easily navigable.  I felt I was successful in that upon accessing the homepage, you are instantly immersed in the world of Ampeg, with a strong visual presence matching the ‘punchiness’ of the tone the products produce.  Based on the considerations of my first persona, my redone homepage instantly allows the user plenty of navigation choices with a main navigation in the header, and linked imagery highlighting specific content.  I also included a login form for quick access to member’s only content.

If the user wishes to access this member’s only content, they would login through the homepage and be transported to a landing page, dubbed ‘Turn It UP!’ featuring links to the two proposed member’s areas; the tone vault and the gig finder.  The tone vault would be a database where users can upload and share their favorite settings for Ampeg amps, while the gig finder would provide an online community for musicians to exchange information and find other musicians to jam with.

The most in depth landing pages created for the redesign was the stylistic update for the products page.  Spread over multiple levels of navigation, the user is able to quickly select the series of products they desire to view, then hone in on the product.  I added a static subnav list to the left side of the main content which displays which series of products the user is currently at and gives the option to move to another series page without having to return to the main products page.  An example of differing levels of navigation follows.

The next landing page updated was the artists page.  This page is very straightforward, yet provides the user with a quick overview of a current Ampeg sponsored artist.  In the case of this design comp, the featured artist is Tony Levin.  Additionally this page would contain a form that would allow the user to search for archived artists by name and date.

Additional landing pages created were the history and support pages.  The history page give a brief overview of the company, telling the story behind the tone and featuring imagery from the company’s past.  The support page, which can additionally be quickly accessed via the right hand graphic that adorns all pages, gives the user some basic information on customer support from the company and has two forms that the user can input a city or zip code to find closest dealers and support centers where products can be serviced.

Taking the steps of creating the sitemap and wireframes in addition to making adjustments based on the needs of the three personas allowed me to make informed design decisions that led to a more effective redesign.  This site satisfies my initial goal of creating a fresh and exciting visual scheme that is consistent throughout the site and meets the demands of varrying users.  Content is structured so that it is easily accessible, without being at the expense of losing additional information.

Ampeg Re_Design Assets

I have attached a single pdf containing much of my information architecture assets for my redesign of Ampeg’s website.    Included within this pdf is my communication brief, three diverse personas, a site map, a wire frame for the homepage, and a wire frame for a landing page.

final_materials

Ampeg Re_Design Sketch

Ampeg Communication Brief

ampeg_comm_brief

3 User Profiles

…for the Ampeg.com re_design.

ampeg_users

Ampeg Re_Design Thoughts/Process

For my midterm redesign I decided to chose Ampeg’s website.  Ampeg is the world’s leading electric bass amplification company.  I felt that the current layout of the website is a little cold and stale, lacking the punch that Ampeg’s products so prominently feature.  The look that I created is a rougher, more worn-in feel, a look that I feel caters more towards the rock musician, the demographic that takes up a majority of Ampeg’s user audience.  I moved the navigation from across the top to the left column, maintaining a consistent system throughout.  Some issues I have had trouble with were maintaining a sharp resolution for some of the images on screen, as some appear a little fuzzy and content placement issues.  A majority of images I have used for the site consist of hand created imagery, scanned in at print resolution, then further compressed for the web.  This is usually a process I go through to create unique style for the printed media, but this is proving that it might not be the best option for web.  For placement of content I first set up the main two column structure of the site using divs, then for specific content areas inserted tables which allowed me to drop in imagery or text.  Though this at the time was a quick and easy solution, I feel that inserting additional divs will allow me more control of my layout, remedying some placement is I have ran into.   Though this has not been implemented into my current design, I feel that the website could greatly benefit from the addition of an online community where users can register accounts, gaining access to exclusive content, member only forums, and areas where users can upload tone settings for products Ampeg products that they use.

Prototyping Blog Reviews

Sketching In Code: The Magic Of Prototyping by David Verba

In David Verba’s article ‘Sketching In Code’ he provides an overview and helpful tips regarding web prototyping.  Prototyping allows the designer to flesh out a the layout, user ability, and feel of the website in a highly editable state allowing for potential problem areas to be resolved on the fly.  Building a prototype is a practice that is essential when working with a client, allowing for specific needs to be met and settled upon early within the creation process of the site.  I appreciate Verba’s emphasis on beta testing the design of the prototype in order for the coding process to be as smooth as possible.

Design Better and Faster With Rapid Prototyping by Lyndon Cerejo

In this article Lyndon Cerejo explains the importance of prototyping as an important method of being efficient and prompt with your web design, allowing for general style and structure components to be resolved rapidly.  Cerejo breaks down the prototyping process into three steps; prototyping, reviewing, and refining.  Prototyping creates the initial working mockup of the design, while reviewing gathers data on functionality and practicality of the design,  while refining uses this research to make positive adjustments to the site.

Prototype A Magazine by Raj Dash

‘Prototype A Magazine’ by Raj Dash is an article that serves as tutorial for building popular ‘magazine’ style websites, only this time through the use of CSS.  Dash first explains to rough out the layout of the page, creating a slice map which will eventually serve as a guide for setting up divs.  From here, logical steps follow, creating and editing divs then further placing and styling content within the divs.