Hey, I’m Jane Mengtian Zhang, a UX / interaction designer based in SF bay area. I strive to create effective and elegant designs.
I enjoy my daily doodles and mind-drifting in my design space, and perhaps a bit of coding, whenever necessary :) Feel free to check on my projects or drop me a message.
Thanks for stopping by!
As a team of four, we redesigned and developed the UMich ROTC website in Fall 2014. As the leading visual designer and a front-end developer on the team, I was responsible of designing, styling, testing, and finally making the site come to life. The final site has a consistent visual style, developed with considerations in accessibility, and general comfort of use.
Our website sucks, as everyone agrees...
Web design trends evolve fast and almost appear transient . A website that seems decent three years ago quickly turns out-of-date as users acquire new taste and get comfortable with new technology constraints. While it is exciting to redesign a website for an organization and experiment with shiny new tech we are taught at school, it is important to keep in mind that we as designers are always within context of the trend, and that certain principles and considerations in web design is almost always important, yet surprisingly easy to neglect as we are pushed forward in the current of technology.
Sketching
Wireframing
Developing
What makes a website suck? User may have criticism in mind when the site is hard to browse, presents a visual style from the last century, or most likely, when they find it inefficient to get the information they need. As the first step for out project, we did several brainstorm sessions to analyse our major goals on the possible usability and user experience improvement to the current ROTC site:
Good web design inevitably starts from random sketches on a notebook. After a few quick sketches exercise, I put together a set of Balsamiq wireframes to share my general ideas on site structure and early ideas about responsive design with my team. The early communication on site structure helped to keep our teammates' design understanding on the same page.
Once the team have a clar idea of the information structure of the new site, I started to work on the general visual style of the site. With some work on my notebook and in Photoshop, I came up with a visual system that includes color palette and layout guidance and shared it with my team for feedback and further improvements.
To keep the website visually consistent throughout developmebnt process, I created and maintained a set of CSS template and responsive framework based on bootstrap as a shared foundation for our team. This was the first attempt for me to individually work on Media Queries and customizing window resize break points, which significantly improved my understanding of responsive web design as part of my full-stack web design experience.
In later part of our development process, I ran style check on our team's updates constantly to make sure the style and identity are in sync. The actual process required detailed work and actual coding, accompanied with seamless communication with team members.
With our development work and style sync coming to an end, our team had a final test on site accessibility, making sure all the enssential info in our website could be accessed effortlessly in mouse-free environment and work well with screen readers. We value this detailed work in accessibility, and take it as a necessity to create an outstanding web design.
We presented the test site to student groups, gained feedback from live testing, and did our final modifications and fine-tuning before the website was finally launched in winter 2014. Please feel free to check our our test Site or the live UMich ROTC website that is still in use.
Thanks for dropping by this small project! :)
