Brett Peary

Galaxies.dev

A web dev learning platform

Contribution

  • Branding
  • Product design
  • Frontend development

Client

  • Devdactic
  • Simon Grimm

Dates

  • 9/2022 - 4/2024
Galaxies.dev website, has a planet with some code in front of it and says 'Explore the edges of the web dev universe with us'.
Galaxies.dev website, has a planet with some code in front of it and says 'Explore the edges of the web dev universe with us'.

Context

Background

Simon Grimm of Devdactic & Ionic Academy wanted to create a platform for web dev beyond the tools he is known for to teach new JavaScript libraries to expand his customer base.

Challenge

Our challenge was to create a brand & web learning platform that can accommodate explorations into other JavaScript libraries & frameworks, as well as grow beyond his personal brand identity.

Role

I contributed to the strategy by creating a design vision based on the business goals. I guided the collaboration with the client and his team, handling the branding, design, and front-end UI development, including illustrations and animations.

Highlights

Adaptation

Where we landed

After our learnings based on our growth & user feedback, we created a new React Native-focused version of the service, a first of its kind.

A reworked version of the galaxies.dev homepage with a React native focus. It says 'Become an expert React Native developer faster', and it has a phone in the shape of a satellite with React and related libraries moving around it. And a zoomed in image of a meerkat astronaut as the user icon on the phone.

Highlight

Magic button

A dynamic rainbow button that calls attention to the main CTAโ€”whatโ€™s not to love? Hover me & see.

Attention to detail like this lets our tech savvy users know that we care about the little things and does it in a impactful way.

Adaptation

Animation

We implemented a dynamic SVG animation in our hero image, with content revolving around the new focus of the service. The animation grabs the attention of visitors and shows highly skilled dev-related polish, which resonates with our target audience.

Outcomes after adaptation

10x "10x" as a part of "10x growth compared"
growth compared

When compared with Simon's Ionic-focused sister service, galaxies.dev grew at a 10x rate after the React Native pivot.

6 "6" as a part of "6 months to match"
months to match

After six months, the service had grown to the equivalent size as the sister service, which had taken more than six years.

1k "1k" as a part of "1k user growth monthly"
user growth monthly

Even after the initial growth of the service after pivot, galaxies.dev continues to have impressive growth, currently at 1,000 users per month.

Learn More About This Project

There's much more to this project, including the steps we took and the key decisions made along the way. If you'd like to see the full picture and explore the details, feel free to continue on below.

Expand full case study
Scroll down to continue reading

Process

Business goals

Create a new brand & service to expand business scope & customer demand.

Mountain with start on top
Expand offerings

The new service should broaden the range of JavaScript frameworks & libraries beyond Ionic to allow for exploration and to attract a wider audience.

Expand instructors

Increase instructors beyond the previous service, allowing for growth by offering expertise of well-known, specialized developers, enriching the content & learning experience.

Rebrand for flexibility

Create a new flexible brand identity that allows for the new frameworks & libraries as well as new expert instructors to enhancing the platform's appeal.

Research

What we want to understand

Chat bubbles with an arrow pointing to it, and stars at the start of the arrow
Customer insights

We need to understand customer preferences & challenges to create a exceptional learning experience.

  • Identify preferred frameworks and libraries
  • Determine content format preferences
  • Uncover common learning challenges and pain points
Chat bubbles with an arrow pointing to it, and stars at the start of the arrow
Competitor differentiation

Understanding competitors offerings & business models can help identify opportunities for differentiation.

  • Analyze pricing models and course offerings
  • Assess content variety and depth
  • Evaluate UX & UI effectiveness

Research

How we got insights from customers

Social listening
Newsletter surveys
Customer feedback analysis
Online community engagement
Galaxies team talking on a video chat, with illustrations showing two of them with large drawn listening ears, and another talking with drawn lines to imply talking.

Research

How we learned from our competitors

Service analysis
Content comparison
Feature comparison
Positioning comparison
A screenshot of a FigJam window showing competitor comparison for our service with arrows and circles on top of it pointing out important points.

Research

What we discovered

Customers said they wanted...
  • Intros to the newest libraries to keep up to date
  • Short tutorials to try & in-depth videos to grow
  • Practical application examples to apply in jobs
We saw we could be unique by...
  • Offering free tutorials & in-depth pro courses
  • Update frequently with currently popular tech
  • Help users apply techniques to their own apps
Two people giving a high five with illustrated puzzle pieces and arrows pointing to a light bulb thought, a chat, and a pie chart with stars around them. Two people giving a high five with illustrated puzzle pieces and arrows pointing to a light bulb thought, a chat, and a pie chart with stars around them.

CONCEPT

How the concept took shape

Guided by our goals & research, we employed design thinking techniques envision a path forward, and a powerful concept emerged: the metaphor of a "web development universe".

The idea of feeling lost in the vast expanse of web dev was a feeling we all could relate to.

This led us to a compelling visual framework: imagining libraries as planets, with related tech forming their own solar systems, as if there was a React solar system, with a Next.js planet and React Router moon.

This 'cosmic' approach not only organizes information intuitively but also captures the sense of exploration and discovery inherent in learning web development.

An illustration inspired by 'The Little Prince', showing a character standing on a small planet in a starry night sky

Release

Testing the waters

We used a coming soon page to gather email address and conduct surveys with users.

Galaxies.dev coming soon website that shows some frontend tech icons, a newsletter subscription box and a sunrise from over a planet.

Concept

How the visual elements support the concept

A bento-style grid of various space related images, plantes and astronauts.
Space imagery, of course

Using photos of space allows us to make the metaphor clear and make the content visually interesting.

One logo, many planets

Multiple colors give flexibility for use in different contexts.

The galaxies.dev logo in several different color versions
Gradients make it pop

Gradients on black evoke the stunning imagery of epic telescope photos like those from the Hubble, making them an ideal fit for our project concept.

Circular gradients of green, yellow, orange, and red blurred.

Elements

Tech planets

Using planets to encase the logos of libraries takes the difficult problem of how to display many visually different logos and makes it visually attractive and engaging.

A grid of JavaScript library icons displayed on planet-like circles.

Structure

Engage users through community & ecosystem

We identified challenges users face in self-learning. To enhance the appeal of our service, we offer multiple avenues for engagement and support, fostering a sustainable learning environment.

Youtube

Videos & live streams allow users to engage and ask questions.

Twitter

Users are encouraged to chat directly with instructors.

Podcast

Highlighting Simon's podcast informs users that they can stay up to date by subscribing.

Office hours

Subscribers can join office hours with instructors to get help with projects.

Forum

The forum lets users get help from other users in the community.

Showcase

Landing page

Putting it all together

We created a flow for the landing page to maximize customer conversion.

The home page flow captures visitors' attention with a compelling value proposition and clear call-to-action, ensuring they quickly understand the service's benefits.

Subsequent sections build credibility and engagement through showcasing technical expertise and valuable content.

Interactive community elements show that they are not alone when learning, a customer pain point we identified. Featured content shows the highlights of the service to ensure conversions.

The final sections provide reassurance and a call-to-action, addressing doubts and prompting conversion.

Value proposition hero + CTA

Tech showcase

  • Tech planets

Content types

  • Quick Wins
  • Tutorials
  • Courses
  • Pro value prop & CTA

Community & ecosystem

  • Community
  • Live streams
  • Social
  • Podcast
  • Office hours

New & featured content

Guarantee & final CTA

The full galaxies.dev homepage. The full galaxies.dev homepage, part two of three. The full galaxies.dev homepage, part three of three.

Feature

Simple sign-up & payment

Clear & simple sign-up, combined with easy-to-understand payment flow increase conversions, so making multiple quick access points with a minimal step flow was important to us.

A unified sign up and payment model for the web service.

Feature

Netflix-style discovery

We designed the course and tutorial page in a Netflix-style layout to enhance easy discovery and grouping. This intuitive interface allows users to browse courses just like they would find shows on Netflix, making it easy to find content like "Fun Weekend Projects" or "Advanced JavaScript Techniques."

This user experience is effective for learning web dev as it simplifies navigation and reduces cognitive load. Grouping courses by themes helps users quickly identify relevant content, creating a more engaging and efficient learning experience.

Filtering

We implemented a tech icon filter to streamline the exploration of different libraries. This intuitive filtering system uses recognizable icons to represent various tech stacks, allowing users to quickly find and navigate to the resources they need.

A Netflix-style version of the galaxies.dev course page.

Feature

Course page

Player with keyboard controls & theater view

A course page with a video player on the right and a table of contents on the left.

Feature

Tutorials

Table of Contents that tracks with content

A tutorial page of 'Build a Todo App with React Native and Firebase' with a table of contents.

Adaptation

Adaptation

Inital outcomes & challenges

Good signup numbers

Upon the initial release, our site received a moderate number of signups compared with existing user numbers.

Pro conversions low

Despite good signup numbers, we observed a low conversion rate to Pro subscriptions.

HMW raise conversions

What can we do to improve Pro conversions? This is our most important challenge.

Adaptation

Discovering a pattern

As we dug deeper, we noticed many new signups accessed React Native courses. We reached out, and their feedback was clear: they struggled to find high-quality React Native content.

What if we could become their go-to source for React Native?

Adaptation

What we learned

Through talking with new users, several things became clear after the release and testing our pivot.

Apps > libraries

Simon being an expert in Ionic meant that most people interested in his content were focused on app dev over general JavaScript dev.

Will pay for work

Users were interested in new frameworks and free content but only paid for content that helped with their current job or specific role, to skill up in one area and will pay for it.

React Native gap

React Native was very popular & had much more interest than Ionic, but there was no educators specifically focusing on it, so there was a gap in the market.

Adaptation

Refocusing the service

Based on the results of initial release, the uptick from React Native devs and their feedback, we decide to reinvent the service as a React Native-focused one.

A reworked version of the galaxies.dev homepage with a React native focus. It says 'Become an expert React Native developer faster', and it has a phone in the shape of a satellite with React and related libraries moving around it. And a zoomed in image of a meerkat astronaut as the user icon on the phone.

Adaptation

Reworking navigation

User feedback revealed that these users frequently sought specific content. Therefore, we redesigned the course page to enable quicker filtering by technology and topic. This approach replaces the previous casual, Netflix-style browsing with a more focused, one-directional filtering system.

A reworked version of the course page with more straightforward filtering.

Outcomes

Outcomes

Outcomes after adaptation

10x "10x" as a part of "10x growth compared"
growth compared

When compared with Simon's Ionic-focused sister service, galaxies.dev grew at a 10x rate after the React Native pivot.

6 "6" as a part of "6 months to match"
months to match

After six months, the service had grown to the equivalent size as the sister service, which had taken more than six years.

1k "1k" as a part of "1k user growth monthly"
user growth monthly

Even after the initial growth of the service after pivot, galaxies.dev continues to have impressive growth, currently at 1,000 users per month.

Reflection

Kind words from the client

Simon Grimm (smiling with a beard and black shirt)
Simon Grimm

It's rare to encounter a talent who not only excels in aesthetics but also possesses the technical prowess of a seasoned coder. Brett that rare gem. Collaborating with Brett on my project was a masterclass in creativity, and practical execution.

His ability to understand, interpret, and then transform my nebulous ideas into a cohesive and striking brand identity was remarkable. His approach was not just about design; it was about creating a narrative that resonated with my brand's core values and vision.

Beyond the work we did together, Brett has become a trusted friend and advisor. His ongoing input and ideas continue to add value to my brand, long after the project's completion. His passion for design and innovation is contagious, and our brainstorming sessions are something I look forward to greatly.

In Brett, you don't just find a designer; you find a visionary partner who will journey with you in turning your vision into a tangible, beautiful reality. I can't recommend him highly enough.

Reflection

My thoughts

A few of my thoughts after finishing this project.

Brett Peary (smiling with a beard and black shirt)

When working on Galaxies.dev, I had never worked with a client & team where we were so in tune with each otherโ€”it was almost like we could read each other's minds. The way we collaborated grew so naturally, out of excitement and curiosity, just watching it unfold before our eyes almost effortlessly. I am so proud of what we created together, and I am truly grateful for the experience.

I am excited for Simon & Galaxies because I can see the potential in the brand and the concept, and I believe he is perfectly positioned to keep expanding his user base, provide an increasingly better learning experience for his customers, and develop the service into something well beyond the one-man origins, as was his goal when we started the project.

In the work that we do, we don't ever get to feel like we made something perfect, but in this case I think we got pretty close, flaws and all.

Thank you for reading this far. I'd love to hear what you think.

Reach out.