CoderPush Website (2.0)
CoderPush transforms startup dreams into tech realities. They're a remote team - their website is where you can get to know them well.
You can explore: Click here
Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Market
Vietnam
Vietnam
Vietnam
Industry
Marketing
Marketing
Marketing
Platform
Web/Responsive Mobile
Web/Responsive Mobile
Web/Responsive Mobile
Challenge
The new CoderPush website will be more than just a digital business card; it will be a storytelling platform that speaks directly to startup founders. It will say, "We've been in your shoes, we've faced your challenges, and we're here to help."
The new CoderPush website will be more than just a digital business card; it will be a storytelling platform that speaks directly to startup founders. It will say, "We've been in your shoes, we've faced your challenges, and we're here to help."
Discover
Research
CoderPush had a previous website (which I also worked on in my role as UI/UX), but this time, with the rebranding of the logo and color scheme, the Founder wants to redesign the website with a new, modern look that showcases more FrontEnd skills.
The website currently uses black as the main color, with neon green highlights and illustrations themed around space and planets.
Finding the right balance between a compelling storytelling approach and maintaining the necessary functionality of the website.
Effectively incorporating feedback from stakeholders and target users during the iterative design process.
Prioritize a seamless and intuitive user experience, ensuring that the redesigned website is user-friendly and easy to navigate.
Link: Click here
Research methods:
Existing tools like MindMaster and Miro have limitations in providing truly dynamic and data-driven mind mapping experiences. Users often feel restricted in expressing their ideas.
Based on customer feedback, requirements, and insights, the team discussed and confirmed the key features for the first MVP release.
The MVP satisfies two main criteria: the ability to quickly create mind maps with a familiar UX, and the capability to perform basic calculations (addition, subtraction, multiplication, division) without needing to import data into Excel.
Define
Problem Statement: Finding the right balance between a compelling storytelling approach and maintaining the necessary functionality of the website.
Business Requirements: Effectively incorporating feedback from stakeholders and target users during the iterative design process.
Prioritize a seamless and intuitive user experience, ensuring that the redesigned website is user-friendly and easy to navigate.
The Founder wants customers to have a more engaging experience when answering questions like "Who are we?", "What have we accomplished?", and "How can we help you?" by exploring through unique interactions.
Problem Statement: Finding the right balance between a compelling storytelling approach and maintaining the necessary functionality of the website.
Business Requirements: Effectively incorporating feedback from stakeholders and target users during the iterative design process.
Prioritize a seamless and intuitive user experience, ensuring that the redesigned website is user-friendly and easy to navigate.
The Founder wants customers to have a more engaging experience when answering questions like "Who are we?", "What have we accomplished?", and "How can we help you?" by exploring through unique interactions.
Problem Statement: Finding the right balance between a compelling storytelling approach and maintaining the necessary functionality of the website.
Business Requirements: Effectively incorporating feedback from stakeholders and target users during the iterative design process.
Prioritize a seamless and intuitive user experience, ensuring that the redesigned website is user-friendly and easy to navigate.
The Founder wants customers to have a more engaging experience when answering questions like "Who are we?", "What have we accomplished?", and "How can we help you?" by exploring through unique interactions.
Develop
Wireframe & Prototyping: There are many ideas being implemented for the Hero Section and the Project Showcase Section.
The Hero Section aims to showcase what we can do with a clean UI, featuring interactive icons.
This is a pretty interesting idea and presents a challenge for both Design and Front-End. The Design needs to be created to adapt across devices from Desktop, Tablet, and Mobile while ensuring that interactions are displayed correctly and providing a smooth experience.
Wireframe & Prototyping: There are many ideas being implemented for the Hero Section and the Project Showcase Section.
The Hero Section aims to showcase what we can do with a clean UI, featuring interactive icons.
This is a pretty interesting idea and presents a challenge for both Design and Front-End. The Design needs to be created to adapt across devices from Desktop, Tablet, and Mobile while ensuring that interactions are displayed correctly and providing a smooth experience.
Wireframe & Prototyping: There are many ideas being implemented for the Hero Section and the Project Showcase Section.
The Hero Section aims to showcase what we can do with a clean UI, featuring interactive icons.
This is a pretty interesting idea and presents a challenge for both Design and Front-End. The Design needs to be created to adapt across devices from Desktop, Tablet, and Mobile while ensuring that interactions are displayed correctly and providing a smooth experience.
Build Style Guide: The Style Guide for the project is not too complex, primarily focusing on fonts and colors that must follow the company's branding guidelines. It ensures consistency throughout the project, providing a seamless and professional experience
Collaboration: Ideating with the PM and FE helps refine the design ideas, explaining what should be done and what should be avoided at this stage.
Build Style Guide: The Style Guide for the project is not too complex, primarily focusing on fonts and colors that must follow the company's branding guidelines. It ensures consistency throughout the project, providing a seamless and professional experience
Collaboration: Ideating with the PM and FE helps refine the design ideas, explaining what should be done and what should be avoided at this stage.
Build Style Guide: The Style Guide for the project is not too complex, primarily focusing on fonts and colors that must follow the company's branding guidelines. It ensures consistency throughout the project, providing a seamless and professional experience
Collaboration: Ideating with the PM and FE helps refine the design ideas, explaining what should be done and what should be avoided at this stage.
Deliver
Visual Design: Targeting audiences outside of Vietnam and Asia, the client wants an intuitive interface with some distinct differences in both structure and interaction. From the logo idea, we can develop related components and corresponding animations.
Visual Design: Targeting audiences outside of Vietnam and Asia, the client wants an intuitive interface with some distinct differences in both structure and interaction. From the logo idea, we can develop related components and corresponding animations.
Visual Design: Targeting audiences outside of Vietnam and Asia, the client wants an intuitive interface with some distinct differences in both structure and interaction. From the logo idea, we can develop related components and corresponding animations.
Showcasing the highlights of CoderPush by blending infinite inspiration with our logo, captivating visuals, and smooth animations.
Showcasing the highlights of CoderPush by blending infinite inspiration with our logo, captivating visuals, and smooth animations.
Showcasing the highlights of CoderPush by blending infinite inspiration with our logo, captivating visuals, and smooth animations.
Founder's Stories – a space where you can delve deeper into the stories of our two founders and immerse yourself in the experience with CP's team. Like turning the pages of a book, you can swipe and explore more about us.
We divide each leg of our journey into 6 chapters, which helps customers gain a deeper understanding of CoderPush.
Founder's Stories – a space where you can delve deeper into the stories of our two founders and immerse yourself in the experience with CP's team. Like turning the pages of a book, you can swipe and explore more about us.
We divide each leg of our journey into 6 chapters, which helps customers gain a deeper understanding of CoderPush.
Founder's Stories – a space where you can delve deeper into the stories of our two founders and immerse yourself in the experience with CP's team. Like turning the pages of a book, you can swipe and explore more about us.
We divide each leg of our journey into 6 chapters, which helps customers gain a deeper understanding of CoderPush.
Impact
The client is satisfied and feels that the final version has achieved the initial goal of giving the company a fresh look, focusing on a visually intuitive experience with a more approachable and brighter UI.
The client is satisfied and feels that the final version has achieved the initial goal of giving the company a fresh look, focusing on a visually intuitive experience with a more approachable and brighter UI.
Reflection
The CoderPush website 2.0 project was visually demanding and presented a significant challenge. Not only did it focus on UI, but optimizing animations also enhanced UX and provided a better experience for customers.
I learned how to expand creative thinking while ensuring feasibility and applying it to ensure good display across different screen sizes.
The CoderPush website 2.0 project was visually demanding and presented a significant challenge. Not only did it focus on UI, but optimizing animations also enhanced UX and provided a better experience for customers.
I learned how to expand creative thinking while ensuring feasibility and applying it to ensure good display across different screen sizes.
The CoderPush website 2.0 project was visually demanding and presented a significant challenge. Not only did it focus on UI, but optimizing animations also enhanced UX and provided a better experience for customers.
I learned how to expand creative thinking while ensuring feasibility and applying it to ensure good display across different screen sizes.