The challenge my team and I we face with was a redesign of The U.S. Department of Education’s Website. This website is currently designed in a very confusing and not visually stimulating layout.
Both the user interface and the information architecture need a revamp.After evaluating the website further using heuristic evaluation an annotation of our main pages we determined the key problems we need to fix in the redesign:
• Reorder the information in a more intuitive way
• A less “cold” brand design
• Eliminate un-need pages for a more streamline feel
Responsibilities: Information Architect, Brand Designer, UI Designer
Time: 2 Week Sprint Structure
Heuristic Evaluation & Annotation
The navigation of this website is overwhelming to say the least. Each category has at least 10 links, and most of the time more. Now, there is nothing wrong with links but the information architecture proves to be too confusing for most users. A few key problems users encountered are:
- Some of the links go to the exact same website, which not only wastes designable space but also confuses the user because they are unsure which links to use for any given task that they need to accomplish.
- The organization of the links is very confusing. The users don’t know where to look to complete their task and often rely on the search bar.
- There are hardly any bread crumbs, and the ones that do exist don’t really give you a good idea of where you’ve been and how you got there.
See initial site evaluation components below:
After the initial evaluation, my team and I made a list of all of the important features and categorized then in a prioritization matrix. Our findings were that much of the website’s text was too small and too abundant. There was not much of a visual hierarchy so it felt very overwhelming.
In the process of testing and annotating the current site, my team also designed user persona to influence the way the site needs to be redesigned. We had David Wright, a dad who is looking for potential loans for his oldest daughter, and Susie Banks, a mother who is looking for way that the education system can help her special need son.
Card Sorting this website was particularly difficult due to the massive amount of information presented and also the confusing way in which it was initially organized. The challenge was to organize all of the information is a way that made sense to our users, which meant adding indication of which page you are on and how you got there and also, creating a streamline navigation system so that you don’t click on one section and end up in another.
The information was then organized into a site map. I made the decision to not include a dropdown menu at the top both because of the complexity of the site and the fact most of the links took you to an external site.
Lo-FI Wire Frames
After outlining our key points
The Visual Design
We created mood boards in order to gather inspiration to match the feeling of education. We saved many different ideas on our Mood Board including site designs that reflects a modern look that emitted a sense of quality and organization. Using a Style Tile, we collected all of the visual data based on the general feeling of the site, user data, and general feel of the site. One of my main responsibilities was creating the visual design.
Typography: Palatino (a Serifed font)and Print Bold (a display font) were used because we were looking for combination of clean and whimsical. I choose these font in order to generate a fun child-like feeling while looking professional at the same time.
Colors: The main two colors I used were a Bright Green and Teal Blue, keeping the color palette cool and calming. The bright colors are balanced by darkest grey, navy blue and bright white.
Imagery: The main terms I used to determine the site’s imagery was happy students, helpful teachers and diversity. Every image must reflect these terms in order to keep the site bright and uniform.