Skip to main content

UX Process Case Study

  • Goal:

    Create an easy-to-navigate website that gives clear copy direction to client’s writing team. Emotes luxury, style, and technology. Conversion-oriented design.

  • Challenges:

    No brand guide – only style direction is inclusion of logo orange, Open Sans font and dark theme background. Limited direction on content. Strict deadline on product delivery; also necessary to complete work in time for copywriting efforts.

  • Methodology:

    The Design Thinking Process, Herbert A. Simon

  • Tools:
    • Sitemap Development: MindMeister
    • Wireframing: Figma
    • Project Management: Workfront
    • Collaboration: Milanote
    • Design: Photoshop, Adobe Illustator, Adobe Premier
    • CMS: Joomla

Phase One: Empathize

  • Completed interviews & brainstorming sessions with the client
  • Performed market research of competitors
  • Reviewed sample websites for both style and content
  • Gathered previous user information from other builds in same market
Market Research

*Details blurred for client privacy.

Phase Two: Define

  • Developed extensive storyboarding for use-case scenarios
  • Created clear outline of user needs: the needs of the client (style, branding, luxury) and the needs of the user (usability, page load, SEO)
  • Generated output of research/needs into a set of paths forward.

*Details blurred for client privacy.

Phase Three: Ideate

  • Developed style boards in Milanote to dial in brand expression
  • Created iterative rounds of wireframing
  • Rinse and repeat!
Above the fold
See Full Iterative Wireframe

Compressed version below, or you can see it at a larger size here. Note that this is a large file and it may take a moment to load!

Wireframe

Phase Four: Prototype

  • Used results of ideation phase to create mockup for client review
  • Used feedback to tweak results iteratively
Mockup

*Details blurred for client privacy.

See Full Iterative Mockup

Compressed version below, or you can see it at a larger size here. Note that this is a large file and it may take a moment to load!

Wireframe

Phase Five: Test

  • Turned prototype into dynamic, working webpage
  • Tested the page internally for usability, broken links, pagespeed, and responsiveness across all device sizes/browsers
  • Tested browser among client/client team for usability, legibility, and experience
  • Once complete, full website sent to copy team. Success!
Mockup

*Details blurred for client privacy. Stock photos used in this representation to avoid copyright infringement.

See Full Homepage

Compressed version below, or you can see it at a larger size here. Note that this is a large file and it may take a moment to load!

Wireframe
Back to homepage