Computer Systems Genome Redesign
Summary
Computer Systems Genome is a student-led research group at Virginia Tech focusing on making information about computer systems, super computers, and processors more accessible and open to crowd-sourcing.Â
As newly appointed Design Lead for this group, I undertook a significant redesign of our current website. This includes an updated color scheme, adjusting dynamically for mobile view, and the implementation of a design system from the ground up that will allow us to be more consistent in both our development and design of new components.
So far, the redesign of the homepage is complete. We are still working on integrating the theme and consistent components throughout the other pages of the website.
Check out the redesign so far here!
Why?
The previous version of our website (see right) lacks visual interest in our landing page and does not explain our mission as a research group clearly. As of right now, our website seems somewhat outdated and lacks cohesion, as well as not sticking to a strictly light or dark theme.
In addition to this, our current wireframe is very inaccurate to the state of our website currently in production and does not utilize components to reflect components in our codebase.
We also lack a resource that consolidates wireframes, interactive prototypes, components, color theme, use case scenarios, and code snippets for proper usage.
This lack of consistency and organization in our design has led to bugs in our code where students have hardcoded color values, spacing, and more because they do not have a resource to reference for proper usage.
So we need a design system! And while we're at it, I decide to give the website a refresh with a new color scheme and some minor formatting updates.
Our website, currently in production
Some Iterations of New Color Scheme (in Figma)
This design seemed a little too bright, and we didn't have a reason to justify switching from blue/purple to green and teal.
We liked the bright colors and dark purple in this design, but the intense bright pink made contrast with the white text a little hard on the eyes. Pink also didn't really resonate with our group's purpose other than blending well with the purple.
This design pulled together all of the things our group liked about the other designs, including high contrast and incorporating the dark purple already existing on our page as well as maroon/orange colors for Virginia Tech school spirit.
MVP
After a few iterations on this design and some user testing of my peers on my research group, I determined that this wireframe best reflects what our team will be able to accomplish as our minimum viable product before undertaking any serious formatting changes.
Final Product
This design is the end goal for our redesign after user testing and iteration. We aim to utilize the gradient throughout the background of our landing page to encourage scrolling and provide a sense of cohesion.