Mighty Site Builder

Welcoming our new teen overlords

Client:

Role:
Principal Product Designer

Skills:
Product Strategy, Product Design, Wireframing, Prototyping, Facilitation, Agile

EXPANDING OUR REACH

Mighty is a NYC-based startup that has a mission of empowering kids through entrepreneurship. They’ve historically focused on 8-12 year olds, but have decided to widen the age range and actively serve the teen community as well. Their brand has historically been built around younger kids and their parents.

A screenshot of Mighty's former homepage that is very kid-oriented
A screenshot of one step of Mighty's former onboarding that is very kid-oriented

For me, that means changing our voice & tone, re-examining the UX & UI patterns we’re using, but mostly it means mobile. Going mobile-first, big time. I know, I know – it should have been mobile-first, well, first. But the data from our actual users showed abysmal mobile usage and it fit in perfectly with user interviews showing that kids that young were mostly on iPads or computers. So while mobile-first is a killer way to make hard decisions and craft a great product, it wasn’t the path that made the most sense for our user base.

How I Tackled the Problem

Foresight is close to 20/20

Before this even started, as new features would be prepared and defined, I would consider how they would work on mobile-sized devices even though that wasn’t necessarily in the implementation plan. By making as many things as modular as possible, I was prepping the platform to have as easy of a transition to mobile-forward as I could muster.

Product card components showing different states and device sizes

And any time I would make edits to an existing component in the design system, I’d create a mobile version to make future us happy. While they might not live in Storybook just yet, at least design was out of engineering’s way. It also gave me a great excuse to consistently bring up mobile in discussions, design reviews, and handoffs.

New Users with New Experiences

Catering to a young demographic forced me into a much more bounded set of UX & UI patterns and drove me to make some pretty challenging decisions based on that group’s limited exposure to patterns – and for some of them – reading ability.

As teens entered the picture, I created new patterns to simplify navigation and proposed new organization options to make the product easier to use by grouping related features.

Through moderated virtual user interviews, we learned that the older audience had an adamant appreciation for the simplicity of the existing product that was shaped by exposure to adult-focused competitors like Shopify and Wix. They also told us that some aspects of the UI made them question if they had aged out of our target audience.

Image of sticky notes from a planning workshop
Product definition workshop, redacted for privacy.

Most importantly, the user interviews validated the next stop on our roadmap – promoting the creation & customization of your very own website to be the hero of the experience.

Where we ended up

I conducted competitive research both in and outside of the target market to get a better understanding of the successful patterns, to highlight any features that would be valuable additions, and the discover any current features that could be cut.

Image of comparative research study output

EDITING TOOLS

This is where mobile-forward really kicked into high gear. I moved us to a bottom bar for the main navigation within the platform and used tabs toward the top to control the current page. Really leaning into native mobile design patterns (especially since our users severely skew toward iOS) also gave me space to use sheets to display component controls.

Animated image of a website being edited on a phone

PUBLIC-FACING SHOPS

Balancing the user need for individualism, the user desire to be cool, the business need to use existing data structures, and the business need for small & fast bets, I made a few design decisions.

Make the logo bigger (shudder). Well, not the logo exactly – the profile picture

Use organic shapes to mask, decorate, or overlay images

Black organic shapes like basic flowers and brush strokes

Go dark by default

Improve the font selection

I also made the UI a bit edgier and removed some of the aspects that could unintentionally signal to our older audience that this isn’t a place for them.

Moving Forward

A phone and a laptop, both with the same Mighty website displayed on them

As we continue to refine our market fit, and conduct ongoing user research, the team is committed to building a mobile-first, generationally-inclusive product that embodies the mission of financial literacy & entrepreneurship.

You can visit my Mighty Shop to see it live in production.