SOLVING PROBLEMS WITH DESIGN AND TECHNOLOGY
SOLVING PROBLEMS WITH DESIGN AND TECHNOLOGY
SOLVING PROBLEMS WITH DESIGN AND TECHNOLOGY
Hello, my name is Christian Ignacio and I'm a UX Designer based in Seattle, WA.
IMD Website
Website Redesign
Overview
This summary of data will showcase our process and methods on how our group redesigned a mockup of a new Interactive Media Design web page for the University of Washington Bothell’s website. Our goal was to gather enough information from evaluative research, usability testing, stakeholder interviews, and peer feedback in producing a high-fidelity mockup proposal of an improved web design.
It is critical for IMD to have an attractive website that would interest potential future students applying to the major, as well as those who would like to know more about the program. With a design program like IMD, we believe we can suggest creative design solutions and interactive elements that would enhance the user experience and the user interface.
Team
1 Project Manager, 2 Web Designers, 1 Researcher
Roles
Project Manager
User Research
Tools
Adobe Illustrator
Figma​
Wix
Time
Oct 2019 - Dec 2019
Research
The main goal of our research was to conduct interviews to understand the usability of the existing IMD website. To do so, we first analyzed the website to settle what features we liked and disliked. As a collective group, we agreed that we wanted to create a layout more appealing that can give the webpage a distinct personality that relates to the program. As this webpage is supposed to be about an undergraduate program, the target audience appears to be prospective students who are interested in design and technology who would like to apply to a major that best fits their interests.
Competitive Websites Analysis
Our group was able to find a few websites that we think could help influence our redesign layout for some inspiration. For each competitive site, we wanted to explore each site as a “fresh” naive user, finding out who is their target audience, what are their main goals, identifying what aspects that are not working well, and how we can focus our research after investigation. Our team is going to do research on competitive websites from other college websites to learn how to improve the design of the current IMD website so that incoming students could learn more about the program in an effective way.
Another website our group found was helpful in our research was the Master of Human-Computer Interaction and Design (MHCI + D) from the University of Washington Seattle campus. The target audience for this website is for future/current UW students who are interested in applying to the MHC + D program. This program seeks to reach out to designers, engineers and researchers who are interested in combining their disciplines in creating innovative technology and new experiences.
Personas
After collecting all of this data from interviews and research, our group created two personas and use case scenarios that would help guide our redesign. This is very helpful because this would serve as tools for building understanding and empathy in designing to each persona’s specific needs, provide the products and services and displaying important information that would be most useful for them for our design solutions. One thing that Sara mentioned during the interview was that she wanted to have this website be a resource for current IMD students to be used more often. Since Sara wanted to target prospective students, we also wanted to design for someone who is looking at the website for the very first time.
Usability Testing
For our usability test, we gathered users within the IMD program and other UW Bothell students to look at the current IMD website and a potential UW Bothell IMD prototype that we created. As a necessary process in gathering more data about the usability of the website, we wanted to conduct an informal observation to get a better understanding of how people navigate and use the web pages. During the test, we received valuable feedback and critique on both sites to provide better content and build a new interesting user interface.
Redesign
For our redesign, we wanted to integrate all of the new UI elements we collected from the needs from our research to be put on our website. This was an interesting challenge because we wanted to make our website look modern and elegant but also be on brand in keeping the same feel as a university website. Some of us had experience in making websites but mainly in creating personal portfolios of our student work. The front end team was able to collect all of the different aspects from the competitive websites in using some of those to be inspirations of the new redesign. We wanted to add in more visual elements that users are able to click in to learn more about a project. In this way, we are able to use graphics in making people interact with the website. We also wanted to divide up the information in sub modules because we thought that this was a better way in organizing the program information.
Sketch
Final Designs
Reflection & Key takeways
This project has been a very good experience in redesigning the current IMD website. In the past, I enjoyed learning how to code websites from scratch using HTML, CSS, and Javascript. I liked being able to create basic websites but this project took it to the next level in incorporating evaluative research. During this process, it helped me further develop my skills in integrating what I learned in IMD about qualitative research to designing a solution for our stakeholders. The front end development of this project was easier when all of the research has been finished as we gathered what the audience and Sara, our advisor wanted. As a senior in the IMD program, I developed more of an eye in creating interesting visuals and I was able to practice more of that within this project. I learned that when designing for a stakeholder, there needs to be a sufficient amount of research and analysis that is acceptable to meet their standards. This gives me more insight of what the industry is like and would like more experience in creating more projects like this.