UX Library Redesign
A 1st place redesign awarded to my team and me at the UX Hackathon hosted by DubsTech at the University of Washington. Our goal was to redesign the UX Design Library website to maintain majority of the current information, while keeping the site looking sleek, comprehensible, and accessible for everyone with or without knowledge of UX/UI design.
Overview
Timeframe: 8 Hours
Role: Team Leader/Facilitator/UI Designer
Tools: Figma / InVision / Illustrator
Team Members: Danny Truong, Jose Santos, Jaysen Edwards, Peachyapa Saengcharoentrakul
The Problem
The UX library possesses a variety of flaws regarding the layout, navigation, and display of information on the website.
The current layout is counterintuitive for users as the information architecture does not effectively guide them throughout the site.
Our goal is to redesign the UX Design Library website in reconstructing its architecture of information along with maintaining majority of the current information while keeping the site looking sleek and accessible for everyone with or without knowledge of UX/UI Design.
Heuristic Analysis
To create a better approach in our redesign, we browsed the website and highlighted significant aspects in the layout of the site that we believe could be improved. Some notable flaws we wanted to highlight were:
- Confusing structure of header and menu bar on the
left side of the website
- Content seems to be divided into too many different sections
User Persona
We created a persona to gain a better understanding of the background of our intended audience; undergrad students looking to explore further resources within their local college UX community, or students just looking to get their start in this field.
Wireframes/Iterations
We constructed and iterated wireframes with the idea of creating a layout that is easily comprehensible. As a result, this would help guide the user to go about our redesign with ease and a better understanding of how information is constructed.
Design System
We decided to maintain the same color of yellow, but alter it to a slightly different shade to help increase the contrast alongside the black text. Furthermore, the detailed icons and sleek text helps give way to the minimal aesthetic style that we were aiming for.
User Flows
Simplicity is the best way to guide users so that they can best comprehend their way of navigation on the site. This led us to go through all of our content and figure out its respective category of information, thus it came down to dividing all of the content on the site to three main pillars: Software, Resources, and Careers. We curated these redesigned frames in order to bring something fresh to the table along with maintaining the same amount of information and integrity derived from the original website.
Reflection
This project helped enhance my quick thinking skills as well as iterating and approaching the problem within a limited time window. Furthermore, it helped push myself as a leader in facilitating that each member of the team is making considerable progress. Being cooperative every step of the way is critical in making sure everyone’s contributions merges well with one another. In addition, this project helped solidify my collaboration skills on Figma alongside pitching an idea to professionals. I was glad to effectively show off our project to professional designers from Amazon and those working on the Alexa mobile app.
