2Blocks
Project Overview
I partnered with Innovators for Purpose to design, code, and launch a new micro-website for the ongoing 2Blocks initiative. This initiative aimed to communicate to city stakeholders and residents that there are flaws in Cambridge's current educational system.
Roles:
Visual Design
Web Developer
Team:
Engineer Volunteer
2 Researchers (External)
3D Design Team (External)
Timeline:
2 Months
Tools:
Figma
HTML
CSS
Javascript
Github
Scope
The Problem
Cambridge stands as a thriving hub of innovation, yet its opportunities remain unevenly distributed. There's a noticeable scarcity of locally educated youth pursuing careers in innovation within our community.
However, the existing educational system is out of step with the modern age, and conventional step-by-step solutions have not yielded satisfying results. As a consequence, numerous students residing within a short walk of Kendall Square – renowned as the world's most innovative square mile – are missing the chance to develop into future leaders within this dynamic hub.
The Objective
I was given the assignment to design a micro-website for 2Blocks and also to code it, marking my first coding experience. The goal of this micro-site was to display the projects and stories of iFp students raising awareness among influential stakeholders and residents in Cambridge, particularly those holding high-ranking positions. The intention was to spark conversations about enhancing the city's educational system.
2Blocks, at a High Level
Project Ecosystem
Since 2021, the 2Blocks initiative has generated variety of different projects such as design reviews, podcast episodes, book releases, a web-based game, and an installation.
Key Stakeholders at the Table
Podcast Interviews
Assisted by our researchers, Hermela Shimelis and Jennat Jounaidi produced an 18-episode podcast series for 2Blocks. In these episodes, they skillfully questioned and challenged Kendall Square executives about their contributions to fostering genuinely shared STEM-related values within the community.
A small sample from the 18 diverse range of people from the school district, local government and business who joined shared their insights on the in-person summits and podcasts included:
Insights & Potential Opportunities Learned
The insights from podcast interviews and summit events were harnessed by iFp students to craft videos, disseminate information, and initiate projects. In this process, my responsibility was to guarantee that the content translated effectively onto the website, maintaining its visual clarity and engagement.
Non-Conventional Design?
Product Owner’s Early Mockup
Upon the product owner's request, I undertook the task of translating the stories crafted by iFp teen creatives into a map-like format. This venture posed challenges since it required designing a website in an unconventional manner, one that didn't primarily serve the purpose of locating specific places to visit.
Button Design
The core theme of 2Blocks has consistently revolved around the stark contrast between two neighboring neighborhoods in Cambridge. On one hand, we have Kendall Square, with its continually expanding innovation economy, and on the other, The Port, which is moving in a completely different direction.
To align with the theme of our message, I incorporated map-like location icons into the design of these buttons.
Balancing the Non-conventional
To maintain a balance with the unconventional map design, I reevaluated the layout of the original top navigation bar. Keeping Jacob's Law in mind, which suggests that users prefer websites that behave similarly, I opted for a redesign that adheres to a more standard approach.
For this original navigation bar with the hamburger menu, it caused an issue of communicating to users that you can only navigate the website with our map-layout because the stories were hidden in the menu. So it disregards users use cases who aren’t familiar with that approach and users who just want to get straight to the point.
Users might not want to always want to use a non-traditional map layout, the old navigation system hides the standard navigation in a dropdown menu.
User Friendly Alternatives
The Version 2 navigation bar provides users with a user-friendly alternative for effortlessly exploring the website's content, a marked improvement over the initial option. Furthermore, retaining the first option ensures the continued visual representation of the "two-block" theme, thus strengthening our intended design concept.
Prioritizing Visibility
My rationale for this decision stemmed from the recognition that if we prioritize a non-conventional design such as this map, we should also provide users with another more conventional means of navigating our website.
The new top navigation was a superior design choice as it removed the extra click required in the hamburger menu, making it easier for users to navigate through story names while also eliminating any potential use-cases that gave users confusion on the website’s discoverability.
Story Pages
In contrast to the homepage, I opted for a more conventional design on the page containing the video content. This decision was made to maintain a balanced and cohesive navigation experience throughout the website.
Prioritizing Responsiveness
Mobile & Web
Given the limited resources available to our team, it was crucial to ensure that the website remained accessible to not just web users but also mobile as well.
To achieve this goal efficiently, we opted for a "fully adaptable" design for mobile platform instead of creating separate versions for each platform, a decision made to conserve resources, streamline development, and meet our launch date.
Desktop Front-end Code
To achieve the adaptability on our website, despite our limited resources, was the incorporation of media queries. These media queries allowed us to create instances of both desktop and mobile buttons.
Mobile Front-end Code
By harnessing these media queries, I was able to ensure that the mobile button variants were displayed in a centered alignment when the screen reached a specific, narrower width. This approach was necessary because the map layout designed for desktop was too wide to accommodate for mobile.
Simplifying Components
As I was new to web development during this project, my tasks took longer than expected as the launch date approached. To simplify our code structure and complete prototype our prototype before the launch date, the volunteer engineer and I decided to start creating HTML components.
While modern design and engineering teams typically use frameworks like React to create web components, I was still in the early stages of my coding journey and had only mastered the basics. Creating components using HTML was a suitable alternative for our project.
Why Augmented Reality
Physical Installation
As I progressed in my web development work, I received a new feature request from our product owner. They informed me that the micro-site I was working on would incorporate AR components to complement an ongoing physical installation being developed by our 2D team.
Deciding the Icons
The AR feature was expected to be one of the most crucial aspects of the microsite, so it was imperative to make the user experience as user-friendly as possible. While creating multiple iterations of AR icons, I ensured that these buttons stood out distinctively from the other purple buttons that directed users to video stories.
To gauge the most comprehensible representation of AR within the context of the website, I conducted A/B testing with various teams at iFp. The final iterations that garnered the most recognition clearly conveyed that AR would be utilized on a phone.
The Hypothetical Ideal Flow
In the early conceptual stages, my goal was to create a straightforward path for first-time users, to get the to AR experience built by our 3D team. However, due to my limited experience in web development and technology, embedding our own AR feature directly into the website it just unfeasible before my deadline.
First Time Flow at Installation Site
Instead, the 3D team imported their augmented reality design into a third-party app called Hoverlay. We selected this app because it had proven to be effective in previous projects. I was then able to add their Hoverlay's link into the front-end code for the website.
First Time Flow on Desktop
For the desktop user scenario, I devised a process where visitors could scan the QR code at the 2Blocks installation, which would take them straight to the microsite. However, to view the AR experience through Hoverlay, they would still need to use their mobile phones.
Concept to Reality!
Mobile AR Experience
While at the physical installation site, this recording demonstrates the experience of using the microsite to access Augmented Reality on a smartphone.
Desktop AR Experience
If you're anywhere other than the intended physical location, the desktop version of the microsite also enables users to access Augmented Reality content.
Student Content
Explore the videos and content produced by iFp students to stay informed about the exciting educational and innovative job opportunities in Cambridge, MA, especially within the context of the larger challenges.
Launch Days!
Summit Events
We organized the design summits to unveil the initial MVP of the 2Blocks website. Cambridge residents and key stakeholders from our podcast and beyond had the opportunity to witness the showcased designs.
Community Engagement
We received substantial support, feedback, and raised awareness through the website regarding the 2Blocks initiative. This reinforced our belief that stakeholders from Cambridge's business and educational sectors are deeply committed to contributing their part in realizing 2Block's objectives.
Next Steps
Where do Visitors go Next?
At the summit, I received feedback suggesting the incorporation of "What is iFp" within the context of the website. This feedback centered on the idea of guiding visitors on their next steps after they had absorbed the information provided on the site. For the next iteration, I would develop more concepts to make it clear to visitors more about what iFp is all about.
More Code Simplification
As the event launch date approached, I had already converted some HTML scripts into simplified components, although not all were completed. To facilitate future modifications to the website, I will continue creating components, thereby streamlining the alignment between design and development
Learnings
Engineer’s Best Friend
One of the primary motivations behind my decision to participate in this project was to gain a deeper understanding of how front-end code functions. I held the belief that to become a more proficient designer, I needed to be acquainted with the process of constructing components from a developer's perspective.
Simple Yet Complex
On paper I thought because of the minimal content being added to microsite it would mean the design would be fairly simple to make. But what I later discovered, the interaction design challenges and coding challenges that made task a bit more complex and longer than I thought it would take. So going further no matter how simple a design challenge I need to always expect to plan and prepare to take challenges I wasn’t yet prepared for.