× 01. home — 02. projects 03. about 04. contact

    ☰    navigation

⟵ back to all projects

responsive web design

∙ web + content management system development

∙ summer 2020

overview

From May to July 2020, I had the opportunity to work with the McLearn Lab (Human-Computer Interaction Institute at Carnegie Mellon University) to design and develop a responsive lab website featuring the lab's projects, members, publications, and news. To manage the large amount of data on the site, I also created a content management system (CMS), which can be easily navigated by those with no familiarity with web development.

The frontend of both projects were implemented entirely using Angular, with particular emphasis on implementing Angular Material.

As the only intern working on the website, most of the development and design was my responsibility. My mentor aided with backend-related aspects including building and deploying APIs storing lab data and implementing HTTP interceptors for authorization. I developed the frontend, integrated the APIs, and created the CMS.

role

front end intern

skills

TypeScript / JavaScript   ∙   HTML + CSS   ∙   responsive web design   ∙   integrating RESTful APIs

tools

Angular   ∙   Git   ∙   Postman   ∙   Jira

design conception

An abundance of independent research went into the finalized design of the website. I had key features in mind:

  • responsiveness

  • simple, modern, and professional interface

  • consistent design throughout website

  • minimize scrolling

  • fixed navigation or tabs

Along with exploring various university lab websites to understand the standard content and verbiage, as well as to note what features I liked and disliked, I created a mock website to test potential design concepts. I met with the lab members and other interns to ask for feedback before finalizing the design.

Final landing page: mobile version

Final landing page: desktop / laptop version

implementing responsiveness

As technology continues to evolve, we will continue to see the increasing necessity of designing flexible and adaptable products. Responsive web design ensures that an application will both look appealing and still be functional on various screen sizes.

Responsive tools involved in this project include

  • CSS media queries

  • Angular Material + flex layout

  • Google DevTools device mode

I designed with standard sizes of mobile phones, tablets, laptops, and desktops in mind. The experience taught me that developing for responsiveness involves hours and hours of testing, experimenting, and sometimes, completely redesigning.

content management: connecting frontend & backend

Having a CMS allows those without web dev knowledge to edit the content of websites. It's essentially a link between the frontend and backend: data is loaded from the backend to the CMS, and all changes (HTTP requests) made in the CMS are subsequently updated in the backend and synchronously reflected on the frontend of the website.

Key features of the CMS include

  • ability to edit, add, and delete content quickly

  • organized, intuitive, and easily navigable UI

  • authentication / login page to protect content

data representation

With the task of displaying data comes the challenge of deciding how to represent it. My mentor and I went through several rounds of redesigning the data objects for each page of the website. As each page had different data, each would need a distinct representation. Each time new issues arised, we realized that certain changes to the representation were necessary.

Some changes were as small as adding a new property to an object, while others were drastic and required a completely new structure — which meant the frontend would need to be redesigned also.

Trial-and-error, testing, and patience played a key role in the entire integration process.

concluding thoughts

This experience was so rewarding: I taught myself the basics of Angular, gained experience in testing and integrating RESTful APIs, familiarized myself with the state of educational technology research, read and discussed several research papers with lab members and fellow interns, and developed a functional and responsive website and CMS, all within three months. I've also vastly improved my knowledge on responsive design, which I will definitely take with me into the future.

made with ♥ by michelle zhang