March 2022 (1.5 weeks) + updates until July
Responsive website with edited images and custom graphics
Google Sites, FigJam, Illustrator
Research, Information Architecture, UI Design and Elements, Copy/Content
BRAINopolis is a STEAM enrichment program for kids. Interested parents, guardians, and recreation centers where many programs were held at had limited access to information without a company website. Not having a website also decreased the company's credibility.
Parents, guardians as well as potential employees need a way to explore the programs that BRAINopolis offers so that they can be better informed to make a decision if they should register their children or apply.
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.
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.
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.
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.
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:
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.
Building the Website
Instead of creating a digital wireframes and a prototype and because I was working with a WYSIWYG tool, I went right into building the website. I understood Google Sites would have some limitations in terms of structure and design, so I wanted to know what I was working with before planning a design with too many details.
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:
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.
Note- this is the website as it was in Spring 2022. Since then, many of the pages were removed and the content has changed.
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.
Nice. You made it to the end!
Thanks for reading through this case study- If you have any questions or comments, please don't hesitate to reach out.