MAYVENN MOBILE-OPTIMIZED WEBSITE

web design mobile-optimized design
  • Twitter Bootstrap
  • Javascript / AngularJS
  • HTML / CSS
check out the code

Mayvenn allows salons and beauty service providers to build an online storefront for their physical good sales, thereby also avoiding holding inventory.

The request was to design their vendor dashboard to have four main functions -- 1) an ability to track performance in sales, 2) a way to edit their profile, 3) a way to refer more vendors, and 4) a way to buy product to fulfill customer orders. The dashboard also needed to be mobile optimized as many vendors accessed Mayvenn with their phones.

My goal for the sales page is to make all the key stats easily accessible at a glance with more details de-emphasized but also present if the vendor is interested in looking more closely.

My main goal for the buy product page is to have a live updated shopping cart and running total of purchases. I did this with AngularJS. The challenge with the buy product page was how to organize so many different potential SKUs since orders were for hair and each disparate length had a different SKU. I decided on a dropdown versus a series of tiles after a bit of debate, because it would translate better for the mobile optimized version and because it allowed for more intuitive multiple orders of several different lengths of the same type of hair.

For the mobile version, though I am uncomfortable with having the menu on the left hand side where it's hardest to reach for the user, the client opted for this version because of the visual congruity with the website version. He believed that vendors would usually be sitting down and looking at their dashboard at a desk rather than while moving, and would thus have both hands easily available for navigation.