
My Role
UX designer and developer
Team
Individual project, with feedback and requirement from professor
Responsive Website Design and Develop
Tools
Adobe XD, HTML, CSS, Bootstrap, JavaScript
Project Time
Sep 2019 - Present
Overview
This project is a responsive website creation from designing to developing, with the objective raising the brand image of my professor and helping his potential students and collaborators to know more and better about him.
Challenges
Delivering design ideas to the actual functional website
Outcome
An online responsive website
01.Problem
Objective: Define problems should be solved in design process
Detail: Conversation
Understanding the motivation of this project is crucial for further steps. According to my professor's requirements, he was expecting something clear, concise, but well-organized with design. Most importantly, this website should be responsive. The following are main requests of him:
-
Clean design
-
Easy to maintain
-
Responsive
02.Research
Objective: Research online to explore design that meets the needs
Detail: Online research for best practice
Bootstrap:
At this point, I had to find some design that can meet the needs of my professor. Meanwhile, the design can be applied in the developing stage. I learned Bootstrap which can build responsive, mobile-first projects on the web with the world's most popular front-end component library. It is also an open source toolkit for developing with HTML, CSS, and JS. I absorbed some components that are essential to a website but easy to maintain in the future.
-
Navs - Clear navigation can lead viewers to go anywhere they want
-
Card - Card is a powerful display option for headers and footers and a wide variety of content.
-
Carousel - Carousel is a slideshow for cycling through a series of content, it's a optimal way for advertising
03.Wireframing
Objective: Present current design decision for feedback
Detail: Idea Generation
Using initial sketches in Adobe XD to present my current concepts to my professor. Demonstrating how proposed design meets those requirements.




04.Developling
Objective: Develop design by coding with HTML, CSS, Bootstrap, JS
Detail: Iterative Design
This is a long process, I met with my professor weekly and delivered my design iteratively, got feedback and made improvement continuously. Finally, the approved version launched at the end of 2019. Click the button below to the live website.
05.Reflection
Objective: What I learned from this project
-
Work as a designer, but consider all stakeholders' interests. In this project, I worked as designer and developer in the same time. I couldn't proposed some complicated user interface or interaction design because it would increase the cost of development.
-
Enjoy working iteratively. I know sometimes iterative work would be frustrating, but I think it is do better than delivering the whole project. Learning from others' opinions can refine design ideas and save time.