METAVERSE
Port By Harbor: Your Defi Portfolio, Simplified
Harbor is the future of decentralized finance (DeFi) simplified, serving as your gateway to the world of DeFi. It offers a streamlined approach to managing your investments. With just one single asset, Harbor empowers you to earn secure and optimized yields across a diverse range of DeFi strategies.
Completion
Sept 2023
Industry
Blockchain
Tools
Figma, After Effects, Notion, Dovetail, Maze
Services
Research, Product & Web Design
Product Goals
The foremost objective is to deliver a streamlined user experience (UX) that guides you effortlessly through the entire process while fostering a comfortable and intuitive environment. We want users to feel like they're being expertly led by the hand, ensuring that their journey is as smooth as possible. Moreover, we aim to create a compelling value proposition that resonates with users, leaving them eager to use our product. We want them to exclaim, "shut up and take my money," because they see the immense value in what we offer and are excited to be a part of it.
User Persona & Journey
Hypotheses
1. Users prefer connecting their wallet at the end of their journey. 2. Users prioritize seeing earning options right away. 3. Users prefer a user-friendly, uncluttered interface without overwhelming information. 4. Users seek genuine yield opportunities. 5. Users value legitimacy and transparency in their interactions. 6. Users place less emphasis on historical APY data.
Wireframes Provided By Client
Clients Wireframe Needs
The wireframe serves as a vital tool in achieving our product goals. Its primary purpose is to provide us with a deeper understanding of user behavior and preferences. Through careful analysis, we aim to uncover valuable insights that will inform our design decisions. Ultimately, our wireframe should ignite excitement in users by offering a glimpse into what's to come. We want them to feel the anticipation and eagerness to engage with our product, knowing that there are exciting developments on the horizon. The wireframe serves as a teaser, building anticipation and setting the stage for an engaging and rewarding user experience.
Initial Thoughts After Reviewing The Wireframe
The information provided may have been clear to experts in web3, but we need to make sure it's easy for everyone to understand, especially newcomers. We also noticed that it didn't explain a really important thing: moving your money to the best strategy. The main goal is to make this product super clear for everyone. We know that it's important to explain things simply and plainly, especially for people who are new to DeFi and web3. We will have to make sure that moving your money to the best strategy is not a hidden secret but something that everyone can easily see and understand on our platform. I was tempted to quickly move into creating upgraded wireframes because I thought I understood the products well enough. However, I advised myself to conduct competitor research and design a product architecture flow based on my understanding.
Competitor Analysis
After conducting a thorough analysis of platforms and services in the market, we evaluated their strengths, weaknesses, user reviews, and customer satisfaction ratings. This helped us identify areas where competitors may be falling short and opportunities for improvement.`
Some products offering similar services include Index, Tokenset, Agility, and Arch Finance. However, the closest and most direct competitor is Yearn & Defi Saver.
Some of the opportunities identified
- Many of these products required manual monitoring and asset transfers, leaving users to figure out the best strategies on their own. - The use of complex definitions and language makes it difficult for newcomers to understand what is happening. - The abundance of strategies and options often leads to confusion. - These product's user experience is complex.
UX Recommendation Through Product Architecture Design
After auditing the current wireframe and gathering insights from existing products in the ecosystem, we have designed an end-to-end product architecture. This architecture not only demonstrates our complete understanding to our client but also serves as a reference when we proceed with the actual design.
Moodboarding
Once the product architecture design was reviewed and approved, we had to create a moodboard to determine our approach to the visual design. Here are the three directions we recommended, based on understanding the client's preferences and what is currently acceptable and functional in the ecosystem.
After our workshop session, where the moodboards were presented and explained, we unanimously decided to go with Moodboard C. Well, it was kind of expected anyway since it's a definitive product. (just kidding, just kidding) We skipped the wireframing phase and moved straight to low-fidelity designs. Why? Because we had a tight timeline.
Low Fidelity Design V1
Noteworthy things in Version 1
- Explored two layout options: table and card. The table version was preferred because the card view felt a bit overwhelming and would make the design more complex when more information is provided. - The token selection could appear as an overlay or as a step in its own dedicated screen, with more information on why a token selection is needed first.
After reviewing the LOWFI V1 designs, we proceeded to creating..
Low Fidelity Design V2
Noteworthy things in Version 2
- The table design had to be changed to be more adaptable to a dropdown design, allowing for more information on a strategy to be shown without the need to navigate to another screen. - We identified a missing section in the design, which we called "Basket Insights". Initially, we planned to name it "Portfolio", but we also realized the need for a page that displays overall user stats, which caused a naming conflict. After conducting AB testing, we decided to name the overall user stats section "PORTFOLIO" and the stats for a deployed strategy "BASKET INSIGHT".
After reaching version 2, we were highly satisfied with the design. As a result, we decided to move forward and start working on the development of the high-fidelity prototypes (HIFIs). These prototypes would allow us to further refine and enhance the design, ensuring that it meets the highest standards of quality and functionality.
High Fidelity Design
Need a closer look? Sure….
Finalizing the design we also noticed the user might still not know that unlike other platform, Harbor uses the best strategy from the strategies you selected in a basket. So we added an element to reinforce the information
Personal Takeaways on this project
- In the design process, everything can change. We initially started designing the product with the name PORT, but during the handover, it was renamed HARBOR because we discovered another product that is an indirect competitor with the name PORT. - Discoveries will be made during the design process, and certain features may become irrelevant while new features may emerge. - The process of creating a perfect product is not fixed or rigid. - HARBOR will be the ideal solution for deploying assets if you want to take advantage of automation... I mean, if you want to leverage artificial intelligence. - The best products are created when creators are given the freedom to be creative.
Certainly! If you paid close attention to the header image, you would undoubtedly notice that we not only designed the captivating landing page but also put meticulous thought into every detail. As I bid you farewell, I invite you to delve deeper into the intricacies of our design. Take a moment to explore the stunning visuals, the intuitive user interface, and the seamless user experience that awaits you.
Other projects
METAVERSE
Port By Harbor: Your Defi Portfolio, Simplified
Harbor is the future of decentralized finance (DeFi) simplified, serving as your gateway to the world of DeFi. It offers a streamlined approach to managing your investments. With just one single asset, Harbor empowers you to earn secure and optimized yields across a diverse range of DeFi strategies.
Completion
Sept 2023
Industry
Blockchain
Tools
Figma, After Effects, Notion, Dovetail, Maze
Services
Research, Product & Web Design
Product Goals
The foremost objective is to deliver a streamlined user experience (UX) that guides you effortlessly through the entire process while fostering a comfortable and intuitive environment. We want users to feel like they're being expertly led by the hand, ensuring that their journey is as smooth as possible. Moreover, we aim to create a compelling value proposition that resonates with users, leaving them eager to use our product. We want them to exclaim, "shut up and take my money," because they see the immense value in what we offer and are excited to be a part of it.
User Persona & Journey
Hypotheses
1. Users prefer connecting their wallet at the end of their journey. 2. Users prioritize seeing earning options right away. 3. Users prefer a user-friendly, uncluttered interface without overwhelming information. 4. Users seek genuine yield opportunities. 5. Users value legitimacy and transparency in their interactions. 6. Users place less emphasis on historical APY data.
Wireframes Provided By Client
Clients Wireframe Needs
The wireframe serves as a vital tool in achieving our product goals. Its primary purpose is to provide us with a deeper understanding of user behavior and preferences. Through careful analysis, we aim to uncover valuable insights that will inform our design decisions. Ultimately, our wireframe should ignite excitement in users by offering a glimpse into what's to come. We want them to feel the anticipation and eagerness to engage with our product, knowing that there are exciting developments on the horizon. The wireframe serves as a teaser, building anticipation and setting the stage for an engaging and rewarding user experience.
Initial Thoughts After Reviewing The Wireframe
The information provided may have been clear to experts in web3, but we need to make sure it's easy for everyone to understand, especially newcomers. We also noticed that it didn't explain a really important thing: moving your money to the best strategy. The main goal is to make this product super clear for everyone. We know that it's important to explain things simply and plainly, especially for people who are new to DeFi and web3. We will have to make sure that moving your money to the best strategy is not a hidden secret but something that everyone can easily see and understand on our platform. I was tempted to quickly move into creating upgraded wireframes because I thought I understood the products well enough. However, I advised myself to conduct competitor research and design a product architecture flow based on my understanding.
Competitor Analysis
After conducting a thorough analysis of platforms and services in the market, we evaluated their strengths, weaknesses, user reviews, and customer satisfaction ratings. This helped us identify areas where competitors may be falling short and opportunities for improvement.`
Some products offering similar services include Index, Tokenset, Agility, and Arch Finance. However, the closest and most direct competitor is Yearn & Defi Saver.
Some of the opportunities identified
- Many of these products required manual monitoring and asset transfers, leaving users to figure out the best strategies on their own. - The use of complex definitions and language makes it difficult for newcomers to understand what is happening. - The abundance of strategies and options often leads to confusion. - These product's user experience is complex.
UX Recommendation Through Product Architecture Design
After auditing the current wireframe and gathering insights from existing products in the ecosystem, we have designed an end-to-end product architecture. This architecture not only demonstrates our complete understanding to our client but also serves as a reference when we proceed with the actual design.
Moodboarding
Once the product architecture design was reviewed and approved, we had to create a moodboard to determine our approach to the visual design. Here are the three directions we recommended, based on understanding the client's preferences and what is currently acceptable and functional in the ecosystem.
After our workshop session, where the moodboards were presented and explained, we unanimously decided to go with Moodboard C. Well, it was kind of expected anyway since it's a definitive product. (just kidding, just kidding) We skipped the wireframing phase and moved straight to low-fidelity designs. Why? Because we had a tight timeline.
Low Fidelity Design V1
Noteworthy things in Version 1
- Explored two layout options: table and card. The table version was preferred because the card view felt a bit overwhelming and would make the design more complex when more information is provided. - The token selection could appear as an overlay or as a step in its own dedicated screen, with more information on why a token selection is needed first.
After reviewing the LOWFI V1 designs, we proceeded to creating..
Low Fidelity Design V2
Noteworthy things in Version 2
- The table design had to be changed to be more adaptable to a dropdown design, allowing for more information on a strategy to be shown without the need to navigate to another screen. - We identified a missing section in the design, which we called "Basket Insights". Initially, we planned to name it "Portfolio", but we also realized the need for a page that displays overall user stats, which caused a naming conflict. After conducting AB testing, we decided to name the overall user stats section "PORTFOLIO" and the stats for a deployed strategy "BASKET INSIGHT".
After reaching version 2, we were highly satisfied with the design. As a result, we decided to move forward and start working on the development of the high-fidelity prototypes (HIFIs). These prototypes would allow us to further refine and enhance the design, ensuring that it meets the highest standards of quality and functionality.
High Fidelity Design
Need a closer look? Sure….
Finalizing the design we also noticed the user might still not know that unlike other platform, Harbor uses the best strategy from the strategies you selected in a basket. So we added an element to reinforce the information
Personal Takeaways on this project
- In the design process, everything can change. We initially started designing the product with the name PORT, but during the handover, it was renamed HARBOR because we discovered another product that is an indirect competitor with the name PORT. - Discoveries will be made during the design process, and certain features may become irrelevant while new features may emerge. - The process of creating a perfect product is not fixed or rigid. - HARBOR will be the ideal solution for deploying assets if you want to take advantage of automation... I mean, if you want to leverage artificial intelligence. - The best products are created when creators are given the freedom to be creative.
Certainly! If you paid close attention to the header image, you would undoubtedly notice that we not only designed the captivating landing page but also put meticulous thought into every detail. As I bid you farewell, I invite you to delve deeper into the intricacies of our design. Take a moment to explore the stunning visuals, the intuitive user interface, and the seamless user experience that awaits you.
Other projects
METAVERSE
Port By Harbor: Your Defi Portfolio, Simplified
Harbor is the future of decentralized finance (DeFi) simplified, serving as your gateway to the world of DeFi. It offers a streamlined approach to managing your investments. With just one single asset, Harbor empowers you to earn secure and optimized yields across a diverse range of DeFi strategies.
Completion
Sept 2023
Industry
Blockchain
Tools
Figma, After Effects, Notion, Dovetail, Maze
Services
Research, Product & Web Design
Product Goals
The foremost objective is to deliver a streamlined user experience (UX) that guides you effortlessly through the entire process while fostering a comfortable and intuitive environment. We want users to feel like they're being expertly led by the hand, ensuring that their journey is as smooth as possible. Moreover, we aim to create a compelling value proposition that resonates with users, leaving them eager to use our product. We want them to exclaim, "shut up and take my money," because they see the immense value in what we offer and are excited to be a part of it.
User Persona & Journey
Hypotheses
1. Users prefer connecting their wallet at the end of their journey. 2. Users prioritize seeing earning options right away. 3. Users prefer a user-friendly, uncluttered interface without overwhelming information. 4. Users seek genuine yield opportunities. 5. Users value legitimacy and transparency in their interactions. 6. Users place less emphasis on historical APY data.
Wireframes Provided By Client
Clients Wireframe Needs
The wireframe serves as a vital tool in achieving our product goals. Its primary purpose is to provide us with a deeper understanding of user behavior and preferences. Through careful analysis, we aim to uncover valuable insights that will inform our design decisions. Ultimately, our wireframe should ignite excitement in users by offering a glimpse into what's to come. We want them to feel the anticipation and eagerness to engage with our product, knowing that there are exciting developments on the horizon. The wireframe serves as a teaser, building anticipation and setting the stage for an engaging and rewarding user experience.
Initial Thoughts After Reviewing The Wireframe
The information provided may have been clear to experts in web3, but we need to make sure it's easy for everyone to understand, especially newcomers. We also noticed that it didn't explain a really important thing: moving your money to the best strategy. The main goal is to make this product super clear for everyone. We know that it's important to explain things simply and plainly, especially for people who are new to DeFi and web3. We will have to make sure that moving your money to the best strategy is not a hidden secret but something that everyone can easily see and understand on our platform. I was tempted to quickly move into creating upgraded wireframes because I thought I understood the products well enough. However, I advised myself to conduct competitor research and design a product architecture flow based on my understanding.
Competitor Analysis
After conducting a thorough analysis of platforms and services in the market, we evaluated their strengths, weaknesses, user reviews, and customer satisfaction ratings. This helped us identify areas where competitors may be falling short and opportunities for improvement.`
Some products offering similar services include Index, Tokenset, Agility, and Arch Finance. However, the closest and most direct competitor is Yearn & Defi Saver.
Some of the opportunities identified
- Many of these products required manual monitoring and asset transfers, leaving users to figure out the best strategies on their own. - The use of complex definitions and language makes it difficult for newcomers to understand what is happening. - The abundance of strategies and options often leads to confusion. - These product's user experience is complex.
UX Recommendation Through Product Architecture Design
After auditing the current wireframe and gathering insights from existing products in the ecosystem, we have designed an end-to-end product architecture. This architecture not only demonstrates our complete understanding to our client but also serves as a reference when we proceed with the actual design.
Moodboarding
Once the product architecture design was reviewed and approved, we had to create a moodboard to determine our approach to the visual design. Here are the three directions we recommended, based on understanding the client's preferences and what is currently acceptable and functional in the ecosystem.
After our workshop session, where the moodboards were presented and explained, we unanimously decided to go with Moodboard C. Well, it was kind of expected anyway since it's a definitive product. (just kidding, just kidding) We skipped the wireframing phase and moved straight to low-fidelity designs. Why? Because we had a tight timeline.
Low Fidelity Design V1
Noteworthy things in Version 1
- Explored two layout options: table and card. The table version was preferred because the card view felt a bit overwhelming and would make the design more complex when more information is provided. - The token selection could appear as an overlay or as a step in its own dedicated screen, with more information on why a token selection is needed first.
After reviewing the LOWFI V1 designs, we proceeded to creating..
Low Fidelity Design V2
Noteworthy things in Version 2
- The table design had to be changed to be more adaptable to a dropdown design, allowing for more information on a strategy to be shown without the need to navigate to another screen. - We identified a missing section in the design, which we called "Basket Insights". Initially, we planned to name it "Portfolio", but we also realized the need for a page that displays overall user stats, which caused a naming conflict. After conducting AB testing, we decided to name the overall user stats section "PORTFOLIO" and the stats for a deployed strategy "BASKET INSIGHT".
After reaching version 2, we were highly satisfied with the design. As a result, we decided to move forward and start working on the development of the high-fidelity prototypes (HIFIs). These prototypes would allow us to further refine and enhance the design, ensuring that it meets the highest standards of quality and functionality.
High Fidelity Design
Need a closer look? Sure….
Finalizing the design we also noticed the user might still not know that unlike other platform, Harbor uses the best strategy from the strategies you selected in a basket. So we added an element to reinforce the information
Personal Takeaways on this project
- In the design process, everything can change. We initially started designing the product with the name PORT, but during the handover, it was renamed HARBOR because we discovered another product that is an indirect competitor with the name PORT. - Discoveries will be made during the design process, and certain features may become irrelevant while new features may emerge. - The process of creating a perfect product is not fixed or rigid. - HARBOR will be the ideal solution for deploying assets if you want to take advantage of automation... I mean, if you want to leverage artificial intelligence. - The best products are created when creators are given the freedom to be creative.
Certainly! If you paid close attention to the header image, you would undoubtedly notice that we not only designed the captivating landing page but also put meticulous thought into every detail. As I bid you farewell, I invite you to delve deeper into the intricacies of our design. Take a moment to explore the stunning visuals, the intuitive user interface, and the seamless user experience that awaits you.
Other projects