Redesign using Flex

This was the second site I had built whilst studying at Yoobee.  At this stage all I knew was html5, css3 and how to use flex and a little about responsiveness.  No Bootstrap, no JS or JQuery, no plug-ins - nothing fancy or helpful at all.  So this was a 100% hand coded site and was an exercise where we had to redesign the website of a website by the same name that is online.

All of us in the class had to redesign the same website.  Our process was to sketch ideas on paper, then create a prototype using a wireframe - UX Pin, followed by user testing and then the process of coding.  It was an iterative process over a few days.

Considerations for my design were:

    • A much more modern look and feel
    • A darker look to enhance the images
    • A one page site again for a contemporary feel
    • A simple to use site
    • Less clutter than the original site
    • More images and less wording
    • Stylish and more upmarket than the original site

Project Brief

A full review of an existing website should take as long as the budget allows for. In this project you are required to perform a very quick, light review to practice the steps that should be taken to re-design an existing website:

How will you tell your story in this medium, and how will you tell it if they look it up later on a desktop?

Skills To Demonstrate:

    • Formative UX Research Principles
    •  Lean Personas
    •  Wireframing
    •  Interactive Prototyping (Hi-Fi)
    •  User Testing
    •  Presentation

Learning Outcomes

By the end of the project, you should:

    • Understand and implement visual design principles in a website
    • Apply formative UX research techniques to form initial design concepts
    • Test design prototypes using an appropriate collaborative tool
    • Collaborate in a user testing session
    • Participate in a group project to achieve a common goal
    • Present a completed project to a group
view assignment