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
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
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.