Valarie Martin Stuart: Web Design/UI Portfolio


Published on

A few examples from my web and user interface design portfolio.

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Valarie Martin Stuart: Web Design/UI Portfolio

  1. 1. V I S U A L + D E S I G N + S T R A T E G I S T
  2. 2. PORTFOLIOwebsite & user interface design
  3. 3. ‘‘ Creativity is more than just being different. Anybody can plan weird; that’s easy. What’s hard is to be as simple as Bach. Making the simple, awesomely simple, that’s creativity. — Charles Mingus jazz musician and civil rights activist
  4. 4. 1INTERNET FLOTATION DEVICES web design and social media firm
  5. 5. INTERNET FLOTATION DEVICES DESIGN REQUIREMENTS ✴ Create a minimalist design that “doesn’t look like a Drupal site” ✴ Slideshow on front page should highlight primary services ✴ Site must be built using existing Drupal core and contributed modules, with no custom developer code ROLE ✴ Concept and design ✴ Build site in Drupal CMS ✴ Create custom subtheme from Fusion base theme
  7. 7. INTERNET FLOTATION DEVICES: website services
  8. 8. INTERNET FLOTATION DEVICES: social media services
  9. 9. INTERNET FLOTATION DEVICES: blog landing page
  10. 10. INTERNET FLOTATION DEVICES: individual blog entry
  11. 11. INTERNET FLOTATION DEVICES BIGGEST CHALLENGES ✴ Creating a minimalist design to demonstrate to customers that a Drupal website could have a sleek, unique look and feel ✴ Turning the site from concept through production in less than two weeks SUCCESSES ✴ Immediately after site launch, company became a partner with Acquia, the #1 software vendor on the 2012 Inc. 500 list
  12. 12. ‘‘ To use design to impress, to polish things up, to make them chic, is no design at all. This is packaging. When we concentrate on the essential elements in design, when we omit all superfluous elements, we find forms become quiet, comfortable, understandable and, most importantly, long lasting. — Dieter Rams industrial designer
  13. 13. 2 LIVING YOGA DALLAScommunity website for yoga enthusiasts
  14. 14. LIVING YOGA DALLAS DESIGN REQUIREMENTS ✴ Maintain but update the Living Yoga Dallas brand ✴ Create page layouts based on unknown content provided by site users ✴ Create content, shopping and checkout system incorporating pay-to-post products ROLE ✴ Concept, design, copywriting ✴ Build site in Drupal CMS with no outside developer resources ✴ Create custom subtheme from Zen base theme
  15. 15. LIVING YOGA DALLAS: home page
  16. 16. LIVING YOGA DALLAS: upcoming community events
  17. 17. LIVING YOGA DALLAS: individual event listing
  18. 18. LIVING YOGA DALLAS: studios landing page
  19. 19. LIVING YOGA DALLAS: individual studio listing
  20. 20. LIVING YOGA DALLAS: instructors landing page
  21. 21. LIVING YOGA DALLAS: individual instructor listing
  22. 22. LIVING YOGA DALLAS: post a listing on the site
  23. 23. LIVING YOGA DALLAS BIGGEST CHALLENGES ✴ Developing a complex community site on an unfamiliar platform ✴ Iterating on an unproven concept from idea to execution ✴ Creating pay-to-post ecommerce system that novice computer users could navigate and complete ✴ Designing layouts to successfully display unknown content and images from community users ✴ Cross-posting event, studio and instructor listings throughout related pages on the site
  24. 24. LIVING YOGA DALLAS SUCCESSES ✴ On average, over 100 upcoming event listings can be found on the website at any time ✴ Over 100 studios and yoga-related businesses pay to display their listing on Living Yoga Dallas ✴ Yoga studios and businesses from as far away as Los Angeles, New York, Mexico and Costa Rica turn to Living Yoga Dallas to promote their events ✴ Slots available for purchase in regularly scheduled email newsletters are sold out weeks, and often months, in advance
  25. 25. ‘‘ The whole point of human-centered design is to take complexity, to turn what would appear to be a complicated tool into one that fits the task, that is understandable, usable, enjoyable. — Don Norman author, usability engineer
  26. 26. 3 ALLPLAYERS.COMweb application and tools for group management
  27. 27. ALLPLAYERS.COM DESIGN REQUIREMENTS ✴ Rework a difficult and confusing registration process to allow visitors to to join a group ✴ Reduce the amount of information requested so that users can complete the registration process faster ✴ Eliminate extraneous elements that could distract users and prevent them from completing the process ROLE ✴ Member of team developing use cases and user flows ✴ Create wireframes to guide developer team ✴ Style developer product to align with site branding
  28. 28. ALLPLAYERS.COM: group search page
  29. 29. ALLPLAYERS.COM: registration user flow
  30. 30. ALLPLAYERS.COM: registration user flow
  31. 31. ALLPLAYERS.COM: registration user flow
  32. 32. ALLPLAYERS.COM: registration user flow
  33. 33. ALLPLAYERS.COM: registration user flow
  34. 34. ALLPLAYERS.COM: registration user flow
  35. 35. ALLPLAYERS.COM: registration user flow
  36. 36. ALLPLAYERS.COM: registration user flow
  37. 37. ALLPLAYERS.COM BIGGEST CHALLENGES ✴ Define over a dozen possible use cases for user flows ✴ Achieve consensus among team members regarding the approach of feeding users multiple pages with well-defined and related requested data ✴ Overcome developer blockers to meet release deadline SUCCESSES ✴ Related support calls dropped immediately after release and no negative feedback was received regarding the major change ✴ Common thread from users answering feedback questionnaire was that the process was simple and clear
  38. 38. ‘‘ Forms suck. If you don’t believe me, try to find people who like filling them in.… For most of us, forms are just an annoyance. What we want to do is vote, apply for a job, buy a book online, join a group, or get a rebate back from a recent purchase. Forms just stand in our way. — Luke Wroblewski author and digital product leader
  39. 39. 4 ALLPLAYERS.COMweb application and tools for group management
  40. 40. ALLPLAYERS.COM DESIGN REQUIREMENTS ✴ Gather information from users that we need to improve their site experience and prevent user frustration ✴ While the information is important, it is not required or absolutely relevant to gather this data during user registration flows; in fact, it was shown to be a blocker to onboarding customers ✴ Do so in a way that’s friendly and demonstrates the value of providing the information ROLE ✴ Lead designer ✴ Style developer output to meet requirements
  41. 41. ALLPLAYERS.COM: user account wizard
  42. 42. ALLPLAYERS.COM: user account wizard
  43. 43. ALLPLAYERS.COM: user account wizard
  44. 44. ALLPLAYERS.COM: user account wizard
  45. 45. ALLPLAYERS.COM: user account wizard
  46. 46. ALLPLAYERS.COM: user account wizard
  47. 47. ALLPLAYERS.COM BIGGEST CHALLENGES ✴ Company acceptance to not include non-vital information requests in the registration process, but at another time ✴ Quickly and succinctly explaining the value of providing the information SUCCESSES ✴ Phone number request was previously preventing some users from registering for a group; this roadblock was removed from that user flow ✴ Missing time zone data from users was causing confusion on event detail displays; requesting this information before the user realizes they need to provide it avoids miscommunications
  48. 48. ‘‘ People DO judge a book by its cover. We may have the best product, the highest quality, the most useful software etc.; if we present them in a slipshod manner, they will be perceived as slipshod; if we present them in a creative, professional manner, we will impute the desired qualities. — Mike Markkula Apple Computer, Inc.
  49. 49. V I S U A L + D E S I G N + S T R A T E G I S TView
  50. 50.  my
  51. 51.  portfolio
  52. 52.  and
  53. 53.  resume
  54. 54.  at
  55. 55. or
  56. 56.  email
  57. 57. — M AD E W IT H K E YNOTE ON A MAC —