Your SlideShare is downloading. ×
Case Study: Website Redesign
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Case Study: Website Redesign


Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. V I S U A L + D E S I G N + S T R A T E G I S T
  • 2. CASE STUDY: marketing space redesign
  • 3. BEFORE: home page
  • 4. BEFORE: home page Layout looks familiar… but unlike other popular social media sites, it’s not immediately obvious to users ✦ what the site is for ✦ who should use it ✦ why they need it
  • 5. AFTER: home page
  • 6. AFTER: home page Headline What this site offers in less than three seconds.
  • 7. AFTER: home page Subhead Brief introduction and value statement.
  • 8. AFTER: home page Call to action No fear – it’s free!
  • 9. AFTER: home page Hero image Show the product, especially when the product looks superior to competitor offerings.
  • 10. AFTER: home page Audience Who can benefit from the product?
  • 11. AFTER: home page Features and benefits Tailored to each audience.
  • 12. AFTER: home page Secondary call to action Lead generation opportunity.
  • 13. AFTER: home page And, of course… Site navigation.
  • 14. BEFORE: benefits and features pages
  • 15. AFTER: benefits and features pages
  • 16. AFTER: benefits and features pages Location marker User always knows where they are
  • 17. AFTER: benefits and features pages Friendly headline Easy-to-read font, condensed to take less space to tell story.
  • 18. AFTER: benefits and features pages Features list Accordion display allows quick scanning.
  • 19. AFTER: benefits and features pages Features list Click for more info when an item is of interest for brief introduction.
  • 20. AFTER: benefits and features pages Monotone icons Repeated throughout site for instant recognition. Also act as graphic element to keep associated text line length comfortable.
  • 21. AFTER: benefits and features pages Call to action Consistent so users can act when ready.
  • 22. AFTER: benefits and features pages Sub-navigation Allows users to scan and explore additional features.
  • 23. AFTER: benefits and features pages
  • 24. AFTER: benefits and features pagesResponsive designAllows users to easilybrowse the site on anydevice.
  • 25. CASE STUDY: user home page redesign
  • 26. BEFORE: user home page
  • 27. BEFORE: user home page What do I do now? Users landed on this page when they logged in, but had no clue what they should do next.
  • 28. BEFORE: user home page What do I do now? Navigation was confusing, and users had no clear path on where to go or why they need this page.
  • 29. AFTER: user home page
  • 30. AFTER: user home page Cleaner design Users now have a home page they can decipher and follow.
  • 31. AFTER: user home page Accessible benefits Users can stay current with upcoming events and messages.
  • 32. AFTER: user home page Alerts When something has changed since their last visit, users are notified and can take action.
  • 33. AFTER: user home page Sub-navigation Cleaner, more concise user navigation tools provide a clearer path for users seeking this information.
  • 34. AFTER: user home page Branded icons Monochrome icons, used throughout all areas of site, maintain brand and maintain eye/brain connection without distraction.
  • 35. AFTER: user home page Results A cleaner layout and design lead the user through important elements for a more positive interactive experience.
  • 36. V I S U A L + D E S I G N + S T R A T E G I S TView
  • 37.  my
  • 38.  portfolio
  • 39.  and
  • 40.  resume
  • 41.  at
  • 42. or
  • 43.  email
  • 44. — M AD E W IT H K E YNOTE ON A MAC —