gracio.us

The finalised version of gracio.us - complicated user flows that we managed to organise
Our workplace - a mess, but full of ideas.
A design created from scratch, graciously by us.
Contributor dashboard
Creator dashboard
The product! Imagine how it feels to receive letter from people you love, all on one board.

Inspiration 💡

We were thinking of ways to say thank you and show appreciation amid the pandemic. Many individuals helped us so much throughout the lockdown - teachers, parents, friends, even strangers! Something that wasn't a single boring text or social media post, but a board dedicated to them, with warm and loving cards from people who felt the same.

What it does 🎮

gracio.us is a platform that enables a group of people to show their appreciation towards others.

Create boards: the creator creates a board for anyone; creating a board generates a unique code that can be shared to your friends, classmates or anyone who knows the board's recipients
Collaborate: contributors can make cards for the board; by allocating tags to each of their cards, it is automatically updated on the recipients' boards
Convey compassion: think of it as a rolling paper filled with loving words!

How we built it 🛠

We used Figma primarily to create the prototype for our potential website/application. By experimenting and meticulously planning the user flow, we made the prototype we are proud to have now.

First came the plan, and as students working together from home, we needed a platform where both of us could brainstorm on the same page. We utilised Miro link, and on there, hundreds of ideas bounced off each other. We eventually came to a common ground, and from there, we branched out - flowcharts, idea banks, demonstrations, and even scribbles that we somehow were able to interpret.

Next came the execution - we used Figma link and started by creating the pages to see how the user flow was going to be. After deciding on the colour scheme, logo, and overall aesthetic of our website, we started linking the parts in our prototype. After several gruelling hours of getting the minor details sorted, we did a comprehensive check of our website, and we were done.

Challenges we ran into 📍

As students active in several activities outside of our academics, the first challenge came setting a date and time we were both available. After many days passed, we finally were able to start planning for this Hackathon. However, there wasn't enough time to execute our big ideas. From full-stack web development to a simple UI, we narrowed down our options based on reality.

On Figma, there weren't as many options as we anticipated. We could not animate particular objects but overcame them by creating multiple layers and pages and giving the effect of animation.