Information Architecture

The previous site had 2 navigations, the hamburger menu being a kitchen sink for 30+ links. With this many options, it can overwhelm the user. For better SEO, we looked to combine and reduce content wherever possible, although this was difficult because of the size of this church and its content/resources for their members. Improving the navigation for more intuitive experience was something that was visualized with the sitemap.  Like any good user experience, I wanted the navigation to be focused on meeting the needs of the user. Thinking about these needs, we decided on 6 primary navigation items with 3 drop-downs to hold subpages. The sitemap displayed the hierarchy of the pages and the information on the pages, as well as giving insight to the cross linking throughout the site. This set the stage for wireframing, giving me a clearer idea of how many pages we would need and how they will be structured.

Wireframing

Before building or designing anything in Webflow, I used the sitemap structure to create a wireframe for each page in Figma. In order to scale the Apollos website projects, Relume components were used for a streamlined Webflow development. While creating the wireframes with these components, I referenced their existing site content as well as new additions mentioned by the client. I made sure to include all the information a user would want to know as well as highlighting calls to action for the user to encourage engagement. This also gave the client a blueprint of all the photography they would need to curate and copy they would need to write. After iterations based on the client’s feedback, the wireframes were ready to be implemented in Webflow.

Development & Design in Webflow

Up to this point in my career, I had only built one web page in Webflow. Being new to the software, and the 35+ required webpages was quite frankly overwhelming. Using the Relume webflow components, I implemented the wireframes in webflow. I learned client-first class naming and structure for the project, which the Relume components utilized. I began updating the style guide with the decided design theme.  Although we had the design of the homepage which we were going to style the rest of the pages with, I had never designed and developed simultaneously in webflow. Being used to creating the design in Figma, it felt less playful and less free to design in webflow. I felt like I was unable to zoom out and see the website as a whole like I would’ve been able to had I created the designed pages in Figma. Throughout the design and development process, I was also using my iPad with Procreate to draw over 60+ unique background textures and icons to decorate each page. Several hours were spent ensuring each page and component was fully responsive. I created and implemented 6+ CMS collections so the client could easily update certain content that was regularly changing (ex. community outreach opportunities, team members, available spaces to rent.)

Iteration Based on Client Feedback

This project was very collaborative with the client. I managed the project in basecamp, gathering feedback from our point of contact and Liquid Church’s Creative Pastor. A large part of my role in this project was a balanced act of explaining my design choices and being an advocate for the user while also hearing and implementing the desires and needs of the client. There were several iterations of the design based on the client's feedback. I implemented these ideas as I received them to attempt to maintain our launch goal date.

Final Thoughts

A challenge of this project was the learning curve of building a large 35+ page website in Webflow, a program which I was not proficient in. Although I was out of my comfort zone, I was able to lean on several online resources that Webflow University and the internet offers.  

Another challenge of this project was collaborating with a client when I previously collaborated with a product lead. The client for this project was detail oriented and had a clear vision of how they wanted each page to look. Compromise and clear communication was crucial to align with client expectations.

I was laid off from my job at Differential before I could see the launch of this website, but I heard that the client really felt like this updated website was “Liquid 2.0.” It’s always rewarding to hear that you achieved the client’s vision of a better digital front door for their church.

On this project, I had more responsibilities than ever before. While working as a customer contact, designer, and engineer put me out of my comfort zone daily, it helped me grow as a professional. I feel proud that I was able to learn and improve skills like:

• Client Communication - meetings, basecamp, emails, etc.
• Project Management - basecamp, tasks, planning, tracking progress, requirements from the client, etc.
• Webflow
• Creating and Presenting Design Concepts
• Web Design - responsibility from idea to implementation