At Bright Interactive we are always looking for new ways to improve Asset Bank (our Digital Asset Management software solution) and keep it up-to-date. This can take many forms: adding a new feature, enhancing existing functionality or simply refreshing existing areas with a new design. Like any application, Asset Bank has evolved since its inception; favouring larger screens, rich user-driven content, intuitive UX, and scaling to fit any screen or device. All a far cry from its humble beginnings 10 years ago. As we have enhanced Asset Bank with each release, some areas have fallen behind in both their design and visual impact. During our planning meetings one of these areas was frequently brought up and we decided to invest some time in updating it. The area in question was the login and registration page of Asset Bank; arguably a very key page as it’s often the first page a user will see when viewing an Asset Bank, and first impressions count. It quickly became obvious that we needed to give this page some much needed love.
fig1. The old login panel with hero image
We started out by looking at login pages from other companies for inspiration (see fig.2). Both Vimeo and Twitter favoured large background ‘hero’ images whilst Dropbox and Google preferred a cleaner white space approach. They all have very minimal forms with large inputs and buttons with signup and register links.
fig2. Top left to bottom right: Dropbox, Vimeo, Twitter and Google login panels
After gaining some inspiration, the next part of the design process was to do some wireframing and mockups. By creating wireframes (see fig.3) using tools like Balsamiq, we can get a rough draft visual of how a page or piece of functionality will look before we start building it. This often focuses the design on areas we otherwise would have missed during implementation.
fig3. Some first draft wireframes for improving the login panel
Once the the wireframing stage is complete and approved by the Asset Bank team, we then make a choice to either go ahead and build it immediately or carry out further design work to flesh out the wireframe into a fully designed mockup. These design mockups aren’t always needed for smaller changes (a simple form tweak) or for areas where we have a lot of existing styles in Asset Bank to draw from. However for a change as important and visual as the login screen it's extremely beneficial to have a few options presented to the team and narrow them down until we get something everyone agrees on and, more importantly, loves. It’s also useful in determining whether we were on point with our wireframing; sometimes a designed mockup of a wireframe can make or break an idea.
fig4. Photoshop mockups of the login page
As you can see, we went through several iterations using elements from all wireframes, to come up with the first previews of how our new login page could look. These mockups are shared around the Asset Bank team and are available for the rest of Bright Interactive to provide feedback on. Everyone’s feedback is valuable and helps contribute to the final design. It’s often the case that the final design will introduce new ideas and borrow subtle elements from each mockup.
This is the final stage where we implement the design into the next release of Asset Bank. Often the people involved in the design are part of the team implementing it, allowing them to be involved throughout the entire process. After the build is complete and thoroughly tested the final step is to release it out to our users. The result is a more refined and up-to-date login page as seen below in (fig 5). This was released in our Asset Bank March 2015 update (Release: 3.1629).
fig5. Our finished login page
Occasionally, as is the case with The National Archives, we get to work with clients across both sides of our business. In addition to custom web software development, Bright Interactive is also the company behind Asset Bank, industry leading Digital A...Continue reading... Dec. 16, 2015
Each of the speakers present demonstrated a real love for type, each brought their own case studies and demonstrations of effective uses of type on the web or in print. Here are just some samples of the useful and interesting things I picked up on from...Continue reading... Nov. 16, 2015
Last year, Mark Otto from Github wrote a popular blog post on how they go about architecting their CSS. Inspired by this spirit of knowledge sharing, other designers and engineers have since followed suit, including Mark Aparicio at Groupon, Brian Lovi...Continue reading... Nov. 5, 2015
Early one morning over the summer I joined an Institute of Directors roundtable discussion in London. These are my thoughts on exit strategies, self-managed teams and how to eat breakfast while being filmed (best advice: don't!)Continue reading... Oct. 19, 2015