A TechEd web platform that provides rural students access to STEM
(Science, Technology, Engineering & Mathematics) industry professionals virtually (LIVE).
(Science, Technology, Engineering & Mathematics) industry professionals virtually (LIVE).
Demo Website Design
Client
Third Room
Third Room
Operations
Remote/Online
Remote/Online
Role
UX/UI Design
UX/UI Design
Team Members
Founder
Product Manager
Front End Developer
Full Stack Software Engineer
Marketing Manager
Founder
Product Manager
Front End Developer
Full Stack Software Engineer
Marketing Manager
Tools
Figma
Adobe iD, Ai, Ps
Powerpoint
Figma
Adobe iD, Ai, Ps
Powerpoint
Outcomes
Statement of Work
Competitive & Comparative Analysis
Site Map
MoSCoW Chart
Wireframes
Design System Development
Branding & Identity Development
Low-High Fidelity Prototype
PPT Presentation Pitch Deck
PPT
Statement of Work
Competitive & Comparative Analysis
Site Map
MoSCoW Chart
Wireframes
Design System Development
Branding & Identity Development
Low-High Fidelity Prototype
PPT Presentation Pitch Deck
PPT
Evaluate
Getting up
to Speed
to Speed
Considering I joined the Third Room team after all current members, I undertook a process to 'get up to speed'.
Understanding all the pre-existing discussions, research methodologies conducted, team dynamics and ambitions were imperative to 'hit the ground running'.
Understanding all the pre-existing discussions, research methodologies conducted, team dynamics and ambitions were imperative to 'hit the ground running'.
A UX Team from General Assembly had previously conducted primary and secondary research methodologies including Competitive Analysis, User Interviews (student, teacher and STEM professionals), Prototype and User Testing - all of which was synthesised and summarised in a Global Research Report. In addition to reviewing the report, and ongoing discussions with the team, I maintained a close relationship with the Product Manager who provided continual insight.
Previous research indicated a common goal of educators wanting to provide more opportunities to their students. Educators also expressed a need to expose their students and themselves to new perspectives and diversity.
Key Findings:
- Rural students and educators lack access and exposure to STEM industry professionals for reasons related to geographic isolation, teacher shortages, and budgets. They depend on free virtual resources to supplement their lesson plans.
- Current career exploration programs are too short-lived to build sustaining interest in students, are capital intensive, and site-specific.
- Learning is grounded in relationships, yet many competitors in EdTech only show self-recorded videos, removing the human component of teacher-student interactions.
- Educators value the ability to effectively evaluate a job title, relate to classroom material, communicate stylistically, and articulate their problem-solving thought process.
- Rural school districts are more successful when their teachers and classrooms welcome collaboration. Sharing economies play a significant role in small communities, and educators are more likely to experiment and expand on their curriculum if previously demonstrated by industry colleagues.
The Challenge
Secure Funding
During the infancy of a Start-up company it's often imperative for the business to secure investors to generate revenue, enabling the build, test and shipping of an MVP product. Hence, Third Room was driven to focus on the design and build of a demo website, specifically targeting investors and contributors.
The team's decision was to create a high-fidelity prototype to support the near future business pitch.
![](https://pro2-bar-s3-cdn-cf.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/b9d858fa-9a01-469e-8d0a-f0ea681429e8_rw_1200.png?h=08de905f5c191ad30c0cd60b4fc0aad1)
User Flow Map
Demo
Happy Path
Happy Path
Establishing the need for a demo led to identifying a relevant happy path that demonstrated the primary usage plus the value and benefits investors would receive in partnership.
The path details an educator (pre-existing user from Massachusetts) arriving on the home page, then seeking out a STEM industry professional in the field of Biology to book and supplement their original curriculum.
Below is the basic structure of an educator's user flow:
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/07a5e754-5705-4d6d-b3ea-cad271ad2d4c_rw_3840.png?h=2ab87dd3dad10b807d8acb546a07d29e)
MoSCoW Chart
Planning for
a Demo MVP
a Demo MVP
Open discussions amongst the team led to the development of a MoSCoW chart. This created a hierarchy of content and features that must/should/could/won't play a role in the demo. Additionally, it put all members on the 'same page' giving everyone clear direction and focus to progress
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/5c9ccb88-aefa-4063-a254-8b1e49586da4_rw_1920.png?h=4ad6d6b6093ac39aef27708c3abba02d)
Original Wireframes
Working Towards
a Demo MVP
a Demo MVP
Early in the process initial wireframes were constructed to develop the user path and bare minimum functionality.
Wireframes
Developing
a Demo MVP
a Demo MVP
As the wireframes were getting further developed I shifted the design to be conversational with the end user and decided to implement a system that steered clear of standard web conventions such as traditional buttons and faceted navigation. The result enabled the user to interact with the conversation, indicated via a cyan blue. Certainly a system that requires user testing - specifically focusing on affordance, interactivity and learnability.
Design System
Breathing life into the Prototype
Week-by-week Third Room seemed to be pivoting and adjusting the platform's approach to secure funding. This resulted in several rounds of iterations with content being drip fed through. Meanwhile, I was responsible to researching and develop a design system to implement. Some of the key components currently in development are:
- Visual Tone
- Brand Voice
- Typography
- Color
- Iconography
- Logo Design
- Interaction Design
- Conversation Design
As the design system develops over time there'll be a demand for all team members to freely access it for reference. All considered, I felt this was a great opportunity to upskill myself on Webflow to create an online design system.
In the meantime, browse through our 'work-in-progress' prototype.
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/5b18b71e-fb4c-42c8-8c1f-ed0bf7ca87ab_rw_1920.png?h=307633e8bcc69e17adeba50963c5eddd)
Personas
Setting up
to Pitch
to Pitch
Prior to walking potential investors through the demo, we felt it was important to introduce our industry professional Claire (proto-persona), and rural teacher Sarah (persona) to better understand the end-user experience and interactions. In addition, Sarah will help support design decision making, structures and interactions through relating back to initial user interviews.
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/0711895d-efe9-43d4-a504-5a005e8cfef9_rw_1920.png?h=b31cc3ea10dff57b87d0534a8d4c78bf)
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/cbb5c42e-41e3-4c22-9788-f1ec6274a82b/f49b67be-b681-4b5c-af82-9facdea53866_rw_1920.png?h=c58a43374222d24d4245c521114da600)
MVP Preparation
Next Steps
During the Demo Pitch phase the Product Manager and myself will be working towards the following:
- Write up a statement of work
- Revise site map and user journey map/s
- Develop site wireframes
- Establish an onboarding process for industry professional & teacher
- Create a lo-med-fi prototype
- User test & iterate design
- Develop the existing design system
- Create hi-fi prototype
- Draft up a shipping strategy