This Showit Website Development Project is special because I partnered with a business bestie, Maria.
Maria is the founder and lead designer of Maiden Gone Rogue – a female-led design full-service design studio. Maria and I actually met *virtually of course* over a year ago online. I was her virtual assistant back when her business was just a team of one! As we worked together my admiration for her as not only a designer but also a business owner only got stronger.
We parted ways as we both went through a major rebrand of our own businesses, so coming back together with our new, fully aligned businesses is a literal dream! Maria grew her business into a full-service agency model, while I pivoted Studio Mooregan into focusing exclusively on supporting designers by proving Showit website development.
We hit the ground running with a big Showit website build for her wonderful client Shannon. Shannon’s coaching business has 3 distinct offers so that meant 3 unique sales pages on top of the typical site pages.
I had to work quickly and efficiently building out the wireframe of the desktop site so that the mobile pages could be designed and developed without rushing. I wanted to capture the design style just as beautifully on smaller screens.
Here are a few of my favorite parts of the mobile website development build:
This section was pretty straightforward. I was able to keep the layout almost the same by scaling down the images and moving them just above the text. The canvas feels just as cohesive as the desktop version by overlapping the title and center image slightly. Plus, it’s eye-catching and straightforward to read. It’s a great first impression of Shannon’s site.
Mobile Menu –
Mobile Menus in Showit might just be my favorite to design and develop. Not only are they probably the most used canvas on a site, but we also have expectations of how a menu should look. I find it fun to try and create something a little different but still useable and easy to navigate. I went with a light background for contrast on the opened menu, then pulled in the oval elements used throughout the overall design. It definitely didn’t hurt that we had SO many great images to choose from. Shout out to Maiden Gone Rogue’s Killer photo direction.
Service Detail Canvases –
This project had quite a few sales pages and Maria did a great job of displaying the details in each one. For this specific section, the alternating canvas layouts showed off what was included in the offer. In the mobile version I thought about creating 1 canvas with 5 different views, one for each of the offer elements, but ultimately decided against it.
While it would have shortened the length of the page significantly, I didn’t want users who were quickly scanning through to miss seeing everything included by not clicking through to each canvas view. So I kept it simple and created a stacked layout that mimicked the original design.
Mastermind Intro Canvas –
This layout is similar to the home page design, but I knew I didn’t want to repeat that same layout on another page. On the mobile version of this canvas, I kept the 3 oval images and adjusted the scale of the outer 2, leaving the center one larger. I moved the text underneath with breathing room and the call to action button above the images. This might seem like an odd placement for the button, but the previous one has the same CTA. By using just 1 as a transition between canvases it flows nicely and feels natural when scrolling.
Shannon’s About Canvas –
There might not be 1 specific thing I like most about this canvas. It’s more about how the layout leads your eye down the page. We’ve got a bold title on the left which overlaps with a great shot of Shannon on the right. Then the eye is drawn down to the second smaller image and we land on Shannon’s name and about info. It’s simple and clean, but still interesting.
Despite it being a bigger site it came together quickly, and working with Maiden Gone Rogue is such a breeze.
Want to learn more about my Development Done for You Process? Check out the details HERE
January 2, 2022