The goal of this project is to reorganize Open Up’s website to help improve KPIs including website traffic, bounce rate, and conversion rate, as well as making the website easy to navigate and understand. In order to achieve the goal, the team used Squarespace to recreate Open Up’s old website with simplified and organized design. We added donation button to the navigation bar and also added sentences to explain that the classes are free to sign up pages in order to clearly establish that classes are free but donations are welcomed. In addition, our team strived for sustainability of our project through including a variety of methods, such as teaching sessions during meetings, and providing written and video training guides. At the end of the project, our team created a brand new website for Open Up from scratch. We created 18 new pages including Home Page, Mission Page, Team Page, Blogs Page, Programs Page, Donate Page, and etc. Our team also carefully adhered to the ADA/SEO guidelines and developed mobile views to help with accessibility and search optimizations, helping Open Up’s website to be thorough and comprehensive.
Our client, Marissa and Megan, had an old website, which lacked consistency and organization throughout the website. The original design was messy and difficult to navigate, which hindered users ability to sign up for classes and donate to the organization. Since the website’s main purpose is to attract new users to sign up and donate, we revolved our new design around these two main functions by building buttons and sections that lead to these two destinations. We also conducted market research on similar websites such as other yoga businesses and nonprofit yoga organizations. In the end, we compiled a list of 9 comparable websites and presented them to our clients, gaining their opinion on each website’s functionality and design. We analyzed the feedbacks before beginning our own design process.
The results consist of one new website for Diana that seamlessly accomplishes both of her original goals— having a digital portfolio in which she can demonstrate her (and her company’s) work, and building an online presence as the founder of Humbly At Your Service. Diana now has a full website consisting of five different pages she can use as the landing page of her business/point of contact for potential clients.
The solution was a sustainable site built through the Wix Website Editor that Diana now understands how to manipulate on her own. The site not only contains a place for users to contact Diana, but also recognizes Diana’s accomplishments— this divide was created through the organization of various pages within the site. The aforementioned site also simultaneously distinguishes between her work as the founder and the work done by the entire Humbly At Your Service Team in order to reduce confusion for any potential website visitors, and this distinction was created through the use of specific section headers and color schemes. The solution was a sustainable site built through Squarespace 7.1 that our clients understand how to maintain with the help of our training tutorials. The site not only contains a place for users to contact Diana, but also recognizes Diana’s accomplishments— this divide was created through the organization of various pages within the site. The aforementioned site also simultaneously distinguishes between her work as the founder and the work done by the entire Humbly At Your Service Team in order to reduce confusion for any potential website visitors, and this distinction was created through the use of specific section headers and color schemes.
Due to the limitations of Squarespace, we decided to only make a lo-fi prototype in the beginning for the pages we want to make changes on, where we decided to maintain the original page layouts for pages that were decent. We presented our initial to our client page by page and asked for specific feedback on logical flow and design choices. Before we move on to implementing the design, we also made changes to the color scheme of the Open Up’s logo because we felt the original colors of the website were too solemn and didn’t fit the vibes of a vibrant and lively organization. As a result, we changed all five colors in the logo to convey a more relaxing and calming vibe to users. To achieve our client’s goals of increasing website traffic and session duration, we wanted to make a simple design with a lot of buttons navigating the users to different pages that they come into the website looking for. We also try to add more consistent structures so the entire layout is easy to understand.
For the Development Process, we decided to move forward with Squarespace because our client’s original website was built on Squarespace and the switching cost to other platforms would be high. However, we were soon met with one challenge: deciding between Squarespace 7.0 which the original version is built with or Squarespace 7.1, which is powered by Fluid Engine and offers more flexibility in the development process. After communicating with both the team and the clients, we decided to use Squarespace 7.1 because we believe it would be easier for the team to implement and easier for the clients to maintain in the future. We then realized that there is no direct internal transfer offered by Squarespace and we have to manually recreate the website entirely on the new version. We decided that the benefits outweigh the costs and started implementing with Squarespace 7.1. As we started developing, we realized there are still many limitations to Squarespace despite its Fluid Engine in place, such as no caption on image and the grid sized layouts. As a result, we have to make many changes on our initial design to fit the functionalities Squarespace provided and iterate on the feedbacks we receive, which will be discussed more in the next section.
Our feedback process is mainly conducted through our weekly team meetings and client meetings. During our team meeting, my developers would present their work over the past week and we would provide feedback on other people's design. I tried to establish an inclusive environment where my team members are comfortable sharing their opinions and taking the lead. Then, we would implement any changes we discussed during the team meeting before presenting to our client, when we would start with more general questions before diving into very specific questions such as how do you like the color used in this banner or how do you like the font size in the testimonials. In addition, we also conducted 7 user testings with each lasting around 30 minutes. We asked site specific questions as well as task based questions to receive feedback from first-time users and if our website design is intuitive for them to navigate. We compiled the notes from all the user testing into a summary and went through them one by one to see which changes we want to incorporate. We also utilized re:Bloom’s feedback processes such as Feedback roundtables and QA testing to gain opinions from peers with similar experience. During these sessions, we asked our peers to go through our website and recorded specific feedback they provided. We then discussed the feedback among our team and decided how we want to further improve the website. From the sophisticated feedback processes, we were able to receive lots of useful inputs from a diverse group of users and eventually complete our website to accomplish our clients’ goals.
We created 4 modules to train our clients, including editing texts, editing sections and layouts, adding new blogs, and managing ADA, SEO, and events/classes. We first checked the initial Tech Capability Assessment as well as consulted with our client about their technical skills and what they would want to learn through the duration of the cohort. After understanding that Marissa and Megan had some basic knowledge about Squarespace but they are relatively reluctant to learn too much as they intend to outsource future maintenance. In response, we tailored our tutorials to their needs to teach very basic skills that will be very applicable if our clients want to make some quick changes on their website, such as adding a new blog or changing the wording on certain pages. We spread the training modules into 4 different meetings, when we prepared both a detailed written document and a video walkthrough to show our clients the instructions, before assigning a few simple tasks on a dummy Squarespace website for them to try. We would immediately respond to any of their questions and help them through their confusions. In the end, we helped to train our clients to maintain the website in very applicable situations.