Federal Reserve Bank of Boston
Financial
Design the mobile experience for the new and upcoming website
6 Months
Back in 2016, the Boston Fed was fully redesigning their entire website and brand. In March of 2016 I was brought in to help with finish the project. Turn the desktop designs into responsive mobile designs, keep brand standards, design a full set of new iconography that will be used in navigations, pages, and print, and design responsive graphs that will keep brand identity and to be used on the web and print for presentations.
One of the first thing I did was to gather desktop designs.
Next was to explore the hierarchy of elements. Each page may have different hierarchy. This tells the views what's the first thing they should read or look at, then second, then third and so on. It's easier on desktop to have everything show because of the large screen, but on mobile and its compact screen, elements have to be stacked one on top of th other. This practice will also show what kind of responsive design they will be,
All of these designs were send to be approved by the lead UX UI Designer.
After gathering designs and mocking them into mobile, all design were then presented to the Lead Designer. Multiple options were presented to make sure the lead likes one of them. These ensured proficiency and accuracy in brand identity.
In many cases you can never go wrong in mobile design, usually everything stacks on top of another. But there are cases where the desktop design is unique that you want to preserve that experience in mobile and just design won't cut it. It's important to always bring a developer during testing and feedback to ensure that what your designing can be developed within the given time frame.
Besides looking at the overall page, its best to make designs for already used components.
Having respsive components will make it easier for future designs and to be cohesive across the website. This speeds up the process of thinking and designing a responsive component over and over again.
Another mayor component to have responsive, specially if it's complex like the Fed's, is the main site navigation.
The Federal Reserve went with a great style, mega navigation. This type of navigations let content managers input more information on the navigation instead of just links to other pages. Many sites can put images context and links. But to make this a success, the same experience has to be on desktop user and on mobile users.
Once having all mayor components responsive, it time to input real world content.
All designs at this point have dummy content, just to focus on design. Now using real content, we can test my designs to make sure structures look good with different size content. This ensures that no matter the content that gets inputed in the future, the design will maintain perfect design.
The same process I use for the other pages of the site.
Using the desktop designs, design mobile first making sure the hierarchy is in place, then design tablet to make sure that tablet is in the middle of the responsive design between desktop and mobile.
Besides designing the responsive pages, I was hired to design iconography.
This iconography had to be pixel perfect. It also had to be design to be used for the web, in the navigation, pages, in print, presentations, online documents, emails and more. This new iconography was going to set the standard of the Fed future brand.
