Core Four

Core Four helps individuals tackle overconsumption and impulse purchases, which in return helps our environment.

Comment

Slack

Annabelle Chung

Inspiration

Our world is becoming more and more polluted from the effects of overconsumption. Overconsumption can be defined as the excessive act of consuming goods and services. As humans, past our necessities, we honestly don't need many things. There's no need to buy every new trending item, or more clothes than what's likely already in your closet. Often times excess of these items end up in landfills or polluting our environments. It has been reported that over 92 million tons of clothing end up in landfills every year, and that's just clothing waste! I believe that this issue can begin to be remedied if we all were just a little more mindful of their purchases. This was my main driving factor for creating Core Four.

What it does

Core Four allows users to select four different items from four different categories that they really really want to buy. These are not necessities like food, but just general wants and desires. Once you choose your items, a one month timer begins. If you still want to buy the item at the end of this time period, you should go ahead and enjoy! However, I'm sure that there will be times where at the end of the month, or even sooner, you might just realize that you didn't really want it. Factors like excitement can definitely make material items seem like a must in the moment, so sitting on the thought for some time might give you a clear mind for your purchases.

How I built it

I intended for this project to be a full front-end prototype in html and css, which it did end up being! Due to being a solo hacker, I wanted to ensure that my scope was reasonable for the time frame, so I didn't plan for any back-end features.

However, this didn't stop me from challenging myself in front-end, as I learnt 3 brand new skills this hackathon: Figma, Typography and css animations.

Before I began coding, I wireframed in Figma all screens that I planned to implement before hand, and after doing this I will definitely not be going back to just freestyling my css. I also hand-illustrated my logo and headings in a custom font. I really wanted my branding to shine through as warm, environmentally friendly but modern. This resulted in me drawing the letters to be very wavy and choosing muted green and dark brown colors. I also utilized animations in css to give the website a fun feel, that might make people excited about setting their Core Four. This was the first time I used css animations to this extent!

Challenges I ran into

This was the first time I attempted to design my screens with intention. While creating my logos and iconography, I found it extremely hard to encapsulate those warm but modern feelings I had in mind. It took several iterations and a handful of starting over from scratch for some. However, I am happy with the outcome and think it does it's job!

Also, Figma definitely had a learning curve for me but like all CS people do, I Googled a ton!

Accomplishments that I'm proud of

When I first loaded up my project in browser, it felt pretty surreal that it all came together in about a day. I'm really happy with how the colors, branding and icons all come together, and think that nothing clashes. If you look at some of my old front-end projects, the same thing really can't be said about them, so I've definitely improved in these areas! I think that recently I had been noticing how much artistic skill I had lost from being totally committed to my CS classes and projects, so really putting them to work during this hackathon impacted me dearly.

What I learned

I definitely learnt how to put together ideas in a very short time frame this weekend. Honestly, when the hackathon started I was still unsure of what I wanted to do. After this weekend though, I definitely feel more confident in my ability to complete work in short periods of time, and have learnt skills like brainstorming and mapping out my ideas to do so!

What's next for Core Four

Hopefully functionality! I would love to implement a back-end soon in the future :)

Built With

Share this project:

Updates