22
User Experience // Janell McCanna

Design Sponge Deck

Embed Size (px)

Citation preview

User Experience // Janell McCanna

Introduction………………………………………………………………………………3 Current Site Screenshot……………………………………………………………………………4

Personas……………………………………………………………………………………5 Personas Introduction………………………………………………………………………………6 Comparison Chart…………………………………………………………………………………….7 “The Hipster”……………………………………………………………………………………………8 “The Etsy Star”…………………………………………………………………………………………9

Heuristics………………………………………………………………………………..10 Heuristics Introduction…………………………………………………………………………..11 Analysis Table…………………………………………………………………………………………12

Sitemaps………………………………………………………………………………….13 Current Sitemap………………………………………………………………………………..……14 Revamped Sitemap………………………………….………………………………………………15

Wireframes………………………………………………………………………………16 Introduction………………………………………………………………………………….…………17 Sketches………………………………………………………………………………………………….18 Homepage……………………………………………………………………………………………….19 Navigation…………………………………………………………………………………………….…20 Article……………………………………………………………………………………………………..21

Table of Contents

Introduction: I chose to go with a design blog called ‘Design*Sponge’. As a consistent reader of this website, I’ve felt it’s needed a revamp for quite a while, and during the first week of class, they did just that. Unfortunately, my excitement was short-lived; while the site looked pretty, the functionality was still not there.

Screenshot: Portion of

website

Personas

Persona Introduction: To find the users, I started by establishing their age. I discovered some research regarding the demographics from a similar website. From there, I took that data and expanded upon it to create the profile for the primary and secondary users.

Primary User Secondary User

Who: Interior Design Enthusiasts Designers, Artists, Event Planners, Vendors, Authors, etc.

Demo:

21-34 Women Married or long-term relationship College educated Creative job or hobby

25-40 Mostly women College Educated Smaller to mid-sized, indie companies

Use: Desktop & Tablet Desktop

How Utilized:

Stay on top of trends Get ideas for DIYs to try Find art, furniture, fabrics, etc. Discover recipes to try (especially for hosting parties) Receive tips on home matters (cleaning, painting, gardening, etc.) Read about designers Get a look into other people’s spaces Find inspiration

Promote their product/service Create trends Gather information on what is successful Develop business opportunities

Name: Anna Age: 25 Occupation: Graphic Designer Education: Bachelor’s Degree Marital Status: Engaged Hobbies: Painting, knitting, ukulele, and reading Influencers: Jonathan Adler, Brad Ford, Beyonce, Lena Dunham, David Carson, Paul Rand, So Haute Blog, Lauren Conrad, Refinery29

The Hipster

//Behaviors// Social Media Accounts

Brand Loyalty

Few Many

Few Many

Hours Spent Creating

Few Many

Comments on Blogs

Few Many

I just moved in with my fiancé, and we want our new place to really “wow” our friends. We want to stay away from a cookie-cuter aesthetic. We love getting unique pieces that support small businesses.

“”

Name: Lilly Age: 31 Occupation: Textile Designer Education: Bachelor’s Degree Marital Status: Married Hobbies: Sewing, running, gardening, cooking, coffee Influencers: Studio Bon, Dwell, Spoonflower, Project Runway, Apartment Therapy, The Littlest, Amy Poehler, Emma Watson, Jon Stewart

The Etsy Star

Times Partnered with Blogs

Customer Loyals

Few Many

Few Many

Hours Networking

Few Many

Hours Spent Creating

Few Many

The textiles I create have gotten quite a lot more traction since I ramped up my partnerships with various blogs. The blogs I follow personally inspire me with many new ideas for color combos or textures. I’ve been able to be at the forefront of several trends because of the people I work with.

“”

//Behaviors//

Heuristics

Heuristics Introduction: Going through each section of the checklist, I found that Design Sponge faired pretty well in satisfying the criteria. Unfortunately, the places where they lack are really what leads to some of the poor functionality of the website overall.

Sitemaps

3.2DIY Projects

3.1 Before & After

2.0Interiors

3.0DIY

4.0Food & Drink

5.0Travel

6.0Life & Business

7.0101 Guides

8.0Columns

8.1 A Day In the Life

8.2 Living In

8.3Sights & Songs

8.4 Past & Present

8.5 Before & After

8.6 Style Icon

8.7 Art In The Everyday

8.8 10 Second Tours

8.9 Veterans &

Starters

8.10 DIY Projects

Alternative Link

Direct Link

Multiple Pages

DS VideosEssays Artwork DSHashtag HomeEC Study Tour

Products Biz Ladies Best Of the Web Essay 24 Hours In

1.0 Name

2.0Name

2.1 Name

Home Page

Main Navigation

Web Pages

Name Floaters (Pages That Aren’tConnected to Any Navigation)

Current Site Map

2.1 Articles

3.1.1-X Articles

3.2.1-X Articles

4.1-X Articles

5.1-X Articles

6.1-X Articles

7.1-X Articles

8.1.1-X Articles

8.2.1-X Articles

8.3.1-X Articles

8.4.1-X Articles

8.7.1-X Articles

8.6.1-X Articles

8.9.1-X Articles

8.8.1-X Articles

2.1.1-X Name

1.0 Home

Shop Tour

3.2Projects

3.1 Before & After

2.0Tours

3.0DIY

4.0Food & Drink

5.0Travel

6.0Profiles

7.0Design

8.0D*S

6.4A Day In the Life

7.4 Art In The Everyday

6.6Sights & Songs

6.5 Style Icon

6.2 Veterans &

Starters

6.1 Life & Business

Direct Link

Multiple Pages

1.0 Name

2.0Name

2.1 Name

Home Page

Main Navigation

Web Pages

Revamped Site Map

2.1.1 - XArticles

2.2.1 - XArticles

2.3.1 - XArticles

3.3Home Ec

3.4101 Guides

2.4.1 - XArticles

2.1Interiors

2.2Shop Tours

2.3Studio Tours

2.410 Sec Tours

3.1.1 - XArticles

3.2.1 - XArticles

3.3.1 - XArticles

3.4.1 - XArticles

4.1 - XArticles

5.2City Guides

5.124 Hours In 5.1.1 - X

Articles

5.2.1 - XArticles

6.3 Biz Ladies

6.1.1 - XArticles

6.2.1 - XArticles

6.3.1 - XArticles

6.4.1 - XArticles

6.5.1 - XArticles

6.6.1 - XArticles

7.1 Products

7.2 Artwork

7.3 Living In

7.1.1 - XArticles

7.2.1 - XArticles

7.3.1 - XArticles

7.4.1 - XArticles

8.2DS Videos

8.1 Past & Present

8.3DS Hashtag

8.4Best of the Week

8.1.1 - XArticles

8.2.1 - XArticles

8.3.1 - XArticles

8.4.1 - XArticles

9.0Essays

9.1.1 - XArticles

1.0 Home

9.1.1 - XArticles

Wireframes

Wireframes Introduction: I chose to use Omnigraffle to build my wireframes. I found that, when sketching the original homepage, there was just too much going on. The latest 15 articles were listed on the first page (including a majority of the article’s text), so I wanted to rework it to incorporate more visual stimulation and reduce the number of articles seen upon arrival.

Homepage Layout Sketch

Tours DIY Food & Drink Travel Profiles Design D*S Essays

About Contact Scholarship Advetise

Article NameCategory

5.0

1.0

2.0

6.0

4.0

6.0

5.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Navigation (Click to filter articles by category or hover to show secondary navigation/categories)

Article Image (Hovered State: Pink Tint & Info)

At This Point Nine More Articles Loaded

f

f

3.0

4.0 Article Image

Tours DIY Food & Drink Travel Profiles Design D*S Essays

About Contact Scholarship Advetise

Article NameCategory

5.0

1.0

2.0

6.0

4.0

6.0

5.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Navigation (Click to filter articles by category or hover to show secondary navigation/categories)

Article Image (Hovered State: Pink Tint & Info)

At This Point Nine More Articles Load

f

f

3.0

4.0 Article Image

Homepage Layout

Tours DIY Food & Drink Travel Profiles Design D*Sf

Essays

1.0

2.0

4.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Category*

Secondary Category**

Life & Business Veterans & Starters Biz Ladies A Day In The Life Style Icon Sights & Songs

3.0

4.0

* Click to filter by category or hover to reveal secondary categories

** Click to filter by category

Tours DIY Food & Drink Travel Profiles Design D*S Essays

Life & Business Veterans & Starters Biz Ladies A Day In The Life Style Icon Sights & Songs

5.0

6.0

5.0 Sticky Navigation (Expanded)

5.0 Sticky Navigation (Collapsed)

Tours DIY Food & Drink Travel Profiles Design D*Sf

Essays

1.0

2.0

4.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Category*

Secondary Category**

Life & Business Veterans & Starters Biz Ladies A Day In The Life Style Icon Sights & Songs

3.0

4.0

* Click to filter by category or hover to reveal secondary categories

** Click to filter by category

Tours DIY Food & Drink Travel Profiles Design D*S Essays

Life & Business Veterans & Starters Biz Ladies A Day In The Life Style Icon Sights & Songs

5.0

6.0

5.0 Sticky Navigation (Expanded)

5.0 Sticky Navigation (Collapsed)

Navigation Layouts

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas.

Tours DIY Food & Drink Travel Profiles Design D*S Essays

About Contact Scholarship Advetise

Article NameCategory

5.0

1.0

2.0

6.0

4.0

6.0

5.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Navigation (Click to filter articles by category or hover to show secondary navigation/categories)

Article Info (Click through for filtered results)

Additional Article Images (Expandable Modal)

f

f

3.0

4.0 Article Main Image

Article TitleAuthorCategory

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Suggested Articles

Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data. Collaboratively restore cross-platform users before client-centered manufactured products.

Assertively evolve long-term high-impact vortals through visionary solutions. Professionally harness standardized portals vis-a-vis resource maximizing deliverables. Continually coordinate stand-alone applications rather than virtual communities.

Dynamically optimize fully researched results before stand-alone human capital. Completely predominate seamless synergy via interoperable methodologies. Dramatically provide access to fully researched infrastructures.

7.0

8.0

9.0

Suggested Article Image (Hovered State: Pink Tint & Info)

6.0 Suggested Articles Area

8.0 Suggested Article Image

6.0

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas.

Tours DIY Food & Drink Travel Profiles Design D*S Essays

About Contact Scholarship Advetise

Article NameCategory

5.0

1.0

2.0

6.0

4.0

6.0

5.0

3.0

2.0

1.0 Design Sponge Logo

Hero Image

Primary Navigation (Click to filter articles by category or hover to show secondary navigation/categories)

Article Info (Click through for filtered results)

Additional Article Images (Expandable Modal)

f

f

3.0

4.0 Article Main Image

Article TitleAuthorCategory

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Suggested Articles

Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data. Collaboratively restore cross-platform users before client-centered manufactured products.

Assertively evolve long-term high-impact vortals through visionary solutions. Professionally harness standardized portals vis-a-vis resource maximizing deliverables. Continually coordinate stand-alone applications rather than virtual communities.

Dynamically optimize fully researched results before stand-alone human capital. Completely predominate seamless synergy via interoperable methodologies. Dramatically provide access to fully researched infrastructures.

7.0

8.0

9.0

Suggested Article Image (Hovered State: Pink Tint & Info)

6.0 Suggested Articles Area

8.0 Suggested Article Image

6.0f

Article Page Layout

Thank you!