Merchant Portal Design @ Roqqett
Web App
Role | Project lead, working alongside my PM and development agency
Skills
Tools:
Figma
Wireframing
Prototyping
The previous, rushed solution resulted in slowing down business workflows.
The old portal was built and designed by our development agency under time constraints. Whilst it worked as an MVP, this showed cracks very quickly.
There were 2 main problems I had to solve with this:
As there was too much information in the merchant portal, it was hard for business owners to skim and find relevant information quickly.
Since the previous layout didn't allow for scaling the platform, the new refund capability could not be added easily.
Old merchant portal
I prioritised elements to optimise for scannability + scalability for refund functionality
The solution to this was
Redesign the payments page to present the information clearly
Add refund and reconciliation capabilities and future features in mind
Set precedence for the new UI style of the portal
User flow mapping to understand the hierarchy of information + technical architecture
The merchant portal is the backend of merchants using Roqqett, housing many key capabilities such as refunds.
I mapped out the key moments in the user flow to create an intuitive experience whilst streamlining the information on the original portal to create hierarchy.
Creating complex user flows involving multiple devices
Rapid wireframing in FigJam
New merchant portal
Allowing for multiple statuses and other features as the product scales, whilst keeping only the crucial information on this page.
Learnings
Not every piece of information is important at every moment, prioritise the most crucial to reduce overwhelm and increase the value of your product.
Building an MVP requires a fine balance between optimising for time to value, whilst not sabotaging your future self with re-designs / re-architectures because the MVP was so rudimentary.
Merchant Portal Design @ Roqqett
Web App
Role | Project lead, working alongside my PM and development agency
Skills
Tools:
Figma
Wireframing
Prototyping
The previous, rushed solution resulted in slowing down business workflows.
The old portal was built and designed by our development agency under time constraints. Whilst it worked as an MVP, this showed cracks very quickly.
There were 2 main problems I had to solve with this:
As there was too much information in the merchant portal, it was hard for business owners to skim and find relevant information quickly.
Since the previous layout didn't allow for scaling the platform, the new refund capability could not be added easily.
Old merchant portal
I prioritised elements to optimise for scannability + scalability for refund functionality
The solution to this was
Redesign the payments page to present the information clearly
Add refund and reconciliation capabilities and future features in mind
Set precedence for the new UI style of the portal
User flow mapping to understand the hierarchy of information + technical architecture
The merchant portal is the backend of merchants using Roqqett, housing many key capabilities such as refunds.
I mapped out the key moments in the user flow to create an intuitive experience whilst streamlining the information on the original portal to create hierarchy.
Creating complex user flows involving multiple devices
Rapid wireframing in FigJam
New merchant portal
Allowing for multiple statuses and other features as the product scales, whilst keeping only the crucial information on this page.
Learnings
Not every piece of information is important at every moment, prioritise the most crucial to reduce overwhelm and increase the value of your product.
Building an MVP requires a fine balance between optimising for time to value, whilst not sabotaging your future self with re-designs / re-architectures because the MVP was so rudimentary.
Merchant Portal Design @ Roqqett
Web App
Role | Project lead, working alongside my PM and development agency
Skills
Tools:
Figma
Wireframing
Prototyping
The previous, rushed solution resulted in slowing down business workflows.
The old portal was built and designed by our development agency under time constraints. Whilst it worked as an MVP, this showed cracks very quickly.
There were 2 main problems I had to solve with this:
As there was too much information in the merchant portal, it was hard for business owners to skim and find relevant information quickly.
Since the previous layout didn't allow for scaling the platform, the new refund capability could not be added easily.
Old merchant portal
I prioritised elements to optimise for scannability + scalability for refund functionality
The solution to this was
Redesign the payments page to present the information clearly
Add refund and reconciliation capabilities and future features in mind
Set precedence for the new UI style of the portal
User flow mapping to understand the hierarchy of information + technical architecture
The merchant portal is the backend of merchants using Roqqett, housing many key capabilities such as refunds.
I mapped out the key moments in the user flow to create an intuitive experience whilst streamlining the information on the original portal to create hierarchy.
Creating complex user flows involving multiple devices
Rapid wireframing in FigJam
New merchant portal
Allowing for multiple statuses and other features as the product scales, whilst keeping only the crucial information on this page.
Learnings
Not every piece of information is important at every moment, prioritise the most crucial to reduce overwhelm and increase the value of your product.
Building an MVP requires a fine balance between optimising for time to value, whilst not sabotaging your future self with re-designs / re-architectures because the MVP was so rudimentary.
