Account Page
Account Page
Account Page
Account Page
The primary goal of this redesign was to enhance the user experience and provide our customers with more transparency and convenience, while also incentivizing new customers to create a new account.
The primary goal of this redesign was to enhance the user experience and provide our customers with more transparency and convenience, while also incentivizing new customers to create a new account.
The primary goal of this redesign was to enhance the user experience and provide our customers with more transparency and convenience, while also incentivizing new customers to create a new account.
The primary goal of this redesign was to enhance the user experience and provide our customers with more transparency and convenience, while also incentivizing new customers to create a new account.
My Role
I was the lead Product Designer in the Biossance Account Page redesign. I worked closely with other designers, PMs, and developers to brainstorm, sketch, and wireframe design solutions that prioritized user needs. During the project, I updated the design system to ensure visual consistency across the platform. This collaborative effort resulted in an improved account page, offering transparency, ease of use, and enhanced visual aesthetics.
I was the lead Product Designer in the Biossance Account Page redesign. I worked closely with other designers, PMs, and developers to brainstorm, sketch, and wireframe design solutions that prioritized user needs. During the project, I updated the design system to ensure visual consistency across the platform. This collaborative effort resulted in an improved account page, offering transparency, ease of use, and enhanced visual aesthetics.
I was the lead Product Designer in the Biossance Account Page redesign. I worked closely with other designers, PMs, and developers to brainstorm, sketch, and wireframe design solutions that prioritized user needs. During the project, I updated the design system to ensure visual consistency across the platform. This collaborative effort resulted in an improved account page, offering transparency, ease of use, and enhanced visual aesthetics.
I was the lead Product Designer in the Biossance Account Page redesign. I worked closely with other designers, PMs, and developers to brainstorm, sketch, and wireframe design solutions that prioritized user needs. During the project, I updated the design system to ensure visual consistency across the platform. This collaborative effort resulted in an improved account page, offering transparency, ease of use, and enhanced visual aesthetics.
CLIENT
Biossance
ROLES
Lead Product Designer
ROLES
Lead Product Designer
DURATION
May–Jul 2023
TOOLS
Figma
Previous Design Issues
Previous Design Issues
Previous Design Issues
Previous Design Issues
The previous design of our account page had several notable issues:
The previous design of our account page had several notable issues:
The previous design of our account page had several notable issues:
The previous design of our account page had several notable issues:
Visually, it lacked appeal and failed to engage users effectively
Visually, it lacked appeal and failed to engage users effectively
Visually, it lacked appeal and failed to engage users effectively
Visually, it lacked appeal and failed to engage users effectively
Updating personal information was needlessly complicated
Updating personal information was needlessly complicated
Updating personal information was needlessly complicated
Updating personal information was needlessly complicated
The "Create your Account" page did not communicate the benefits of having an account, leaving users without a clear incentive to sign up and engage with our platform.
The "Create your Account" page did not communicate the benefits of having an account, leaving users without a clear incentive to sign up and engage with our platform.
The "Create your Account" page did not communicate the benefits of having an account, leaving users without a clear incentive to sign up and engage with our platform.
The "Create your Account" page did not communicate the benefits of having an account, leaving users without a clear incentive to sign up and engage with our platform.
Customer Care raised concerns that due to insufficient information provided for past orders, customers frequently reached out seeking additional details. Past orders were presented with minimal information, lacking images or detailed descriptions, which hindered users' ability to recall their purchases. To mitigate this issue, a simple adjustment in the design, providing more comprehensive information for each purchase, could prevent unnecessary inquiries.
Customer Care raised concerns that due to insufficient information provided for past orders, customers frequently reached out seeking additional details. Past orders were presented with minimal information, lacking images or detailed descriptions, which hindered users' ability to recall their purchases. To mitigate this issue, a simple adjustment in the design, providing more comprehensive information for each purchase, could prevent unnecessary inquiries.
Customer Care raised concerns that due to insufficient information provided for past orders, customers frequently reached out seeking additional details. Past orders were presented with minimal information, lacking images or detailed descriptions, which hindered users' ability to recall their purchases. To mitigate this issue, a simple adjustment in the design, providing more comprehensive information for each purchase, could prevent unnecessary inquiries.
Customer Care raised concerns that due to insufficient information provided for past orders, customers frequently reached out seeking additional details. Past orders were presented with minimal information, lacking images or detailed descriptions, which hindered users' ability to recall their purchases. To mitigate this issue, a simple adjustment in the design, providing more comprehensive information for each purchase, could prevent unnecessary inquiries.
Improvement Goals
Improvement Goals
Improvement Goals
Improvement Goals
Based on that, I listed improvements we could achieve with the redesign:
Based on that, I listed improvements we could achieve with the redesign:
Based on that, I listed improvements we could achieve with the redesign:
Based on that, I listed improvements we could achieve with the redesign:
Visual and Design Enhancements
Visual and Design Enhancements
Create a visually appealing design that engages users and aligns with the brand identity
Create a visually appealing design that engages users and aligns with the brand identity
Create a visually appealing design that engages users and aligns with the brand identity
Create a visually appealing design that engages users and aligns with the brand identity
Maintain visual consistency across the entire platform
Maintain visual consistency across the entire platform
Maintain visual consistency across the entire platform
Maintain visual consistency across the entire platform
Ensure the new design is responsive
Ensure the new design is responsive
Ensure the new design is responsive
Ensure the new design is responsive
User Engagement and Information
User Engagement and Information
User Engagement and Information
User Engagement and Information
Provide users with detailed information about past orders
Provide users with detailed information about past orders
Provide users with detailed information about past orders
Provide users with detailed information about past orders
Communicate the benefits of creating an account
Communicate the benefits of creating an account
Communicate the benefits of creating an account
Communicate the benefits of creating an account
Prioritize content that directly serves user needs and goals, reducing clutter
Prioritize content that directly serves user needs and goals, reducing clutter
Prioritize content that directly serves user needs and goals, reducing clutter
Prioritize content that directly serves user needs and goals, reducing clutter
User Experience and Navigation
User Experience and Navigation
User Experience and Navigation
User Experience and Navigation
Simplify the process for users to update their personal information
Simplify the process for users to update their personal information
Simplify the process for users to update their personal information
Simplify the process for users to update their personal information
Ensure intuitive navigation throughout the account page
Ensure intuitive navigation throughout the account page
Ensure intuitive navigation throughout the account page
Ensure intuitive navigation throughout the account page
Ensure that the new design adheres to accessibility standards
Ensure that the new design adheres to accessibility standards
Ensure that the new design adheres to accessibility standards
Ensure that the new design adheres to accessibility standards
Customer Journey
Customer Journey
Customer Journey
Customer Journey
To craft a seamless user journey within the account page, I began by meticulously mapping out the entire navigation flow. This involved breaking down each interaction, from accessing the page to updating personal information and reviewing past orders. By taking a systematic approach, I ensured that every screen was accounted for. This comprehensive process enabled me to design with clarity and purpose, resulting in a cohesive and intuitive account page experience for our users.
To craft a seamless user journey within the account page, I began by meticulously mapping out the entire navigation flow. This involved breaking down each interaction, from accessing the page to updating personal information and reviewing past orders. By taking a systematic approach, I ensured that every screen was accounted for. This comprehensive process enabled me to design with clarity and purpose, resulting in a cohesive and intuitive account page experience for our users.
To craft a seamless user journey within the account page, I began by meticulously mapping out the entire navigation flow. This involved breaking down each interaction, from accessing the page to updating personal information and reviewing past orders. By taking a systematic approach, I ensured that every screen was accounted for. This comprehensive process enabled me to design with clarity and purpose, resulting in a cohesive and intuitive account page experience for our users.
To craft a seamless user journey within the account page, I began by meticulously mapping out the entire navigation flow. This involved breaking down each interaction, from accessing the page to updating personal information and reviewing past orders. By taking a systematic approach, I ensured that every screen was accounted for. This comprehensive process enabled me to design with clarity and purpose, resulting in a cohesive and intuitive account page experience for our users.
Sketches & Wireframes
Sketches & Wireframes
Sketches & Wireframes
Sketches & Wireframes
Then I started sketching and creating wireframes. These sketches helped me plan for the implementation of the improvement goals. This part of the process was particularly useful in planning for the updated order history with images and detailed descriptions. I focused on simplifying the process for users to update their personal information and made sure the benefits of creating an account were clearly communicated. Throughout this phase, I worked collaboratively with the team to turn these improvement goals into practical design elements.
Then I started sketching and creating wireframes. These sketches helped me plan for the implementation of the improvement goals. This part of the process was particularly useful in planning for the updated order history with images and detailed descriptions. I focused on simplifying the process for users to update their personal information and made sure the benefits of creating an account were clearly communicated. Throughout this phase, I worked collaboratively with the team to turn these improvement goals into practical design elements.
Then I started sketching and creating wireframes. These sketches helped me plan for the implementation of the improvement goals. This part of the process was particularly useful in planning for the updated order history with images and detailed descriptions. I focused on simplifying the process for users to update their personal information and made sure the benefits of creating an account were clearly communicated. Throughout this phase, I worked collaboratively with the team to turn these improvement goals into practical design elements.
Then I started sketching and creating wireframes. These sketches helped me plan for the implementation of the improvement goals. This part of the process was particularly useful in planning for the updated order history with images and detailed descriptions. I focused on simplifying the process for users to update their personal information and made sure the benefits of creating an account were clearly communicated. Throughout this phase, I worked collaboratively with the team to turn these improvement goals into practical design elements.
Final Designs
Final Designs
Final Designs
Final Designs
In the final design phase, I took the wireframes and evolved them to address feedback from both the team and our users. This collaborative effort was pivotal in shaping the account page's ultimate appearance. The design incorporated the enhanced visual appeal, ensuring a modern and engaging layout, while also making it more useful to the customers. Through iterative feedback and close alignment with the team, these designs were refined to better meet user needs and provide a more seamless and user-friendly experience.
In the final design phase, I took the wireframes and evolved them to address feedback from both the team and our users. This collaborative effort was pivotal in shaping the account page's ultimate appearance. The design incorporated the enhanced visual appeal, ensuring a modern and engaging layout, while also making it more useful to the customers. Through iterative feedback and close alignment with the team, these designs were refined to better meet user needs and provide a more seamless and user-friendly experience.
In the final design phase, I took the wireframes and evolved them to address feedback from both the team and our users. This collaborative effort was pivotal in shaping the account page's ultimate appearance. The design incorporated the enhanced visual appeal, ensuring a modern and engaging layout, while also making it more useful to the customers. Through iterative feedback and close alignment with the team, these designs were refined to better meet user needs and provide a more seamless and user-friendly experience.
In the final design phase, I took the wireframes and evolved them to address feedback from both the team and our users. This collaborative effort was pivotal in shaping the account page's ultimate appearance. The design incorporated the enhanced visual appeal, ensuring a modern and engaging layout, while also making it more useful to the customers. Through iterative feedback and close alignment with the team, these designs were refined to better meet user needs and provide a more seamless and user-friendly experience.
Enhanced visual appeal
Enhanced visual appeal
Enhanced visual appeal
Enhanced visual appeal
Straightforward navigation
Straightforward navigation
Straightforward navigation
Straightforward navigation
Learning about benefits of having an account in the Welcome Page
Learning about benefits of having an account in the Welcome Page
Learning about benefits of having an account in the Welcome Page
Learning about benefits of having an account in the Welcome Page
More information on past orders
More information on past orders
More information on past orders
More information on past orders
Welcome Page
Instead of having two separate pages for logging in or creating an account, I've consolidated both into a Welcome Page, which includes benefits for creating an account.
Instead of having two separate pages for logging in or creating an account, I've consolidated both into a Welcome Page, which includes benefits for creating an account.
Instead of having two separate pages for logging in or creating an account, I've consolidated both into a Welcome Page, which includes benefits for creating an account.
Instead of having two separate pages for logging in or creating an account, I've consolidated both into a Welcome Page, which includes benefits for creating an account.
Social login buttons are displayed at the very top for easy access. They can be used for log in or creating a new account.
Social login buttons are displayed at the very top for easy access. They can be used for log in or creating a new account.
Social login buttons are displayed at the very top for easy access. They can be used for log in or creating a new account.
Editing your profile through the dashboard
Editing your profile is much easier now—doable through the dashboard.
Editing your profile is much easier now—doable through the dashboard.
Editing your profile is much easier now—doable through the dashboard.
Simplified Address Book experience
Simplified Address Book
Simplified Address Book
The user is now able to keep their addresses organized and add new ones without leaving the page.
The user is now able to keep their addresses organized and add new ones without leaving the page.
The user is now able to keep their addresses organized and add new ones without leaving the page.
Roadblocks
Roadblocks
Roadblocks
Roadblocks
Because of limitations imposed by Shopify's framework, some interactions within the Account Page still display a somewhat "choppy" behavior. For instance, after saving an address, the page refreshes and returns to the top, rather than simply appending the address to the end of the list while preserving the user's current position. As of the date of this writing, our development team is diligently investigating potential workarounds and optimizations to alleviate these constraints and deliver a more seamless user experience.
Because of limitations imposed by Shopify's framework, some interactions within the Account Page still display a somewhat "choppy" behavior. For instance, after saving an address, the page refreshes and returns to the top, rather than simply appending the address to the end of the list while preserving the user's current position. As of the date of this writing, our development team is diligently investigating potential workarounds and optimizations to alleviate these constraints and deliver a more seamless user experience.
Because of limitations imposed by Shopify's framework, some interactions within the Account Page still display a somewhat "choppy" behavior. For instance, after saving an address, the page refreshes and returns to the top, rather than simply appending the address to the end of the list while preserving the user's current position. As of the date of this writing, our development team is diligently investigating potential workarounds and optimizations to alleviate these constraints and deliver a more seamless user experience.
Because of limitations imposed by Shopify's framework, some interactions within the Account Page still display a somewhat "choppy" behavior. For instance, after saving an address, the page refreshes and returns to the top, rather than simply appending the address to the end of the list while preserving the user's current position. As of the date of this writing, our development team is diligently investigating potential workarounds and optimizations to alleviate these constraints and deliver a more seamless user experience.
Results
Results
Results
Results
Through the entirety of this project, I've been committed to crafting a user experience that truly enhances our platform. The results of this redesign are incredibly promising. User feedback and engagement have significantly improved, with a notable reduction in customer inquiries thanks to the more informative order history and streamlined processes. Our users are now finding it easier to navigate their accounts, update their information, and understand the benefits of creating an account. Additionally, the design's visual appeal has been well-received, reinforcing our brand's modern and engaging identity. This project has not only delivered a more user-centric and visually pleasing experience but also highlighted the power of teamwork, adaptability, and iterative design in achieving meaningful results.
Through the entirety of this project, I've been committed to crafting a user experience that truly enhances our platform. The results of this redesign are incredibly promising. User feedback and engagement have significantly improved, with a notable reduction in customer inquiries thanks to the more informative order history and streamlined processes. Our users are now finding it easier to navigate their accounts, update their information, and understand the benefits of creating an account. Additionally, the design's visual appeal has been well-received, reinforcing our brand's modern and engaging identity. This project has not only delivered a more user-centric and visually pleasing experience but also highlighted the power of teamwork, adaptability, and iterative design in achieving meaningful results.
Through the entirety of this project, I've been committed to crafting a user experience that truly enhances our platform. The results of this redesign are incredibly promising. User feedback and engagement have significantly improved, with a notable reduction in customer inquiries thanks to the more informative order history and streamlined processes. Our users are now finding it easier to navigate their accounts, update their information, and understand the benefits of creating an account. Additionally, the design's visual appeal has been well-received, reinforcing our brand's modern and engaging identity. This project has not only delivered a more user-centric and visually pleasing experience but also highlighted the power of teamwork, adaptability, and iterative design in achieving meaningful results.
Through the entirety of this project, I've been committed to crafting a user experience that truly enhances our platform. The results of this redesign are incredibly promising. User feedback and engagement have significantly improved, with a notable reduction in customer inquiries thanks to the more informative order history and streamlined processes. Our users are now finding it easier to navigate their accounts, update their information, and understand the benefits of creating an account. Additionally, the design's visual appeal has been well-received, reinforcing our brand's modern and engaging identity. This project has not only delivered a more user-centric and visually pleasing experience but also highlighted the power of teamwork, adaptability, and iterative design in achieving meaningful results.
Reduction in customer inquiries related to past orders
Reduction in customer inquiries related to past orders
Reduction in customer inquiries related to past orders
Reduction in customer inquiries related to past orders
Reduction in customer inquiries related to managing their accounts
Reduction in customer inquiries related to managing their accounts
Reduction in customer inquiries related to managing their accounts
Reduction in customer inquiries related to managing their accounts
Reduction in customer care tickets related to account confusion
Reduction in customer care tickets related to account confusion
Reduction in customer care tickets related to account confusion
Reduction in customer care tickets related to account confusion
Takeaways
Takeaways
Takeaways
Takeaways
Understanding customer challenges was essential for creating user-centered designs
Understanding customer challenges was essential for creating user-centered designs
Understanding customer challenges was essential for creating user-centered designs
Understanding customer challenges was essential for creating user-centered designs
Effective communication and teamwork with cross-functional teams are key to project success
Effective communication and teamwork with cross-functional teams are key to project success
Effective communication and teamwork with cross-functional teams are key to project success
Effective communication and teamwork with cross-functional teams are key to project success
Adaptability and creative problem-solving skills are crucial in overcoming design constraints
Adaptability and creative problem-solving skills are crucial in overcoming design constraints
Adaptability and creative problem-solving skills are crucial in overcoming design constraints
Adaptability and creative problem-solving skills are crucial in overcoming design constraints