Comment

#BoldBossTribe :: Phuong Mai of P.MAI

Bold & Pop #BoldBossTribe Feature with Founder Phuong Mai of P.MAI
Bold & Pop #BoldBossTribe Feature with Founder Phuong Mai of P.MAI

Tell us your bold boss story!: 

Handbags are a pain—literally. But they don’t have to be. Here’s my story on how I decided to change that.

I started my career in management consulting. While it was an incredible learning experience, the job took a toll on me physically. Client visits meant I was living out of suitcase and racking up points like nobody’s business. I still remember the routine. On Mondays, I would head to the airport at an ungodly hour with several bags carrying everything I needed for the week. I’d lug my laptop and purse everywhere on one shoulder, working from the client site to my hotel room. Wash, rinse, and repeat. By Thursday night, I’d returned home with enough energy to lie comatose in my bed.

Needless to say, the physical stress on my body eventually caught up to me. The slight discomfort in my right shoulder I noticed early on grew into an excruciating pain. Exasperated, I visited my doctor who detected the uneven weight from my bags had misaligned my collarbone. She ordered me to switch to a backpack immediately for better weight distribution and to reduce the risk of pinch nerves on my one shoulder.

That doctor’s visit served as a wake-up call. No woman should ever have to sacrifice her health for fashion. I went straight to a department store to trade in my clunky laptop bag and purse for an accessory I thought I had resigned to my school days: a backpack. I was less than pleased with the options available. All the backpacks large enough to fit my laptop and personal items were extremely utilitarian and masculine, and all the fashionable backpacks were too small to fit my laptop. In the end, I could not find a single backpack that combined fashion with function, and had to settle for a sporty black unisex backpack.

Bold & Pop #BoldBossTribe Feature with Founder Phuong Mai of P.MAI

While I had to compromise (temporarily at least) my choice of accessory, I decided I could no longer compromise my health for my profession. I left my management consulting job and began working at a boutique strategy and design consulting firm. This experience taught me the power of design thinking and encouraged me to take the first steps towards designing the bag I wanted to buy: a fashionable, functional laptop bag for women. As I talked to more and more women about what they wanted in a bag, I realized that most shared my frustration. They realized their overweight handbags were causing strain on their bodies, but didn’t feel as though they had any other choice. This was when I knew there was a significant market need for the bag I wanted to design.

I eventually left my job and decided to take the leap to create my own brand with a simple philosophy: combine luxury and utility into products that inspire women to look and feel their best. I believe women should not have to sacrifice comfort for style. With the launch of P.MAI, we’re now giving women around the world the new option to carry a backpack worthy of the boardroom and runway. Nothing gives me more pleasure than hearing from customers, who have told me that they can’t imagine going back to a handbag now. To think that none of this would’ve been possible without my misaligned collarbone and the courage to lean in to create a bag that allows women to prioritize their own health is truly humbling.

We're all about bold boss moments, tell us about one of yours!: 

In terms of a bold boss moment, I do have a funny story. Being an entrepreneur means constantly putting yourself out there—even in the face of naysayers. Once, I saw Tyra Banks walking down the streets of San Francisco, down the block from where I used to lived. She was popping in and out of some shops and so I nervously followed her, waiting for the right moment to talk to her. As she was coming out of the store, I said, "Excuse me, Tyra?" and she immediately waved me off, not in a mean way, more like in a "half-sorry, I don't want to be bothered-way". While I felt shut down at first, I decided to persevere and confidently said "I designed this backpack and just want to know what you think!". She turned around, smiles, checked out the bag, and gave me two thumbs ups. It was a small moment that took a total of a few minutes—but it was a reminder to me that you have nothing to lose when you ask.

Starting my own business and getting recognized by media like TechCrunch has been one of my proudest achievements. 

What advice or words of encouragement do you have for the Bold Boss Tribe?: 

The hardest part won’t be quitting your day job to make the entrepreneurial leap, but actually working hard to see your idea through—every day, hour by hour, through the doubts and setbacks. Learn to be ok with ambiguity. Lean into your strengths and ask for help in areas where you have gaps. Yes, it will probably take 3x as long and 3x as much as you expected. But if you’re solving a problem that you truly believe in, it will be worth it!

Website | Facebook | Instagram | TwitterPinterest

Have an awesome bold boss story of your own? We want to hear from you! Check out the dets and submit your story for consideration.

P.S. Exciting news! We launched a free #BoldBossTribe Facebook Group and would love for you to join us! Come on over!

Comment

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

P.S. Exciting news! We launched a free #BoldBossTribe Facebook Group and would love for you to join us! Come on over!

Comment