Project type
UX/UI design
Tools
Timeline
When I first joined the Dialogue Theory team in August of 2021 one of the first clients I worked closely with was AtomicMind, an online tutoring company that excels in student admissions to top colleges and universities by providing a personalized, holistic curriculum tailored to each student.
As AtomicMind began setting in motion ideas for growing their business and establishing their brand, I worked directly with their CEO and founder under the guidance of my design lead, Chris, on storytelling and brand strategy over the course of three years and multiple web experiences.
I first worked on designing AtomicMind’s multi-page marketing site from a simple landing page.
I also assisted in the creation of an MVP for a digital platform that helps students and tutors collaborate asynchronously and via live video sessions. Features include an interactive calendar, task creation, note-taking, file uploads, and commenting within the platform.
I worked closely with a Webflow developer to design and launch Discover+, a directory of over 750 of the best summer programs, internships, and other extracurricular opportunities for students of all ages.
As AtomicMind prepared to launch a series of reading programs for young learners ages K-5, I worked together with their team to create and introduce a group of mascots for their new sub-brand, QuantumKids.
Finally, I revisited the marketing site to refresh the design and ensure a cohesive brand identity across all of AtomicMind’s web experiences.
As a new designer at Dialogue Theory, one of my first projects was converting AtomicMind’s existing landing page into a multi-page marketing site and establish a web presence.
Before I joined the project, Dialogue Theory’s founder and lead designer, Chris Oquist, had been working with the AtomicMind team on their marketing strategy, as well as a web platform that helps students connect and collaborate with their tutors, so I leveraged early design explorations and branding as a starting point.
AtomicMind’s highly skilled team of educators have years of tutoring experience and a proven track record of helping students get accepted to the top schools in the country, but lacked a comprehensive landing page that tells their story, connects them with new clients, and attracts top tutors to join their team.
Working with AtomicMind on their website was a collaborative effort between me, Chris, and the ambitious husband-and-wife team at the helm of the company. Weekly check-ins at every step of the process ensured that the design direction was aligned with AtomicMind’s needs and vision for the company’s future. Their core brand colors, fonts, and logo had already been established so I was able to reference early mockups of the landing page that was live at the time.
I began to get acquainted with AtomicMind’s founders, Leelila and Ernie, during weekly strategy and branding calls they had with Chris and I. I reviewed early design explorations and mood boards that were presented to get an idea of the look and feel they were going for, which was minimalist and high-tech, but accented by bold colors and textures.
I sketched wireframes for a proposed homepage and about page layout with the help of Chris, who was familiar with what types of components and sections would be needed to effectively tell their story. Once the wireframe sketches were validated and approved by AtomicMind, I could begin to experiment with a design direction based on the references that had already been compiled.
However, I did want to do some research for myself, and looked at other companies in the Ed-tech space to see what works well and what could be done better. It was clear Leelila and Ernie wanted the site to feel more sophisticated and not include imagery that suggested a younger audience, since their signature service caters to high school juniors and seniors. I thought about how I could add more human visual elements and textures because AtomicMind's approach is human-centered and unique to each student.
Since the target audience is the parents of students and not students themselves, I understood the choice to go in a more sophisticated direction, but I felt that there could be clearer visual cues as to what AtomicMind is and does. I took a risk by choosing to go in a new, different direction and began creating vector illustrations of objects and symbols that weren’t too generic but represented unique hobbies that students might be into, as well as references to technology. I was inspired by old-school composition notebooks and used a chalk-like texture to accent the graphic illustrations and create collages to accent the sections of copy.
Ultimately, AtomicMind wanted to stick to the more modern, sleek, “high-fashion” style referenced in the mood boards, but also explained that this style of website would appeal to their international audience, which is crucial for their growth.
In my next iteration, I focused on making the text the star instead of leaning on visuals. I went in a more editorial direction with exaggerated headings, lines, and abstract visualizations. I experimented with gradients that contrasted the dark, angular lines without being distracting.
The simple, minimalist design was what AtomicMind was looking for and after the remaining templates were created, we moved into the development phase.
I worked closely with Chet, one of Dialogue Theory’s WordPress developers, as he built the site, ensuring consistency with the designs. During our collaboration, I became familiar with content management systems in WordPress and the invaluable perspective of how designs get translated to code and are built.
Meanwhile, Chris and I were collecting content from AtomicMind and brainstorming headlines that were short and sweet, but still punchy.
Once the site was built and most of the content had been finalized, we could see which breakpoints resulted in awkward heights of text, or headings that were forced to 2 lines. Thankfully, most issues could be solved by making minor adjustments to font sizes or the widths of text boxes.
AtomicMind reported increased traffic to the site and new clients using the forms to connect with them. The completion of the new website was a big milestone for AtomicMind as a company and brand, and we were just getting started.
As a junior designer fresh out of boot camp and new to the Dialogue Theory team, this was my first full-site redesign project that I took ownership of. I took a risk and advocated for the decisions I made, and pivoted based on feedback from the client. The experience of working with our WordPress developer throughout the site build taught me to consider how a designed component might actually be built and to consider potential development challenges during the iteration phase to avoid setbacks later in the process.
Extracurriculars are a crucial part of all students’ applications to competitive colleges and universities. AtomicMind’s team specializes in matching students to the best programs and internships for their chosen field of study. In an effort to reach more schools and students, the company asked Dialogue Theory to design a searchable, public database of these programs.
AtomicMind is still a relatively small start-up focused on not only monetary growth, but growing their digital footprint, engagement, and social proof. The more people who know about AtomicMind and have a positive experience without the pressure of commitment could result in a new client down the line, either directly or by word of mouth. Instead of marketing to parents of students, Discover+ can reach students of all levels directly.
Historically, the majority of Dialogue Theory’s web projects were built using WordPress, but due to other projects our developers were working on, completing the project by the desired launch date would be an issue. With Webflow’s no-code builder becoming more sophisticated and popular, we outsourced a Webflow developer, Tejus, to help us deliver the site on time.
AtomicMind had already been compiling a list of opportunities and were in the beginning stages of categorizing and labeling each one so they could be searchable by type, grade level or age, location, cost, and time period. Tejus recommended we use Airtable to sync the data to Webflow, but with over 700 opportunities (and counting), organization and synchronization across teams would be essential. We assisted the AtomicMind team in finalizing data fields, establishing a workflow for updating fields, and ensuring data is entered correctly.
Once the AtomicMind team felt more comfortable working in Airtable, I shifted focus to wireframing the full experience so Tejus could ensure it was within Webflow’s capabilities. I also worked with my lead designer, Chris, to determine the best user experience. While I initially planned to have the filters along the left margin, with a single column of stacked cards in the center, the number of categories would require scrolling up and down and could be disorienting as the results filter in real-time.
By shifting the filters to the top of the page and focusing on the most crucial filters (type, field of study, and grade level), the remaining “advanced filters” can be hidden in a drop down, allowing users to see more content above the fold.
Next, we had to determine which criteria would be displayed on the cards themselves, and how they would be laid out in an accessible way. Including a photo would add a visual element and avoid a screen full of text, but stock images can end up looking generic, and sourcing logos can be time consuming.
After presenting variations to the AtomicMind team, the majority decided on the horizontal positioning of the filters, and weighed in on which categories would be displayed on each card. We discussed the option of including images and the team ultimately agreed that taking the time to source logos for each institution was worth it for a more aesthetically pleasing browsing experience. The team also agreed that creating an account would not be required, but would allow users to save individual opportunities or a set of search criteria.
While I moved into the next phase of design, the AtomicMind team was continuously adding new opportunities, including some with additional criteria or exceptions to already established rules, which would need to be incorporated into the advanced filtering options.
I was excited for the opportunity to push the AtomicMind brand in a new direction that is accessible and appealing to a younger target audience (students instead of parents). Rounded edges of the filter box and cards give the page an app-like look and feel. I also added additional shades of light grey so the primary color palette could be reserved for CTAs and headings.
The number of options within each filter category determined whether a drop down selector or pill shaped button would be used. When filtering by location, users can choose to filter broadly by region by selecting an image, or choose specific states and countries by checking off locations from a list.
Prototyping at this stage was crucial to test the overall user experience at every step, but also validate what Tejus and Webflow have the ability to build within the agreed upon timeframe and scope of work.
The last phase of the design was organizing the information into a template page that displays all of the information gathered by AtomicMind. Like the cards on the index, it was important that the layout is aligned properly and hierarchy is clear and consistent. I had to consider edge cases where not every category is relevant to every opportunity and is left out, or if some opportunities have multiple tags under one category, or the final character count is higher than expected. A simpler layout makes those edge cases stand out and throw off the balance of the page, but a complex layout could be overwhelming and difficult for the eye to scan to find specific information on the page quickly.
Some adjustments to the data in Airtable and discussion with the AtomicMind team helped us collectively decide on a simple layout with clear headings.
Luckily, weekly check-ins and the close collaboration between everyone involved prevented any major issues from arising when development began. Tejus connected Airtable to Webflow early on so we could see in real-time if there were any entries that caused errors or broke the layout design.
As I finished the designs for the log in, account settings, and favorites screens, the AtomicMind team could comment directly in Webflow to notify Tejus of any issues, instead of relying on emails back and forth or taking extra time on calls to address specific issues.
When Discover+ launched it was broadcast on local news outlets by Jane King. AtomicMind tutors shared the database with students who expressed excitement and eagerness to try out the site.
After the successful launch of Discover+, AtomicMind was ready to debut new programing for younger audiences. QuantumKids brings AtomicMind’s personalized approach to learners in grades K-5 and offers a weekly book club to build foundational reading skills. As a hook for their new offerings, and a way to delight their younger students, AtomicMind wanted to use characters, or mascots, to help kids stay engaged with the curriculum.
Even though QuantumKids was in its early stages, the AtomicMind team wanted to be able to get the word out to parents and have a marketing site introducing the program ready. With this in mind, I wanted to keep the design simple and provide a core set of components the team could use to build additional pages and add more content as QuantumKids evolves.
To get an idea of the look and feel the team envisioned for the new brand, I created mood boards from similar educational digital experiences. Despite leaning toward more sophisticated, minimalist design in the past, the team wanted the QuantumKids brand to lean into bright colors and shapes and embrace more youthful visuals.
I put together some wireframes with suggested sections to help give the team a visual outline as they worked on finalizing content.
In the meantime, I took inspiration from the mood boards and began conceptualizing the characters that would become the QuantumKids mascots. Each subject of the QuantumKids curriculum, Language Arts, Math, Science, Social Skills & Communication, and Arts & Creativity, would have a character "helper" assigned to it. An early idea I had was inspired by a “bookworm” concept, but felt that each character needed to be more distinct. I didn’t want the characters to be too specific, like a certain species of animal, but also not entirely human.
I started playing around with different shaped eyes and mouths and other accessories like hair and glasses, a la “Mr. Potato Head”...And that’s when “The Blobs” were born. The “worm-like” shape became more ambiguous and round, and from there the possibilities are literally endless.
I put together a starter set of faces and shapes that can be mixed and matched to create different characters. They chose their favorites to be the official mascots, while the rest became supporting characters for the website, along with a set of noisy gradients and other symbols to ground them in a “creative space.”
At launch, AtomicMind wanted to have three original animated videos; one that gives an overview of QuantumKids, one that explains the Pages and Pals book club, and one that introduces the blob mascots.
I created the promotional videos using Figma’s Motion plug-in with original graphic illustrations that accompanied voice-over narration. One video introduces the Pages and Pals programming and one specifically introduced the chosen Blobs that represent the core curriculum.
Three years after the launch of AtomicMind’s main website, it was clear that the design needed a visual update that matched Discover+ and QuantumKids. The site would also be moved to Webflow, since the team was more familiar with the content management system after working on Discover+ and so that the primary AtomicMind ecosystem could be managed in one place.
For the most part, the structure of the site wasn’t changing, but almost all of the content on each page was rewritten to be more clear and specific, especially the services pages. I worked directly with the team to come up with a reusable services page template that outlines and highlights AtomicMind’s unique approach.
It was also crucial to improve the main navigation menu to make it easier to find relevant services. I designed a mega menu that sorted services by grade, so parents can quickly identify what AtomicMind can offer their children based on their current grade-level.
A utility bar was also added to the header for quick access to all of AtomicMind’s sub-brands.
After 3 years of developing the AtomicMind brand via Discover+, QuantumKids, and their online learning platforms, it was clear that the visual direction was moving away from editorial, and moving toward a softer, more youthful feel.
To achieve cohesion across all sites, I eliminated the blocky secondary font (Radwave), which wasn’t used for Discover+ or QuantumKids, improved the layout by using cards to anchor the content, and embraced fully saturated gradients in the brand's original color scheme.
Over the course of my engagement with AtomicMind, I pushed myself creatively and professionally. I not only took the lead on visual design across all three experiences but also led content strategy calls, and cultivated the overall brand so it's recognizable in all digital experiences.
At the conclusion of our engagement, I delivered a full catalog of brand assets and tutorials to give the AtomicMind team more autonomy and confidence to take on content creation and management on their own.
