Client/Problem:
Green Drinks DC is a small organization that hosts networking events for people who are interested in getting a career in the environmental industry. They currently have a working website where you can easily go to sign up or search for upcoming events. The only issue is, their website’s visual design is very simple and doesn’t really match the personality that the organization is trying to advertise. I solved this issue by redesigning their landing page in a way that was visually appealing, easy to navigate, and properly conveyed the right tone.
Rough Sketch:
I first drew a quick sketch of a redesigned version of Green Drinks Dc’s landing page, just so I could get an idea of what kind of direction I wanted to take. I initially went for something that was similar to the original design, but rearranged some of the content, like having the events cards in a horizontal line that takes up a significant amount of space or enlarging the logo/title and moving it to the very top of the page.
Mood Board:
After doing a brief sketch, I started to look up images and quotes online that I felt fit Green Drinks DC’s brand (which to me were: the environment, alcoholic drinks, and the color green). I went to Pinterest and searched for images of environmental themed icons, green alcoholic drinks, and teamwork quotes.
Color Palette:
Since the theme I felt that best fit Green Drinks DC was fancy green alcoholic drinks, that obviously meant the color palette should also have green in it. So I went to Adobe Color Wheel to pick a palette, and I customized my palette into being all different shades of green, since any other primary or secondary color felt off to me.
Typography:
I went to Google Fonts to select the right font for this new landing page, and the one I picked was Bebas Neue. This font felt appropriate because it wasn’t too formal but also wasn’t too unique/strange either.
Competitive Analysis:
I did some brief competitive analysis to see how other networking organizations visually designed their own landing pages. The organization I mainly looked at was Meetup, since it is a very popular app/website that is clean, colorful to look, has a lot of content that fills the page and is easy to navigate. A lot of Meetup’s designs heavily inspired the visual design fo my new landing page.
Tool:
I initially used Sketch, but I realized that it had many constraints. One of those being that there was no icon library I could use and instead I had to go download icons from a separate website, take a screen shot, and then drag them into Sketch. With this making the process pretty inconvenient, I decided to convert what I had already made in Sketch to Adobe XD.
First Prototype:
Final Landing Page:
Next Steps:
For the future, I would like to:
do some more iteration
conduct further competitive analysis
run a usability test