Prototype Screens-01.png

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.

Web 1920 – 1.png
Web 1920 – 2.png
Web 1920 – 3.png
Web 1920 – 4.png
 

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.