Building my HCI Project Portfolio

Building Your Portfolio: Website and Presentation Deck

When I began building my portfolio for the tutorial application on the website and for the presentation deck, I knew I wanted it to clearly reflect the entire design process. I chose a simple, organized format for both the website and the presentation deck to guide viewers easily through the three stages of development: low-fidelity, medium-fidelity, and high-fidelity prototyping. One key design choice was using a visual timeline for each phase of the project, allowing users to intuitively follow the evolution of the tutorial application. The website was created using Google Sites, and each stage of the tutorial application was built in Figma. Screenshots from each development stage were captured in Figma and pasted into both the website and the presentation deck.

The website serves as a more detailed page, in contrast to the presentation deck. It offers a deeper examination and explanation into the design process behind each aspect of the tutorial application. It guides the audience through each prototype stage with descriptions, reflections, and insights, allowing them to fully understand the choices and challenges along the way. While the website provides a page to dive deep into the full decision process, the presentation deck is designed to be simpler. In the presentation slides, I focused on highlighting the main ideas and visually showing how the tutorial application design evolved from low-fidelity wireframes to a polished high-fidelity prototype. I started by introducing the user challenges that inspired the project, then guided the audience through the design journey using more brief descriptions and snapshots. The goal is to make the presentation easy to follow, so they can quickly identify the essential points of the project without feeling overwhelmed. 

Showcasing Your Work

One of the main challenges that I faced is presenting the transitions between the different fidelity levels in a way that felt meaningful. Since each version of the prototypes added new details and functions, I had to explain not just what changed, but why those changes mattered for the overall user experience. I decided to highlight the most impactful changes, such as when usability testing of the low-fidelity wireframes revealed navigation issues when customizing the tutorial options, which was then addressed in the medium-fidelity prototype. In both the website and the presentation deck, I demonstrated these shifts to demonstrate how user feedback can shape the final design of the tutorial application.

It is also important to include side-by-side comparisons between the different prototype stages in my portfolio, so the audience can visually track the tutorial application's growth. One of the design decisions I am most excited about is enhancing the one of the tutorial screens by introducing pre-defined templates, giving users a starting point without needing to customize everything from scratch. Instead of overwhelming users with checkboxes, I shifted to using sliders for customization, making the experience more intuitive. I presented this improvement by showing the low-fidelity sketches alongside the high-fidelity prototype and explaining the reasoning behind the change. This helped me clearly demonstrate the value of an iterative, user-centered design process.

Lessons Learned About Presentation

Presenting the design process of the tutorial application teaches a lot about how to make a project clear and compelling to others. One thing that is surprising is how much more engaged people were when I showed the low-fidelity wireframes and shared the “why” behind my decisions. Initially, I thought only the final high-fidelity prototype would stand out, but it turned out that the process itself was just as important to the audience. To make the content more engaging, I used annotated visuals, and step-by-step explanations. Looking back at my presentation style, one thing I would do differently next time is to use animations to introduce explanations gradually, rather than showing all of them at once. This would make the flow of the explanations easier to follow.

Reflecting on Your Personal Growth

Going through the full process of building a portfolio and presenting my tutorial application project has helped me grow as a designer. I learned how to better explain my decisions and show all the thoughts behind every stage of the design process. Communicating to people outside the design team also became much easier. I got better at simplifying complex ideas without losing their meaning. This experience boosted my confidence in presenting and understanding how important it is to communicate ideas in a clear and thoughtful way. I will carry these skills into my future work, where the ability to share thinkings will be just as valuable as the designs themselves.