Interaction Design

Interaction Design

The assignment

Redesign an existing website by applying learned design rules and techniques. Write a design report starting with an analysis of the problem and involve persona insights and an expert review. Continue by explaining the requirements which will be needed to improve the new website. Start your redesign by creating a style tile to define the visual style by incorporating the colors, pictures and icons you will be using. Then make lo-fi wireframes to showcase the lay-out and apply patterns from the book Designing Interfaces. Finally, prototype your redesign and elaborate on your design choices.

My process

My project partner and I started out with exanimating the given persona and analyzing the old website. We wrote an expert review consisting of improvements for the old design by following design principles explained in Designing Interfaces.

We were able to make requirements for our redesign based on what we examined. Then we worked together in a Figma file to create the style tile of the new website.

The next step was to lay out content and functionality on a page which takes into account user needs and user journeys. To establish the basic structure of the redesign without adding any visual design. We did this by creating wireframes to demonstrate the amount of pages and the flow of our new website.

Our final design choices were based on the design principles and further explained in our journal. Our final product is shown in the following video:

The results

The final report with the analysis, style tile, wireframe and prototype were graded with a 9,8/10. From this assignment I gained the following learning objectives:

• Use interaction design principles to evaluate and (re)design a user interface
• Know and explore interaction design patterns for user interface design
• Choose interaction design patterns that fit a given problem definition
• Adjust interaction design patterns according to the context of use

• Interpret interaction design deliverables (flowcharts, requirements)
• Use the terminology commonly used in user interface design
• Explore possibilities for finding inspiration on user interface design