SOCKMONSTER:

SOCKMONSTER aims to bring a wide array of different socks to those wanting to add a personal touch to their daily style. Located in the University District, it is the perfect spot to pick up gifts for friends, or stop by on the way home from class.

SOCKMONSTERSOCKMONSTERSOCKMONSTERSOCKMONSTER

LOGOTYPE & VARIATION

COLOR

TYPE / BOWLBY ONE & ANONYMOUS PRO (WEB)

ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

MAIN SYMBOL & SECONDARY CHARACTERS

LOGOTYPE & SYMBOL LOCKUP

PATTERN

WEB COMPETITOR RESEARCH

SOCK IT TO ME:Aims to have “everyone” as their ideal customer, much like the original Sock Monster brand. Catalog looks clean without the name of sock and price. Otherwise, generally it is cluttered with no real unified color scheme or layout.

MOD SOCK:A cleaner looking front page that let the header breathe. Having a feature at the front is very appealing and drew me in. However, different styles of presenting the socks (using one sock vs. three socks) was a bit unorganized looking.

USER PERSONAS

THE FUNKY TEEN / 13:She changes her hair color every month and loves her theater class. Her room is covered in posters ranging from Adventure Time to her favorite K-Pop group. She likes SOCKMONSTER because our socks look like they came straight from her Tumblr. What she expects from us are socks with characters she can recognize and fit her personal style. One day she hopes to direct theater shows herself.

THE TRENDY MILLENIAL / 23:She found our brand by walking past the store in the University District on the way back to her apartment. Sheuses Instagram regularly and likes to post her brunches. She expects cute socks that can add color to her daily life as a student. She would love to work on a social media team after college, ideally in Seattle.

GOALS

BUSINESS GOALS:By changing the site to a more refined, less cluttered style, it will make it easier for the customer to get exactly what they were searching for right away without having to take in all the info at once. Introducing a more cohesive aesthetic can make our brand stand out and bring customers back.

BRAND GOALS:The brand needs to be more memorable and digestable to the customer. Having a cohesive color palette and striking characters with personality will better define SOCKMONSTER.

USER GOALS:A customer will want to see what style or aesthetic of sock this particular shop has that can differentiate it from other stores. Most importantly, if they are on the site then they want to buy socks. That should be the first thing they expect when they see the website.

STRATEGY STATEMENT:We will take the clutter out of the website, refine our sock styles, and introduce a more vibrant and inviting brand thta will draw the customer in from the get-go. Once in, the process to buy what they want should be smooth and straightforward. We want our users to fall in love with the brand by the end of their experience.

CONTENT OUTLINE

WHAT CAN GO ON THE SITE?

-address/map-phone number-social media links-featured socks-categorized sock sections: -men/wome/kids/unisex/color/ size/style/etc...-about the store-about the monsters-contact-shopping cart-search -instagram feed

MOODBOARD

I looked at a lot of handmade themes for tumblr based off my first user’s persona. The layouts are similar: small nav bar, with single or double column content. I felt like this is the truest

form of what appeals to the audience in mind.

INITIAL SKETCHES

Sketches are the most invaluable part of the process for me, especially when it comes to coding. With my first sketches, I tried to think in mostly columns, with ever other aspect of the site as an afterthought.

FEATURED

SHOP ALL

feature shop about

Free shipping on orders over $40!

shop about

FEATURED

feature

shop all about

SOCK MONSTER

• shop• about

• home

70% OFFselect socks

INITIAL SKETCHES

These first Sketch designs were extremely rough. I knew what i wanted, but translating it and seeing it made me realize that I need to head in a different direction with a lot more negative space, and less block-y.

USABILITY TEST

After refining the design comps, the main changes to be made after the test was scaling down imges/divs in general and ading the instagram feed. I also decided to not include a working “about the monsters” page for the final, instead choosing to refine the “about the store” page.

Final wireframes of main pages.

http://myweb.students.wwu.edu/ander621/360/project-2/main.html

WORKING PAGES:-main-women-sailormoon sock-about > the store-contact