Sound Seismic
User Interface | Responsive Design
rOLE
VISUAL | CONTENT DESIGNER
tIMELINE
4 WEEKS
METHODS
HEURISTIC EVALUATION, COMPETITIVE ANALYSIS
PROJECT OVERVIEW
As part of my visual design class at the School of Visual Concepts, we were tasked to do a site redesign. The assignment of the project was to design a one-page responsive product or service page that applied visual design principles for a site redesign of a business or product in a 5-week class.
My husband is a structural engineer and suggested a site in desperate need of help. Sound Seismic is a local Seattle business that offers home retrofitting services for homeowners who want to make sure their home is earthquake ready. Seattle is in the ring of fire, an earthquake active hot zone. By the end of 5 weeks, I updated the visuals and language on the site with a new style guide.
PROBLEM
Two high severity usability heuristic violations helped me determine that the site could benefit from an updated design. The site has a lot of text, different colors, and looks like a website from 1999- the same year the company was established (aesthetic and minimal design violation). When the main hero image is clicked, it was unclear where this lead (consistency and standards violation).
APPROACH
I first looked at the basic layout of the page. I wanted to have an idea of how simply changing the content structure like condensing the text could move the page toward a more minimalist and aesthetically pleasing site.
When I conducted a competitive analysis of related business, I began to see how much color played an important part in the feeling of the page. Some of the sites had warmer tones and others reflected more blues and greens. Going back to the original site, there was a lot of colors that mimic an emergency or a warning. I understood that the company was trying to show how important having a home retrofitted in an earthquake active zone, but I believed that there were other color options that could also show this.
We were encouraged to do theme explorations of different color palettes.
MOODBOARDS
Theme explorations
DESIGN DIRECTION
I used color theory to make my final decision about the colors that would be used on the site. I chose blues and yellows to indicate calm and warmth. Instead of using a lot of bright colors and warning signs, I wanted to show safety and security.
It was important to me that the blue on the yellow button met the AAA contrast ratio for accessibility, so I used a Sketch plugin Stark. My original thought was to have the text white, and that failed the contrast test with only a contrast ratio of 2.14:1. I changed that to blue which had a contrast ratio of 7.37:1.
WORDS AS PART OF THE DESIGN
Getting the word count down and being succinct was also an enormous challenge, but I am happy with the changes I made on the landing page. I wanted to adjust the writing as it was not easily scannable in the original design. I kept the idea that the words were a part of the design and saved the final editing when the design was close to complete.
ORIGINAL
RESULTS
This was a fun project and have reached out to Sound Seismic to see if I can pitch a site redesign for them. They are a fairly successful business based on Yelp reviews, but I wonder what a site update would do for their business value.
AN AREA I WOULD PUSH FURTHER
I did this project six months ago. Since then, I can tell the Est. 1999 section is lacking in visual polish.
Below is a sample from 30 additional iterations on how I would have improved on that area.