UX Library Redesign
A 1st place redesign awarded to my team and I 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 - Dubstech Protothon
Timeframe
8 Hours
Tools
Figma, InVision, Illustrator
Role
Team Leader/Facilitator, Prototyping, Wireframing, UI Design, Information Architecture
Team
Jose Santos, Jaysen Edwards, Danny Truong, Peach Saengcharoentrakul
Our 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 doesn’t 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
Projected Improvements
To create a better approach in our redesign, we browsed the website and highlighted significant aspects in the layout, structure, and flow of the current design 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, this left us to ultimately divide all the content presented on the site to three main categories: Software, Resources, and Career.
User Personas
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.
User Flow
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
Style Guide
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.
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.