My process of research, ideation, prototyping and testing of a website.


Client

Green Drinks DC is a series of networking events curated for environmentally-minded professionals, students, and enthusiasts in Washington, D.C. Those events have been growing in popularity lately and the founders started wondering:

  • Was the website communicating the right message?

  • Were the users of the website getting the vibe of fun and self-development?

    The answer was: no.

Questions were popping up in my head:

  • What message did the client want the user to get at a first glance?

  • What would the best way to convey that message to the user be?

  • What were the main pain points of the current webpages?

  • How do direct and indirect competitors approach the same problem?


Research and ideation

I started my process with research, to see what other direct and inderect competitiors were doing. Our client wanted clean and minimalistic design.

The messages the client wanted to convey to the user were:

  1. Networking can be also fun!

  2. Professional development doesn’t need to be boring!

  3. Come and join us and you won’t want to leave!


    The task in hand was clear. Now there were no obstacles to my ideation process.

    After getting ideas about current trends, I began to create my inspiration mood board. Here it is.

image.png


Creating a mood board inspired me! Ideas started to swirl in my head and I proceeded to create my color palette and to choosing fonts. My initial color palette had a lot of green in it. Client mentioned that they use green color a lot in their designs.

image.png

Choosing a color palette and font was fun! With these tools in hand, I began to sketch and wireframe my ideas. I used Sketch for prototyping. It was my first time using this tool and I was surprised how easy to use it was!

This is how my initial idea turned out.

image.png

After getting feedback on my mockup I realized that it looked a lot like Green Drinks DC’s current page. The client wanted something different, that’s why they came to us. I decided to give my ideation another round and it did pay off!


I decided to change my color palette so that it would look more professional.

image.png

And so the prototyping began! Here you can see the result of my second round of prototyping.

Screen Shot 2020-02-25 at 4.22.32 PM.png
image.png

I conducted a round of usability tests on my mockup and the feedback I got was really useful! Here is the feedback I received and iterated upon.

This is how my final mockup looked like after all the iterations.

image.png
image.png
image.png
image.png

My reflections

I really enjoyed working on this project and using Sketch. Thank you Green Drinks DC for giving me this opportunity!