Responsive Design

Responding with Responsive Design

Launching theporch.live

Expressing our client’s vision

WOW, what a week it has been! House of Sticks is pleased to announce the launch of theporch.live! To say that our team is humbled and extremely thankful for the opportunity presented to us by Watermark Church is an understatement. Watermark’s Young Adult Ministry which is branded The Porch had a previous online presence that needed an upgrade. This ministry spans over 3,000 young adults in their 20’s and 30’s who gather every Tuesday evening to focus on seeking God and living life by His Word.

Watermark challenged us in taking their vision for what their new URL – theporch.live would be and creating a beautiful, well designed look that is set apart but still reminiscent of the Watermark flagship website. Since The Porch has its own brand standards our team took that framework to help develop a visual identity that is exclusive to The Porch. Our client’s user base for this project is a demographic in their 20s and 30s who are both tech and design savvy. We wanted to create a site that would appeal to those who would be frequenting The Porch gatherings as well as individuals who have been invited to attend the service. By combining engaging imagery and a stark, spacious layout we aim to compel the users to explore deeper into theporch.live website. Our ultimate goal is for visitors to gain a greater understanding of what the theporch.live is about and how they can get connected within the church community.

The initial design is presented in a long scroll layout with clearly defined sections so that the user can easily distinguish where they are within the site at anytime. We designed the navigation in a way that is easy to toggle back within each page and also find specific sections that hold important features. As one navigates through the site, there are multiple ways to gain access to messages, connect through social platforms, view testimonials from members, and even a way to download The Porch mobile app. For those looking to gather more insight, we designed a frequently asked questions section where the curious can find quick answers. All in all we wanted to give a clean, delineated layout that could be easily navigated through from top to bottom.

It is our standard practice to create websites with a mobile first focus. An average 75% of users we’ll be viewing the porch.live on their mobile device so we wanted to make sure the mobile experience held just as much, if not more weight than the desktop version.

When constructing the design framework we focused on a simple color scheme. By complimenting darks and lights with a sharp accent color we wanted to give theporch.live a very modern feel. We implemented bold fonts for the headlines like the Bebas Neue and light text fonts like Lato Light to instill cleanliness and readability within the typography. By sparingly using a serif font for testimonials and call outs, we were able to draw attention to these items without departing from the feel of the site. We intentionally staggered the headlines throughout the cards within the layout to differentiate theporch.live from the more common long scroll sites that we seem to see over and over again in web design.  The intent is to give theporch.live a unique, edgy feel while still keeping a clean and crisp presentation. Messages play a vital role in the porch.live so we wanted to utilize excerpts from sermons and testimonials and position them throughout the site. Our thought process was to drive site engagement and gain feedback on how The Porch experience is impacting the individual users.

One of the key attributes of this website is theporch.live’s streaming feature.  Every Tuesday night from the hours of 7-9 PM CST there is a live streaming video that the porch feeds out to not only the local gatherings, but also those viewing online in remote areas. With the growing user population we wanted to make sure that everyone is getting the full Porch experience no matter where they are viewing the website. Due to this important feature, we implemented an icon where users can set a reminder if they are not viewing the website in a time of a live stream presentation. We felt this icon needed to be ever-present so that no matter where the viewer is on the website they can always have access to watching the live feed or setting up a reminder so that they don’t miss what’s coming next from theporch.live.

Another important section that we wanted to bolster was the Messages Archive. Our task was to make it easy for the user to locate current messages as well as previous messages with facets and search parameters that would give them flexibility on locating relevant content that is impactful to them. We also tied in a similar search feature for finding streaming locations. The two primary Porch locations are Dallas and Fort Worth. Currently within those location pages we enabled an About section to give a bit more insight on what makes the flagship locations so special.

Finally one of the most important aspects of the site is for the viewer to have easy connectivity. The main goal aside from finding out about the porch.live’s message is getting users to connect with the church and the Young Adult Ministry. Visitors can connect with multiple social platforms as well as engage in several contact forms. Forms are strategically placed throughout the site in a way that are easy to understand so that visitors can get connected immediately with the Watermark team.

We are all very proud to launch this product for Watermark Church. This has been a great opportunity for us at House of Sticks to work on a project that connects so many people in such a meaningful way.

Related Articles