The Solution 

Working under financial and time constraints proved to be challenging. After a brief research and define phase with stakeholders, the website was built within two weeks with Google Sites and was updated as needed. The website was utilized in marketing materials.

The website provided quick access to relevant information that parents, guardians, and interested future instructors needed to get involved. It provided useful information to 100% of the instructors that were hired and resulted in an estimated 20% increase in class registration.

Takeaways

I learnt more than a couple of things along the way: 

• Exploring UX design. I conducted this project prior to formal training in UX Design. I innately followed a design process that I had used for other design work, such as graphic design. Now, reframing this project in terms of UX/UI is useful because it allows me to understand where I could have improved or steps that I may have missed, such as focusing in on the user rather than following instructions from clients. I am interested to know what users experienced as they navigated the website.

• Keep it simple. The website had to be up and running within narrow timeframe so that interested potential instructors could apply before the programs began. I had to narrow down concepts and focus on necessary information. Because I was also responsible for the content and UI of the website, I created simple visual design elements and organized content that was easily scannable.

Background 

As an enrichment program for 6-13 year olds, BRAINopolis' aim is to challenge children and encourage them to solve problems with STEAM concepts.

BRAINopolis teaches using games, interactive activities, and group dynamics to promote learning while stimulating both sides of the brain: the creative side by developing projects and the structural and cognitive side by exposing kids to science and technology concepts. BRAINopolis conducts seasonal camps, after school and weekend programs, and events.

Objectives

The company did not have a website that represented them, showcased camps, and allowed those interested to learn more about how to register for upcoming camps. 

The objectives included addressing these problems to not only increase sales and credibility, but to better inform target user groups. 

I utilized lean UX methodologies (think, make, check) to create a deliverable within the time constraint. 

Stakeholder Interview

During stakeholder interviews technical limitations, business goals, user needs as well as some stylistic choices were discussed.  This discussion was essential as we needed to define project parameters and a cohesive vision in order to move forward. 

We concluded that the website needed:

• To be simple to navigate with scannable content, such as camp and job descriptions.

• To represent BRAINopolis at a basic level (testimonials, mission, contact).

• To clearly inform and lead parents and guardians to sign up at either location.

• To have colorful and encouraging graphics that were in line with the company's brand.

• To be created within two weeks to keep the project within budget and time constraints.

We decided using a site building tool like Google Sites to create responsive website was the best option. It was affordable and the client was able to make edits within the platform.

The main task flow included finding and reading through camp and job descriptions and connecting the user to where they could register or apply. 

Target User Groups

There were two main specified groups of users that the website needed to be designed for. 

The first and main group of users were parents and guardians of local children who were interested in signing someone up for a program with BRAINopolis. On some occasions, kids would stay with their grandparents during summer holidays as their parents were working throughout the day, so the age range varied among this group widely (30-75).

A secondary group of users were potential instructors of BRAINopolis that would visit the website to learn more about the company and their prospective role. This group consisted of college students from the ages 18-24 that had a passion for teaching STEAM concepts throughout the summer. 

A persona and brief customer journey map of the main group of users was created:

Competitive Analysis

A competitive analysis and usability heuristic evaluation of several websites was conducted. These companies also offer STEAM programs, such as summer camps. The analysis included direct competitors, such as Mad Science and iCode. 

The objective of the analysis was to research how these competitors organize and present information about themselves and their programs. I focused on analyzing the main task flow and website architecture. I also included aspects of a market analysis, such as tone/messaging and UI/visual elements. 

I then organized the notes into similar categories to find similar themes and elements:

• Colorful CTA buttons placed in the header or above the fold to direct the user.

• Bold icons and graphics accompany camp descriptions. 

• Photography that highlights campers are found throughout the website, mostly on the homepage.

• Excited, encouraging, and engaging tone and a bold first impression.

• Clear top navigation bar or footer with access to camp descriptions, contact, and jobs.

• Descriptions organized into scannable paragraphs or bullet points. Images and buttons for each camp description.

• Contact page has helpful information, such as FAQ, form, address, number, and email.

• Strong sense of hierarchy throughout the site.

• Modern colorful visual elements that are used consistently and don't clash.

As I began to ideate about each page and section, I kept these common themes in mind.

Website Pages and Sections

Before sketching, I noted the pages and sections that I needed to incorporate into the wireframes. These included an overview, curriculum, dates/locations, testimonials, FAQs or camp information, and contact information. Optional sections include a staff page, registration instructions, and a photo gallery.

Sketches & Paper Wireframes

Sketches and wireframes of the website and its content helped to plan the layout and organization of the website. I chose elements and layouts from 4 options for each page. 

UI 

I chose typefaces that were somewhat youthful yet readable. By utilizing a color scheme of neutral colors (white and navy) and a bright but mellow yellow, I wanted to instill a sense of playfulness while still keeping it professional. The client requested the image of the monkey for the contact page, which was comical and lighthearted- It shows the slightly silly side of BRAINopolis. 

Feedback & Iterations

Discussions with the client led to three main changes:

• Differentiating sections, especially on the homepage using background color and dividers. This allows the users to better associate information to a specific topic, such as camp locations or testimonials. The two testimonial sections, although displayed in different formats (rotator and graphic), both have the same background. This kind of separation also creates a more diverse experience, even when there isn’t an abundance of content.

• The numbers of both recreation centers was added in multiple areas such as the summer camp and contact pages. It was important to include the contact information of the recreation centers along with the company's contact info. Users register on their websites externally and questions specific to registration should be directed to the centers. 

• Adding call to action buttons more frequently, especially on the camps page to better direct the user to the websites for registration. I differentiated these buttons from specific buttons for each camp through the use of color. I utilized the style, including the same icons, as the button text as the homepage to maintain consistency.

Additional changes included:

• Adding options and phone number fields to the Google Form.

• Adding photographs to the summer camp page to allow users to visually understand camps.

• Adding testimonials and images of past campers to the home page to further increased the company's credibility and communicate the company's mission in a fun visual way. 

• Adding emojis throughout the website as icons. 

Reflection & Takeaways

📝 Despite some limitations with the website building tool, the overall design was straightforward and successful. According to the client, the website led to a 20% increase in registrations by effectively directing users. 

👥 The time and budget constraints allowed me to focus on necessary content but also contributed to a lack of user research. Although this project incorporated some parts of the UX design process (of which there are many), I could have considered user needs as well as accessibility by conducting usability studies. 

📊 The competitive analysis of local competitors was particularly helpful in identifying necessary content, current trends, user expectations, as well as areas to improve.

☑️ The consistent communication with clients about design choices and content helped us to complete the website on time, within budget, and to ultimately address user needs.

📅.  I stayed open to constant feedback and made revisions through collaboration with the client through July, when summer camps finished at BRAINopolis.