DS1 Design for Dimensions
We were asked to build on the skills from Health Design Assignment, and to re design one of the three websites (Emory’s Computer Science Website, Dave’s Cosmic Subs Website, or Atlanta’s Fox Theater Website ). Our group ended up choosing Emory’s Computer Science Website. One main reason was because, we have some familiarity with Emory’s Computer Science website and also that It’d be easy to find Emory students to interview, and we thought it made more sense.
Introduction/Summary:
This post goes through the interview process, the information collected, and incorporating them into the design, creating empathy maps, figuring out what’s important for different screen sizes, and then sketching the final sketches from all the information above, ending with figma prototypes for Emory CS website.
Initial Plan
We wanted to re design the website for the user group who are considering taking CS courses, or someone who wants to change their major to CS, and to know what we should keep in mind while re designing the Emory’s Computer Science Website. We decided to each interview an Emory student, and from that interview we initially draw our sketches, come together, and make the final prototype.
My Interview Participants
Chimamanda Ngozi Adichie in her talk, “The danger of a single story” mentions how important it is to have multiple stories to help shape our understanding of something in life, If we allowed ourselves to hear, experience different stories in life, and not just seeing things from a single point of view, the story we’re looking at becomes much more richer.
So, I decided to interview multiple Emory students who are not CS majors to get the information that I needed to draw my sketches, I went to Woodpec PE Center and started asking every student I felt was free for an interview, I was able to get 3 students (1 one of them had to leave in the middle, because she had something important that came up).
Student 1 — Environmental Science major at Emory (Not really interested in Computer Science, but heard a lot about Python from his friends, and wants to learn it, Senior).
Student 2 — Physics major at Emory (Not really interested in Computer Science, only considering taking CS courses because it would help with his major, Sophomore).
Student 3 — Also a Physics major at Emory (Interested in Computer Science, considering taking more courses in the CS, Sophomore).
My Questions format for the Interview:
A little introduction about themselves ………………………………………
What is your major at Emory, and what year are you at Emory?
Do you usually visit your department’s website from time to time?
If so, for what reasons do you specifically visit your department’s website?
Do you have anything that you especially like, or dislike about your department’s website?
How easy is it for you to find the information that you’re looking for on your department’s website?
If you found any accidental errors, or misinformation on the Website, does the website have good way to communicate those errors to the department?
Can you navigate the CS department’s website real quick for me?
Do you find any similarities between CS department’s website, and your department’s website?
Are there any things you liked, or disliked in particular?
What pieces of information did you want to search for in the first place when you were on the CS department’s website?
Inferences from my Interviews:
The following are the important inferences that I was able to draw from the interviews I had with the above mentioned students:
Not a lot of students (at least from my observation) visit their department’s website more often, or from time to time.
The most common reason a student visits their department’s website is when they need to know about the degree requirements, and to get to know information about the courses they need, or want to enroll in.
We expect basic things to work the way they should, for example on the CS website, the image carousel doesn’t slide when we try to slide it (If we’re building things, let’s not forget to add the functionalities for which they’re built).
It would be great if the CS department had resources to help non CS majors who are either interested in taking CS courses, or considering switching their majors to CS.
Events are given least priority (at least from my observation) beacuse most students only ever visit department’s website for courses, and degree requirements.
Empathy Map combined from all the group’s interviews:
Initial Sketches:
We divided the sketches among us 5 members in the group, and I along with another student of my group were in charge of microsoft surface hub sketches.
These were the initial sketches I have drawn for the Homepage, and the guides section I wanted to re design for the microsoft surface hub.
HomePage for microsoft surface hub:
Guides for microsoft surface hub:
More HomePage for microsoft surface hub:
More Guides for microsoft surface hub:
HomePage for Laptop:
Guides for Laptop:
More HomePage for Laptop:
More Guides for Laptop:
HomePage for Smartwatch:
Guides for Smartwatch:
More Homepage and Guides for Smartwatch:
Final Sketch for HomePage of microsoft surface hub:
Search was one of the most important things a user associated when navigating through the CS website, so we made it little bigger.
The Image Carousel doesn’t slide on the Emory’s CS website, so we added the design to make it slide using arrows.
Since the surface area is big on the microsoft surface hub, we included the description of the image on the right hand side of the image in the image carousel.
The Events section got expanded out as well, and the degree requirements, guides, facilities, contacts are given their own blocks in the microsoft surface hub.
Final Sketch for Guides of microsoft surface hub:
We expanded the Guides by including the resources that might be helpful to students by including the resource, a video link related to it, and the description following what the resource is about.
The contacts, Intro Tutorials, Free resources, Intro courses got pushed to the right end of the expanded guides section.
Final Sketch for HomePage of Laptop:
The events section got pushed to the right hand side of the Image carousel, and now the events can be sorted based on the user’s preferences such as social, seminars, and opportunities.
Quick links, Degree requirements, and Guides are the first things that pop up on the left side of the screen since these were most important to the students navigating the CS website.
Home link is taken out since it was redundant on the Emory CS website (emory.cs.edu, emory.cs.edu/home both go to the same page on the Emory CS website).
Final Sketch for Guides of Laptop:
Guides now has a minimalist design where on the left side you have the important links such as contacts, Intro Tutorials, Free resources, and Intro courses, and on the right side you have description of guides along with the Intro tutorials designed to help non CS students when they’re navigating CS guides website.
Final Sketch for HomePage of Smartwatch:
Since the interface is so small on the smartwatch, the homepage just shows the most important links such as courses, people, and about along with the image carousel.
On scrolling the smartwatch, we get the quick links which contains degree requirements, guides, facilities, so on followed by events which we can sort for example by social, or seminars, or opportunities.
The search is placed on the bottom since it’s hard to search on the smartwatch and given less importance, a back to top button brings you to the top of the homepage once you reach the bottom of the homepage by scrolling.
Final Sketch for Guides of Smartwatch:
The guides also has the most important information on the top by contacts, followed by Into Tutorials, Free resources, Intro courses, and back to top button that brings us to the top of the guides.
Since the interface is small, every link is in first collapsed, it is expanded once the down arrow has been clicked by the user giving a little more information about the expanded link.
A Smartwatch design idea I had that was not considered since it’s not well formed:
Since it’s very hard to navigate on the smartwatch for any website, let alone an educational website covered with a lot of details, wouldn’t it be good to have a design so minimalist such that most interactions happen with the help of voice recognition?
We could also project the smartwatch contents on to a board?(I have no idea on how to proceed with these, and since it’s not well formed, It was not considered).
MoodBoard:
Prototype for microsoft surface hub HomePage:
Prototype for microsoft surface hub Guides:
Prototype for Laptop HomePage:
Prototype for Laptop Guides:
Prototype for Smartwatch HomePage:
Prototype for Smartwatch Guides:
Link to Figma Prototype:
Designs that I did that I couldn’t get a chance to include in Figma (because my knowledge of Figma was limited at the time of submission, and I didn’t know how to include it).
Vanishing Door:
Vanishing Door is something I designed for the quick links for microsoft surface hub, there’s two doors in the space, one with a faded surface in the back of the quick links door, once a user clicks on the quick links on the front door the front door collapses, and vanishes into thin air allowing the associated faded quick link door from the background appear.
Once the faded door appears in the foreground, clicking go quick links makes the front door collapse, vanish and go back to the background faded, and the quick links front door to appear.
Rotating Cube:
Rotating Cube is something I designed for microsoft surface hub, The cube has different types of events on different surfaces, you can rotate the cube with the help of arrows surrounding it to go through different surfaces of the cube showing different types of events.
Once expand is clicked the cube collapses, and the events associated with that surface of the cube gets expanded into the space, upon clicking the go cube once a specific event has been epanded, the expanded event collapses, and the cube comes back alive.
Eagle animated Events:
Eagle animated events is something I designed for the microsoft surface hub, the events are spread around the wings of the eagle, on clicking the specific event, the eagle unfurls and the specified event expands into a detailed form.
Once the event is expanded out, clicking the go eagle makes the eagle furl back into it’s own position giving a list of all the events along the eagle’s wings.
Conclusion:
As a group, We understood how different we need to think when we design interfaces for different screen sizes, and it was a really good design sprint.
Since I didn’t knew much about Figma during this time of my submission, I want to learn more of it so I can improve more on the design and be able to express them much better in the future.