Branding isn’t an easy process, especially for a software product. Zivtech recently created a product called GrantCycle.io that makes it easier for nonprofits and foundations to manage their grant cycles. I was tasked with designing key elements for the brand: a logo, website, and various illustrations to use as imagery. The website would be the primary medium for marketing the product. As an intern, this was my first experience taking on this type of project.
Through GrantCycle’s branding, we wanted to clearly convey our message and purpose, but we also wanted it to have a unique personality that would speak to our target audience. As a brand, GrantCycle is approachable, friendly, and empowering. It’s easy to use with a simplified interface for non-technical users. It recognizes that these organizations have ambitious missions and seeks to act as a catalyst for accomplishing their goals. We wanted to communicate all of this in our design.
I designed a fully responsive live website (with help and guidance from our design team, of course!) that helps convey the brand’s message.
Designing a Logo
After gathering some insight into GrantCycle’s target market and key features, I got to work on a logo. I brainstormed imagery and words associated with grants, cycles, awards, money, management - anything that could possibly relate to the system.
I looked at competitors’ sites and noted what I liked and didn’t like about their logos, and took in the overall feel of their brands. After that, I got my notebook and started putting the ideas in my head down on paper. As I sketched some ideas, I considered: Should it be a purely typographic wordmark or a pictorial mark? Should it be a combination logo? Stacked or unstacked? Horizontal or vertical lockup?
Once I had several ideas, I turned the marks into workable vector graphics on my computer. Then I explored how “GrantCycle.io” looked with different fonts, colors, sizes, and spacing. My team gave me suggestions and helped narrow it down.
The final logo is a simple, strong wordmark with two different colored segments, a grey and light teal-grey, to distinguish the different words. Slightly rounded letterforms give it a friendlier, more inviting feel than the stiff, rigid logos you think of when you hear “grant management.” The logo communicates the approachable but professional style we were going for.
Designing the Website
Next I had to design the website itself. To get some inspiration, I went back to competitor sites and also looked at other well-designed websites that I like. Usually I would have created wireframes first, but since it would be a small, straightforward site with only about half a dozen pages, I opted out of them and jumped straight into design.
I started off with the homepage. We decided that we wanted a photographic hero and started searching for possible images that reference the grant management tool itself. We initially chose dramatic black and white music-related photography and paired it with a serif font for the header.
After designing the rest of the homepage, the hero stood out as too serious for the brand. We wanted to make a potentially monotonous process more engaging. We decided that all the imagery for the site would be vector illustrations, with the exception of the gallery, which would showcase screenshots from the system. This led to an exploration of different illustration styles and many sketches of illustration compositions. The real challenge was thinking of a visual that related to and accurately represented the copy.
I created some illustrations for the little blurbs that describe GrantCycle. They utilized the limited color palette found in the logo with an added pop of yellow, and were stroked with a thick black line. As a distinguishing feature, I used an off-kilter outline around some of the elements, like the circles and abstract people icons. Playful squiggles and miscellaneous abstract star shapes danced in the background.
Down the page, large quotation marks (that mimicked the soft curve of the illustrations) framed the testimonial at a low opacity so as not to draw attention away from the content. The illustrated star motif was repeated further down on the call to action.
The features page comprised of a tab system that highlighted the main functions of the system. I created custom icons for each section and used the color scheme from the illustrations for the bullet points. Keeping responsive design in mind, the tab system was replaced with an accordion on the mobile layout to make switching between topics more user-friendly.
Next, I tackled the how it works page. We divided this page into three sections that each catered to a target group of users. These sections followed the same formatting as the features page, with yellow bullet points and an associated icon.
The documentation page broke the layout mold; it had no imagery and had a more serious tone. When designing, I started with the documentation landing page, then went through each level as if I were the user navigating through the pages. To make it feel a little more cohesive with the brand, this page’s header has a background with one of the main colors and the star motif. The breadcrumbs are the same style as the navigation, and the pages are straightforward with a side navigation. Multiple accordions are at the bottom to segment information while saving on space.
The last page was the contact page, which included a simple and focused contact form. Form fields and buttons that were consistent over the rest of the site were centered on the page. To add a bit of flair, I created a small shooting mail illustration in the same style as the homepage illustrations.
After all the pages were made, my job was done. I saved out assets, made a style guide, and handed the project off to the developer (big kudos to John!).
The design and branding for GrantCycle.io has come a long way from where it initially started, and I’m really proud of all the progress. All the iterations and rearranging of the InVision board paid off. The website presents GrantCycle as an engaging and intuitive system, which is exactly what we were going for.
I’ve learned a lot about design from working on this site. It holds a special place in my heart as one of the first big projects that I was able to put my name on during my internship at Zivtech.