Babyfuture

Web Design

Hackathon

Responsive

Lorem ipsum dolor sit amet consectetur. Bibendum vel placerat odio faucibus dolor bibendum sed sit suspendisse. Sed phasellus viverra id sit neque dui sit a. Dui habitasse vitae dictumst neque

Timeline

2 days / July 2023

Role

Web designer

Team

text

Tool

Figma

I participated in the 19th Young Webmaster Camp, hosted by Thai Webmaster and Online Media Association.


As a web designer, I collaborated closely with designers, content creators, and developers throughout the hackathon. Together, we brainstormed ideas and presented them to mentors for the purpose for product development.

OVERVIEW

Evaluation

Brainstorm

Consult

Sign-off

Hackathon

MVP Prototyping

Coaching with mentor

Pitching

Presentation

BRAINSTORM

Discover

The main theme of this hackathon was to built a website that enhances the quality of life for Thai citizens, promoting equality and nationality in alignment with the UN’s Sustainable Development Goals (SDGs).


Our team collaborated to brainstorm and explore potential issues within the scope of problems that the website could address. We decided to focus on the topic of financial stability for Thai people."

ISSUES

Financial Stability

Finance impacts everyone, affecting various aspects of our lives. Improved financial stability can enhance overall well-being.

GOAL

Increase awareness among Thai citizens regarding financial stability and provide assistance

⭐️

Connect to Content

Add layers or components to make infinite auto-playing slideshows.

Brainstorming & Consulting Session

Our team set out to create a website that serves as a personal money planner for Thai individuals. We explored various approaches, ranging from gamified platforms to educate children about income and expenses, to financial advisor tools for adults.


Following consultation, the project that received approval, based on its strong business feasibility and potential impact, was a financial advisor family planner website

SOME IDEAS FROM THE BRAINSTORMING SESSION

IDEA VALIDATION

Define goal

BRAINSTORM

Problem

Complexities in Family Financial Planning

Planning for a child involves various factors, from antenatal care to future school fees. Lack of preparation can impact the child's standard of living.

Solution

Personal financial advisor website

Providing step-by-step guidance for parents to understand and plan for the finances needed to ensure their children's future.

Business Model

Sponsorship

Insurance companies and hospitals will be key partners for the website. Additional revenue model include freemium and affiliate programs.

MVP PROTOTYPING

Ideation

Now that we have a validated idea, the team explored various possibilities and multiple feature ideas. We prioritized those achievable within our limited timeframe and scope.

FAMILY PLANNING EXPENSE AFFINITY DIAGRAM

Next, we proceeded to web design. We started with the user flow, followed by the site map.


The procedure of financial planning mirrors the process of consulting with a personal advisor in real life.

The flow accommodates options for those who wish to customize every aspect, as well as for those who seek overall suggestions.

PROCESS FOR A FINANCIAL PLANNER

Assessment

Plan development

Plan Suggestions

Customization

Implementation

Collect financial information

income

expenses

assets

liabilities

Developed financial plan

tailored to the family’s goals

and needs

Prepared planning template

for parents to complete

Customizable planning,

with options for additional features

Summarized

expenses

timeline graph

investment options

tax optimization

insurance recommendations

WIREFRAME

Design System

For our financial-related family planner website, we chose blue and teal colors for their associations with trust and dependability while maintaining a friendly feel.

COLOR

Teal

#047481

Teal

#0694A2

Teal

#0AB2BF

Teal

#7EDCE2

Teal

#D5F5F6

Teal

#EDFAFA

Black

#111928

Darkgray

#6B7280

Lightgray

#E5E7EB

White

#FFFFFF

TYPOGRAPHY

H1

Noto Sans Thai/SemiBold/48px

H2

Noto Sans Thai/SemiBold/36px

H3

Noto Sans Thai/SemiBold/24px

Label

Noto Sans Thai/SemiBold/18px

Body

Noto Sans Thai/Medium/20px

Paragraph

Noto Sans Thai Looped/Regular/18px

COMPONENTS

WEBSITE

babyfuture.com

Landing Page

  • babyfuture.com

  • babyfuture.com

  • babyfuture.com

  • babyfuture.com

Financial planning process

MVP PROTOTYPING

After the design team completed the website design, we collaborated with the developer team to hand off the design documentation.


The final work was presented to the mentor during the pitching session, where we received feedback and had the opportunity to review the work of other teams.

KEY TAKEAWAYS

What I learned

  • Collaborating with team members from diverse fields within a constrained timeframe.

  • Idea validation and prioritization involve selecting practical solutions from numerous ideas, with a focus on impactful outcomes

  • Understanding the product thinking from a marketing perspective, including business feasibility and models.