You. Guys. I’m so excited to share my latest development project with you. Lexi D’Angelo is an amazing coach that I’d heard quite a bit about. I’d 聽had several friends going totally crazy over how amazing her 1:1 coaching and courses were and I loved her unique approach to things. You can probably imagine how excited I was to get the chance to work with her on the development of the Biz Woo School website.
The vision Lexi had for this school is absolutely incredible and I’m so honored to have been part of the team that made it happen.
Lexi doesn’t consider herself a designer, but you’d never know it after seeing the gorgeous and unique mockups she gave me for this website. She did such an amazing job with creating a unique and magical feel through her designs. From the second I saw them, I couldn’t wait to dive into the code.
Update: This site is no longer live – all links have been removed.
Framework
I generally develop my themes on the Genesis Framework, but since Lexi needed specific course and membership capabilities she decided she wanted to go with WPLMS. At first I was a little hesitant, since I’d never worked with WPLMS before, but after a quick trial project I found that it was no different than any other theme I’d used and we were good to go.
Technology
Here’s a quick outline of the technology used throughout this project:
- CMS: WordPress
- Programming Languages: PHP, jQuery, HTML, CSS
- Plugins
Site-Wide Features
Here’s a quick outline of some of the special features used throughout the site:
First, is the ability to display different menus to logged in versus logged out users. This was important so students had a menu that led them exactly to where they needed to go, while those not enrolled could easily learn everything they wanted to about the school.
We also did something similar with the footer. The footer is great to have for those thinking about joining the school, but isn’t necessary for those inside trying to focus on聽learning so we decided to hide it for logged in users.
Next is the interactive pages. The homepage contains different animations that make everything feel even more magical to go right along with Lexi’s vision. I wish I could take credit for that, but Beaver Builder makes it nice and simple to do. Seriously…I love that plugin.
Let’s dive into some of the specific page features. There are quite a few additional pages I was responsible for development on, but I guess you’ll just have to join the school to see them 馃槈
Page Layouts
Homepage
Seriously. Could the homepage be anymore gorgeous?
Since it was super important to me that Lexi and her team would be able to make edits easily after I was done, I used the Beaver Builder plugin to create this page. And let me tell you, I really put it to the test with some of the features and layouts on the homepage. Buuuut, it passed!
One of my favorite parts of the homepage is the Play button. Click it and a introductory video to the school shows up. Such a fun feature to have!
The Coven
Saying that I’m in love with this page is an understatement. I’ll be honest, when I first opened the Illustrator file and started scrolling…and scrolling…and scrolling, I may have had a mini heart attack. But it was definitely worth the work that went into it.
The trickiest part of this page was the section with the purple background that maps out聽how everything works. At first, I had no idea how I was going to make it happen. Between the path winding behind everything to the way things were aligned, it took a little time to sit back and think it through. Once I started looking at it like a grid, it all started making sense and it turned out great!
Membership
The Membership page serves as the homepage for students. It gives them the first steps after joining the school, takes care of announcements, and shows them the most recent events and courses that have been added.
At first, I was very hesitant about having聽3 sliders on one page, in fear of it bogging down the load time. Usually, I’d bring it up right away, but since I knew Beaver Builder had a few slider options, I gave it a shot. After testing the load speeds out, I was happily surprised to fine that everything was looking great! This definitely would have been a different story with most other plugins out there.
I also got to code in some customizations to the Beaver Builder plugin. For upcoming calls, Lexi wanted to be able to display the day and time for each event聽as well as tags. Those聽display options aren’t聽built-in to Beaver Builder’s slider module so I went ahead and coded it in. I was able to customize the fields shown in the page-builder to display the extra option for Lexi and her team and added a few lines of PHP to pull the needed information in and display it correctly.
Masterclass
To kick off the launch of Biz Woo School, Lexi hosted the most incredible masterclass series I’ve ever seen. That tasked me with the development of the opt-in page. I’ve gotta say, this is the most intensive opt-in page for something free I’ve ever done, but I’m totally in love with it.
I loved getting the opportunity to make the Beaver Builder accordion (for the Q&A section) look totally different than it does by default using custom icons and a different layout.
The purple border at the top of the page was also an addition through CSS that added a nice pop to some of the pages. You’ll see it make a few more appearances throughout the website.
Contact
It was fun to work on a Contact page that was as unique as this one. Usually Contact pages have a few paragraphs of text, maybe a picture, and a Contact form, but Lexi made hers feel just as magical as聽everything else on the website.
The biggest challenge on this page was getting the envelope and content within to cooperate on all screen-sizes, but I love the outcome.
Working With A Team
This is the first time since starting my business that I’ve worked as a part of a larger team. Usually it’s just me going to town on code, but Lexi had some amazing project managers, a VA, a Facebook ads expert, someone to manage gamification, and more.
At first I was a little hesitant. After not having a great experience with working as a team at my corporate job, I wasn’t sure what to expect. But it is so incredible to see what a group of people can come together to create when everyone can focus on their own expertise and trust each other to do their thing. They all set the bar high for any team projects I end up being a part of in the future.
Final Thoughts
I loved being a part of a project with such a unique mission and a vision that was portrayed so accurately through the design.
Looking for a developer for your client projects? Learn more about working with me by聽clicking the button below or feel free to reach out through my Contact page!
Or, if you’re not quite sure how this whole designer/developer collaboration thing works, unlock the ultimate checklist to go from hours of code to development-free design projects. Click the button below to get started!
10 Steps To Go From Hours Of Code To Development-Free Design
