CASE STUDY
Zmags Creator Refresh
UX / Design / Development
UX / Design / Development
Redesign and reskin application to align with company branding. Use this opportunity to re-organize the app, enhance existing components, and add significant new features.
Before tackling the reskin piece of this massive project, I did many rudimentary wireframes and user flows for different areas of the application. Taking customer feedback from my team, I went about adding and enhancing features. They ranged in size and scope, and included things like:
The company had settled on a branding, but it was time to bring that into the app. I used the company's primary purple in the header and many of the widgets, like buttons and switches.
The secondary colors of blue and pink lent themselves perfectly as accents to visually separate the two sidebars of the work area. This gave the whole editor a visual hierarchy and a better feeling of organization.
#8C01FF
#EA1F59
#00ABFF
#000000
Web app detail
Web app contextual sidebar
Once the design felt right, I worked with our development team for some of the heavy lifting of significant functionality changes and did all the CSS styling myself. In conjunction with this, I redesigned and developed the Creator help community to follow suit.
The resulting app not only looks more professional, but actually is more professional. The features added help designers work more efficiently. New and experienced users have an easier time navigating the app, and if they get stumped there are several avenues of help that they can access seamlessly. This well-received overhaul was a milestone in the history of the product and I'm very proud of my role on it.
Before
After
Copyright © 2023 VisionSpark and Bill Kalpakoglou. All rights reserved.