Kari Gran B2B E-commerce Portal

Please note: This project is currently in progress. 


Capstone Project. Kari Gran currently has an outdated system in place for receiving and inputing vendor orders. They have tasked my team with developing a user experience for a B2B portal. 

The are several challenges presented by this project:

  • Reduce work of Kari Gran team
  • Empower B2B buyers to self service
  • Sufficient contextual research
  • Technical hurdles to implementing design
  • Defining success
  • Providing a meaningful improvement over existing process
  • No existing B2B portal as a starting point or existing metrics.


  • Competitive Analysis of B2B portals
  • Contextual Interviews of B2B users
  • Tree test
  • IA card sort
  • Wireframes
  • Lo-fi prototype
  • Hi-fi prototype key interactions
  • A/B testing of key interactions


Since this project is still in progress, I'll show share the project aspirations here for now. 

  • Transform and expand what KG thinks is possible
  • Create a streamlined and enjoyable on-boarding process
  • Optimize customer application
  • Reduce workload for client and for their customers
  • Make repeat orders easy
  • Reduce time for KG customers to complete ordering tasks
  • Create an easy asset management interface
  • Delight the client and exceed their expectations


Continue to scroll down if you would like to read about this project in full detail

Research Goals

  1. What are the usability successes of existing portals?
  2. What are the usability opportunities of existing portals?
  3. What context will the vendors be using the portal?
  4. What context will Kari Gran be using the portal?



Vendors will need to register for an account. Kari Gran will then approve that account. Confirmation is sent to vendor. Vendor can then enter the B2B ecommerce portal. This is very different from what the experience the client explained during the brief.



After conducting the research, our teams conducted the follow list of key user features needed for the B2B ecommerce portal:


  • Size Number
  • SKU #
  • Quick Add
  • Photos
  • Product relationship
  • History of orders



  • Good Information Architecture
  • Search Bar



  • Hold payment
  • Select payment date
  • Save
  • Confirmation 

User Flows & Sketching

My team mapped out the user flows together but then tackled the sketching of certain sections. I took on the Kari Gran side of the portal. 

Next Steps

My team is currently developing low-fi prototypes for usability testing. Check my Instagram for updates!