A Device-ive Design : Design Sprint #1
For all of the talk that I have done about redesigning the computer science website, I finally had a chance to show off ideas in my Human Computer Interaction class this past week. During our “Design for Dimensions” Sprint, I worked with four of my classmates to take 1 website and redesign 2 pages across 3 devices. The website we chose to work with was Emory’s Computer Science Department website. We redesigned the home page and the undergraduate page. We designed these pages for an apple watch, a laptop, and a larger Microsoft Hub table.
Our final designs were created through the design web-app Figma. Figma excels in creating clear templates by providing a workspace with an extensive range of functions, many different shapes, adding interactions to different components, and saving previous works.
I worked with my classmates Debbie, Mei, Michael, and Naman. Debbie and Mei took charge of the laptop screens while Michael and Naman took care of the Hub screens.
Our main goal was to redesign the Computer Science Website with prospective students in mind.
This article will explore our complete design process, which includes:
- Creating a mood board
- Paper sketches and paper prototypes
- Interviews for evaluating the paper prototypes
- Oodles of drawings and sketches
- Complete Figma designs across all pages and devices
- Challenges I ran into throughout the Figma design process
- A conclusion and reflection
Creating a Mood Board
If you have never designed something from scratch before, you may be wondering: Where do you start? How do you organize all of the pieces? I want a sandwich.
Well, I’m glad you asked. We need to put something together called a mood board. Think of a mood board like a charcuterie board: it’s a set of deconstruction of items you would put on your sandwich with a couple of extra pieces that are not essential but nice to have. We assemble our design “sandwich”, from what we put onto our mood “charcuterie” board.
Our mood board incorporates not only inspirations from existing websites from each of the respective devices but also our likes and dislikes about the department home page and undergraduate page, colors and styles we want to use, and priorities on the information included.
Paper Sketching and Prototyping
Again? Yep! If you’ve read my latest article on Patient Chart design, you’ll be familiar with the process of paper prototyping, and how essential it is to the design process. If you are unfamiliar, paper prototyping is the process of creating a product or design on paper before making it with a more sophisticated form of technology. This way the designer can have a much clearer vision when hoping onto a computer and hacking away at it.
So, the next step after gathering our mood board was to split up to draw sketches. With so much information already present on Emory’s Computer Science website, we had to decide what information was essential. What would potential Emory students, and/or potential computer science students, look for when they get to our website? Here is what we came up with:
After this was set, each member drew sketches for their respective device, as mentioned above. I took care of all sketches related to designing the Computer Science website on an Apple Watch.
The Large Screen
The initial set of pictures can be seen below.
After these designs were evaluated through a series of interviews, here is the final design that Naman and Michael came up with:
The Laptop
Similar to the above process for the large screen, Debbie and Mei came up with initial and final paper prototypes for viewing the home and undergraduate pages of the Emory Computer Science department on a laptop.
And the final designs we decided for the laptop would look like this:
The Apple Watch
The following are the sketches that I made:
The thought process behind these sketches was to minimize text, to maximize information distributed on each section, and to restrict myself to swiping and tapping interactions. Apple Watches have very tiny screens, and thus all of my sketches aim to be read by 2 eyes and navigated by 1 finger.
Similarly, our entire group tried their best to design their respective pages with the users’ interactions in mind! Different screens call for different types of interaction, and I think we captured this very well.
The Interviews on the Paper Prototypes
Before turning our paper sketches into a digital prototype on Figma, we thought it was a good idea to go out and interview a handful of students to get their feedback on our initial designs. Even though other students do not fit our desired demographic of perspective students, we still know that some feedback is better than no feedback.
I interviewed people on the Apple Watch paper designs that I came up with, as you have just seen. Of the four interviews with my classmates, one was a computer science major, and three were non-computer science majors. The computer science major provided insight on what potential computer science majors would look for, and the non-computer science majors ended up giving me feedback on the usage and design itself. In the end everything balanced out. It should also be noted that not all of the interviewees on an Apple Watch, so they may have been slightly unfamiliar with how to provide constructive feedback on Apple Watch design.
The following is the physical paper prototype I showed my interviewees:
Three of these interviews were conducted over FaceTime. This was not intentional at first but it may have been a benefit in the sense that the small screen with already give the interview a feeling of the size of an Apple Watch interface. During the FaceTime interviews, I followed the instructions of the interviee on which ways they wanted to swipe or which buttons they wanted to click on. I also guided them if they were confused. The main piece of the paper prototype is that the boarder can be moved over each individual frame, isolating them so that a user can focus on just one page at a time.
The major takeaways from the interviews are:
- On the home page, the apply button and find your classmates sections are engaging, but could be more visually appealing and have a clearer functionality.
- On the undergraduate page, the section for department stats is too cluttered, and it is hard to distinguish between why they are looking at undergraduate stats when they just saw overall department stats on the home page.
- Overall, the interactive ability is very smooth, and the pages would be engaging if a perspective Emory Computer Science student was looking at them.
Below you can also find my full notes from each interview on our Figma Jam Board:
Figma Designs and Interactions: It’s Here!
The Apple Watch
After meeting with my classmates once again to check in, I was finally ready to create the new and hopefully improved Emory Computer Science website on an Apple Watch. First I worked on the seven sections of the home page, then I worked on the three sections of the undergraduate page.
To get to and from each of the sections on each page, all users have to do is swipe in the opposite direction of the way they want to go. When buttons were involved, a simple click sufficed. It is possible to switch between the home and undergraduate pages by clicking either the home button or the graduation cap with a “U” on the top navigation bar.
After coming up with each of the main sections for each page, I branched out and created a few extra interactions with the time I had left. These interactions include holding over each alumni to pull up their stories on the home page, and the extensions to the first and third sections of the undergraduate page.
In the left picture above, users can hold down on the pictures of the alumni to reveal their corresponding stories in the empty section in the middle of that page. In the right picture, users can click buttons on the pages in the first row to get to the pages in the second and third rows.
The Laptop
While I was building the Apple Watch designs, Debbie and Mei were hard at work creating these awesome mock-ups for the Emory Computer Science Department on a laptop.
As you might be able to start noticing, we all tried to follow the same patterns in terms of our information hierarchy and presentation, but they differ in their modes of access to the user on the specific device. Since the laptop size is standard to just about every user we want to reach, we wanted to let them access the information in ways that were not overwhelming. In other words, let the user scroll and limit information to what they can reach on any given section throughout the scroll. Additionally, they created sections with different backgrounds to break up the flow of the reading and make information more distinguishable from text and images above and below the current section.
The Hub Screen
Last but not least, let’s look at our largest screen design, the Hub Screen. Michael and Naman put a lot of thought and effort into these pages, and I think they are pretty cool. Here’s what they did for the home page:
Given how the Hub screen is much larger than the laptop, Michael and Naman split the screen into three main subdivisions, and sometimes in half in each subdivision. If a user had to scroll on a Hub tablet, there would be too much information to process all at once.
If you were a prospective student, how much information do you really want to see? Or take in all at once?
Similarly, the undergraduate section is also split into thirds vertically. All of the information from the previous two devices undergraduate pages are here, but a bit more spread out, like so:
So Many Bumps in the Road…
This was my first time really diving into Figma. Creating screens, designing visually appealing interfaces, and creating interactions between all of the different components was a bit overwhelming at first.
Personally, my main challenges on the Apple Watch designs stemmed from the spacing of each box relative to every other piece of the page, and the section/subsection interactions such as buttons, scrolls and clicks.
I like to pay attention to detail, but I think this got the better of me on this project because of how long I spent looking at the number of pixels between each box and the margins of the Apple Watch screen, or how far apart each box is from the one above or below it, or other semantics of this nature. Spacing is important, but it was probably more important to focus on the content of each page for this project, which I did eventually.
I think I tried to put the cart before the horse when creating interactions for the Apple Watch. I tried to make everything very professional by looking up strategies that professionals use, but in the process I missed the basics and things started to break. Interactions via clicking started to not work, and I had no idea how to fix this. I even spoke to the teachers assistant after presenting our design in class, and he had trouble determining where the error was as well. I definitely learned my lesson here to start small, such as creating one interaction at a time or one click at a time, and then slowly piercing it together instead of doing it all at once.
Conclusion and Reflection
Conclusion
As a group of third- and fourth-year computer science students at Emory University, we already had a strong familiarity with the website we were trying to redesign. That is why we were drawn so much to this option when starting our work. Also as Emory students we feel as though it is our duty to try to help those who follow in our footsteps. This includes giving them more immersive and interactive experiences and ways to learn about their true potential. Through the process of putting our thoughts onto a mood board, sketching some designs, sketching the full paper prototype, interviewing other students and finally designing the new looks on Figma, we have been able to reimagine Emory’s Computer Science website on an Apple Watch, a laptop, and a larger Hub screen.
Even now, the department website shows up the same no matter which device a user views it on. But we should be giving users a thoughtful experience by catering to each of their devices and the needs that come along with them.
We believe that through the information hierarchy we established, prospective students will continuously stay engaged while absorbing more information about the department in less time than the current site. That was our goal. Each device will come with its own set of unique interactions, and I think our entire group reflected this well in our design process and implementation.
Reflection
Would each of these devices be effective at communicating information about the Emory computer science department to prospective students? Are we presenting the right amount and types of information in our designs? I would say that the answer is yes, but I would still want to ask prospective students to hear their thoughts. Throughout this entire design process, I definitely learn how to work with a team when our time resource is very limited, and the very beginnings and basics of Figma which I will be using more than I can imagine in the following weeks.
I really appreciated learning design tips and tricks from each of my group members, and I hope I was able to provide them as much help as they gave me. For our next human computer interaction group project, I’m going to focus more on creating components efficiently, and having a clearer map of interactions before I put the entire product together. Learning all of the smaller details on Figma will take more time, but I believe this will come with more experience through our upcoming projects as well. Stay tuned to read more very soon!
Thank you for reaching the end and reading this article! I hope you were able to gain some insights on how some of Emory’s Computer Science students think about our department’s pages, and have learned more about design tools such as Figma in the process.
Want to check it out for yourself?
Follow these links!
