Product Design and Redesign - an Evolving Process for Cultivate Ignite
By Jess Price on July 11, 2017
We recently launched a redesign of Ignite, our crowdfunding platform for inside organizations. As a designer, I really enjoy getting to take a look at our existing products and try to make them better. And “better” can mean a lot of things when looking to redesign a product.
Of course, there are key elements of how the product looks: the color palette, typography, imagery, etc., and Ignite now looks extremely different from its previous version. But there is also the UI of the page to consider. The structure of the page, how the end-user (in our case, a client organization's employees) will interact with it, and how it will create solutions for these users are what make a successful product. In this post, I am going to explain some of the ideas and processes that went into creating the new design for Ignite, and where I hope to see it go in the future.
Did you get a new hair cut? It looks great.
Everyone knows the feeling of getting a new hairstyle or outfit that makes you feel like a million bucks. The digital products we use benefit from similar updates. Using something that looks the same everyday and isn’t evolving with the times could make a user lose interest. So step one for the redesign of Ignite was updating the style of the product; we needed to give Ignite a makeover.
Cultivate Labs was still finding its brand presence when the previous version of Ignite was styled. Since then, the branding for Cultivate Labs was solidified so that it could have a suite of products that felt like a cohesive family. I wanted to keep the design for Ignite very clean, since our clients' Ignite sites have the potential to host multiple campaign themes and many ideas within them. I kept the background white so that the primary teal Ignite brand colors could stand on their own and lead users through the page.
We also introduced the use of texture images, created by ‘zooming in’ on sections of the Ignite logo. Having a few different texture images throughout the product design allows us to create sections that 'call out' to users and embrace our brand at the same time. We also don’t have to purchase stock photography that can quickly feel outdated or not relate to certain users. This image texture element is mostly used as a hero area throughout the site. On the new Ignite homepage, the hero section features randomly selected ideas - that have been submitted by employees to their company's private Ignite - so that all are given equal time in the spotlight.
More than just a pretty (inter)face, what does it do?
Designing for enterprise products is nothing like creating art, we cannot get by on our looks alone. So the heaviest parts of the redesign was restructuring the UI of Ignite. Because Ignite is an internal crowdfunding platform that helps organizations fund real ideas for their businesses, I wanted Ignite itself to feel more dynamic and real-time than it had in its previous version. I wanted users to see that ideas are actively being funded, that users are communicating with each other, volunteering to work on ideas, and the remaining time to fund these ideas before the campaign ends.
So, how do we make a web platform feel dynamic?
1. Highlight User Activity
An easy way that we started to restructure Ignite to feel more dynamic was by showcasing the activity of its users. In the previous version, the activity feed on the site was always near the bottom of the page and felt like an afterthought. By moving the activity panel of the site to the right column of the page and making it omnipresent, a user can always be aware of people's activity and engagement on the site. The activity panel adjusts to what page you are on so that a user can always see an up-to-date log of whatever idea, campaign, or site they are viewing.
The 'idea hero' area I mentioned earlier is another key element in the restructure of the site to show that Ignite can always be active with new ideas for our clients. Since it is always rotating through a random showcase of created ideas, users coming to the site are immediately shown that the site is active, and they may see an idea they had not noticed before.
2. Mimic Real-Life Motion for a Rewarding Experience
It seems simple, but using motion within a digital product can really change the way users interact with it. We are all used to the way things move in our normal real life scenarios, from the way an elevator button shifts and lights up when it is pushed to how a glass fills up with orange juice. By bringing in some digital elements that interact with users in a similar way to real-life interactions, it makes any digital platform feel more familiar and satisfying.
Since the main goal of Ignite is for employees to fund real ideas and projects for their organizations, I wanted the progress of an idea’s funding to be clear to all users. On the previous version of Ignite, we had small bar graphs that showed how much funding the idea currently had. For the redesign I changed these graphs to circles, I thought it was easier to see how much of the circle was filled and that we could add in an animation to make it even more clear how much funding an idea currently has. Upon a page load, all idea graphs animate so that they start at ‘0’ and fill up to their current percent of funding. The numbers in the graph label are actively counting up to the current percentage as well.
3. Create a Sense of Urgency
Last but not least, we have the campaign countdown. I love that we made this a working timer. I think it really helps to show users that all campaigns and ideas are time sensitive, so they do not want to miss out on creating something they believe in or funding an idea they think is great.
It’s never really done.
Great, we redesigned Ignite. My work here is totally done, right? Nope. That’s the thing about design, especially product design. Practices, trends, and expectations are continuously evolving. I hope in the future versions of Ignite, we can take this new path of tangibility we have started and really embrace it. Getting detailed with our transitions and interactions throughout Ignite. Adding more subtle animations to call to users and add satisfaction to their interactions. Until then, I will just have to add these ideas to our company's own Ignite site and hope that my co-workers think they are as great as I do, and fund them.
Want to see inside Ignite? Sign up for a free 14 day trial to check out my redesign and start proposing and funding your own ideas!
You might also be interested in: Brainstorming doesn't work. To cultivate better ideas, try internal crowdfunding instead.
