My Role : Visual Design and User Experience
BACKGROUND
SPI had built an Adobe Flash based print publishing software tool for a client several years prior. Given the state of Flash today, the client contracted SPI again to rebuild the software using the latest web technologies in order to future-proof it. SPI sought design and development help from Retronyms on this rather large project.
DESIGN ANALYSIS
I started off by conducting a thorough design review of the software. The existing visual style was very fitting of the era that it was built in; skeuomorphic, glossy buttons, etc but it feels very out of place today. Moreover, the user experience was clunky and cumbersome in many areas. My review actually turned into a multi-page report that suggested improvements in Layout, Visual Improvements, Responsiveness, User Experience, and Information Architecture.
A few snippets from that report are shown below.
While the majority of my suggestions were approved, a few were rejected by the main client. They feared the rejected ones would be too radical for their customers and that it would be too much of a customer service effort to educate and support those new changes. Utilizing this initial round of feedback, I got to work on a design refresh that incorporated the improvements to both user experience and brought a more modern visual style to the app. This initial design was quite forward in that it proposed significant changes to styling and layout.
A few more rounds of feedback later, we settled on a design that was not too radical but still a marked improvement over the existing one. This design style also felt more inline with the rest of the portal that this tool resided in.
One of the other big improvements that I was able to bring to this redesign was an all new image asset upload and tagging flow. The existing setup was a cumbersome multi-step process where the user had to manually select the files from the file browser to be put into an upload queue, then manually start upload, wait for the upload to finish, select the destination category and then tag the images. I was able to streamline this process into a much simpler one-step process where users could simply drag the files onto the window and tag the files as the assets are being uploaded automatically.
