This article was written by 2019 fellowship winner David Li.
Project vision
With traditional in-school announcement methods (such as delivering them over a loudspeaker) wasting over 20 hours of classroom time (per student) every year in Ontario schools, we created Fraser Connect to offer a more efficient and convenient solution in order to save valuable classroom time while improving student engagement across in-school events.
Fraser Connect is a cross platform educational app that digitises important social functions in education; allowing students to engage with in-school events at greater rates. By facilitating easy mobile access to announcements posted by clubs and the school – as well as a personalizable events feed – Fraser Connect bolsters student engagement rates and saves both students and teachers time in the classroom.
Timeline
2 Weeks
After the 2 week mark, we had implemented cross-platform native Google authentication. We then implemented a microservice based user onboarding system in the backend in conjunction with our GCS (Google Cloud Services) database.
4 Weeks
At this point, we had gotten into contact with our product design mentor, (Jordan Borges /[link his linkedin on his name maybe?]/ from RBC Innovation Programs) to receive some feedback on our preliminary design. The first rendition of our design was, well looking quite dated and reminiscent of early Material Design guidelines. Jordan helped us transition from an older UI scheme to a more polished, contemporary design by providing very useful advice from a UI/UX standpoint. Over two weeks, we reiterated on our new design while taking feedback from Jordan. We completed our app prototype on Figma and started facilitating the developer handoff process using their Zeplin integration.
6 Weeks
After completing our High Fidelity Prototype, we started transferring our component library from Figma into our cross-platform React Native codebase. Styling these components responsively and setting them up to receive and properly parse data took almost a week to finish with two developers. However, the effort in maintaining a component library was well worth it, as it made constructing the various Feed and Event screens as simple as putting a few components and API calls together. CRUD functionalities and voting screens have been prototyped on development versions of the Fraser Connect app, but will be adjusted and added into the app accordingly with more research into user experience for our target demographics.
Final result
At the end of the summer (6 weeks since we had started), we now have a fully functional cross-platform MVP with an announcements feed screen that shows the most essential/important info at a glance, and an events feed which allows users to add events to their own calendars and gauge the popularity of an event as well (through our attendance counters). Both feeds are plugged into our database and are completely synced across user accounts.
We’ve developed a more cohesive branding/theming scheme across all of our components to expand upon when new features are added to our product backlog. However, the current application is fully functional and is ready for use by students to access the latest announcements, events, and other miscellaneous information published by clubs and the school.
Fraser connect Demo video.
Reflection
Working with a mentor
Working with a mentor was quite an enjoyable process, mainly because our mentor specialized in a field in which we didn’t have much knowledge or experience. Jordan (our mentor) helped us polish our user interface to make it more modern and cohesive. As well as providing extremely helpful input to enhance user experience and make the app more visually appealing and easy to use in general.
We as a team learned quite a lot about the more foundational aspects of Product Design in terms of UI and UX from the tips and suggestions that Jordan emailed us, and we are quite thankful to have been able to learn from him throughout the fellowship.
What we have learned
As a team, we’ve all learnt how to properly manage an inflow of user stories and requirements for our app and turn them into completable functions. Personally, I built upon my skills to effectively manage a product backlog and deliver finished features in a timely manner using a test-driven design methodology.
Likewise, the entire team was able to learn from Jordan’s correspondence and advice with us, and we applied that advice to our prototype in Figma as well as to our actual component library/app.
Going forward, we’d like to be able to contribute and create custom modules for our custom functionality and publish them to the public if possible, as we used OSS (open source software) quite heavily and would like to give back to the OSS community.
What is left to do
The major task left on our product backlog is to finish the voting screens for our app. This would involve interviewing/surveying potential users to rework our design to fit the preferences of our target demographic. Furthermore, we could build upon our existing work to expand functionalities of our app to include ticketing/payments for school events, or AR augmented special events around the school community.