The Initial Pain Points
Upon entering MDPN, I was quick to notice dense information stored across the site in a disorganized fashion.
Having two closely related concepts as different navigation options was a common issue in the site. For example, we had the Governance section, then the Members section, and then the Membership section, which had an unclear distinction. On top of this, hyperlinks were used far too often in almost every sentence, which was overwhelming.
Altogether, the navigation needed a change, and we needed to give the site some brevity.
Information Architecture
It was clear that the team was struggling to stuff all of the information for users to know about, and it is understandable considering the amount of information on the site. To address this issue, I myself needed to backtrack and deeply research new ways to organize.
The information architecture map shown below was first created before continuing design.
Wireframe
Then, I sketched and designed a mock-up navigation bar that fully captured all of the information in the least stressful way possible. After researching and reviewing the core aspects of website navigation, I found myself inspired by the Oscar.com website, and utilized it’s hierarchical menu design. After this, each page was drafted in a low-fidelity form.
You may find the full wireframe below.
Wireframe (Independent Work)
Team and Self-Contribution
After all three wireframes were sent and then given feedback from the clients, we worked together to create a full prototype that cleanly combines all three wireframes' most liked features.
Since the clients preferred my Resources and About page structure, I was tasked to complete those two high-fidelity pages alone. In addition to this, I designed all graphics to be used throughout the prototype.
Below, you may find the full high-fidelity prototype.
High Fidelity (Team Collaboration)
Outcome and Reflection
Although I had teamed up with many designers before, this was my first design done directly for a real-life client. Communicating directly with a non-designers helped me learn more about the general customer's view of design, and taught me how to balance their own preferences with a concise, accessible re-design.
In addition, due to the overwhelming amount of information this site holds, it was indeed a great challenge to learn the correct way to face the information, and then organize it. Referencing, sketching, and reiterating older ideas took most of the time for this project.
By the end, I have created a wireframe that had much of it's features implemented to the final prototype; Including the website text formatting, the Resource and About page, and the footer. In addition, I designed graphics across the website to help add visual spirit, as well as keep the users from losing interest.