This was the first project we had in Human Computer Interaction. Our goal was to become more familiarized with the design process, especially Need Finding, Information Design, Story Boarding, Sketching, and Prototyping. This project was to learn to design for others across dimensions. We took the Colorado College computer science website and redesigned 4 pages of it for the specific user group "students interested in computer science" on a mobile phone and a smartwatch. By targeting one group of users, we could better target their needs and wants in the site, especially when trying to fit the content in a holistic experience for the user onto small screens like a phone or a watch.
Need Finding
We interviewed 4 people that we in our targeted user group, including a non-computer science major and a prospective high school student. Through these interviews, we were able to discover what goals they have for the site, what the would like to see, and what they dislike about its current state. In order to consider all of the information we were given, we developed an affinity diagram. From that, we created two personas to generalize our user base and create a "How might we" statement.
Affinity Diagram
Personas
How Might We
Given the fact that people struggle to find information on the computer science website
How might we redesign the Colorado College Computer Science website to support people who are interested in programming to discover information about pathways in CS at CC
So that people can find this information quickly and easily and make informed decisions about their progression in computer science.
How might we redesign the Colorado College Computer Science website to support people who are interested in programming to discover information about pathways in CS at CC
So that people can find this information quickly and easily and make informed decisions about their progression in computer science.
Information Design
We used a mood board to set the proper tone for our user group. We found examples on the computer science website of what was liked, what was disliked, what was preferred on other sites, and developed a color palette, design pattern, fonts, icons and general "vibe" for our redesigned site.
Low Fidelity Prototype
We sketched out some design ideas for our solutions, then decided on our favorites to put into a paper prototypes for testing. These are some of the sketched designs and our paper prototype being tested. We ended up with some good ideas to change the in our design. One issue we ran into was going back to the previous page. Most phones have a built in way to do this, and while we ended up adding a button to go back to the homepage, we spent a while workshopping this.
Medium Fidelity Prototype
After we figured out what we wanted to change about our designs, we then created a interactive prototype using Figma. We had some difficulty with the drop down menus when using this interactive prototype, so only some functionality actually works. We wanted the drop down menus to push the other content down, rather than cover it, but the only way we could find to do that was by essentially making a new page, with the push down hard coded in for each example. This quickly becomes unfeasible to create a completely working prototype, for example the major/minor requirement page would need to have 1024 different pages to actually represent every state that the drop down menus could be in.
|
|