Shape brain Slice 1Created with Sketch. Slice 1Created with Sketch. Slice 1Created with Sketch. menu 1433522600_bubble + 1433522600_bubble copy Thumbs up icon 15

Designing for Asset Bank

Written on: Sept. 30, 2015

From idea to wireframe to design to build.

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.

The old login panel with hero imagefig1. The old login panel with hero image

Stage 1. Inspiration

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.

Top left to bottom right: Dropbox, Vimeo, Twitter and Google login panelsfig2. Top left to bottom right: Dropbox, Vimeo, Twitter and Google login panels

Stage 2. Wireframing

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.

Some first draft wireframes for improving the login panelfig3. Some first draft wireframes for improving the login panel

Stage 3. Design

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.

Photoshop mockups of the login pagefig4. 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.

Stage 4. Build

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).

Our finished login pagefig5. Our finished login page

Written by