I realise it’s been a while since I last wrote here. I think, given the current global situation, I’d like to revisit this blog and use it, once again, as a repository of my thoughts — particularly on the projects I’m working on. As creators, one the best ways to engage with our own work is to write about it. (And it gives me an excuse to do more writing!).
In 2014, I embarked on an ambitious digital adventure to create a complete student administration system for our karate organisation SKKSA. The project, called “Osaka” (after a line in a Coldplay song I was listening to at the time — Lovers in Japan/Reign of Love) enabled us to streamline a lot of our admin. It also gave me the opportunity to lean a lot about software dev and C# programming in general.
Over the years, of course, this suite has grown to reach the limits of its capability. And my new experiments with web-based technologies like PHP/HTML 5/JavaScript has afforded me the opportunity to rethink the entire system.
Enter Project Nexus.
The login screen on the mobile web portal (“MyDojo” is the front-facing name; Nexus is the internal codename)
Named after the original app I envisioned almost 10 years ago (Nexus), this is an entire reimagining of the student admin system. It also opens up opportunities for having a more meaningful front-end student portal. More importantly, it allows us to have a more engaging, meaningful experience in understanding our students, their progress, and more.
Envisioned as a platform rather than a collection of apps, Nexus is a system that will allow our instructors to get access to live data from training sessions, and completely streamline a lot of admin processes such as creating diplomas and enrolling new and returning students.
The platform comprises 2 major elements: a web portal, and a traditional desktop app.
Rather than using a local Microsoft SQL Server Compact database as the DB backend, we’re harnessing the power of the Web by using MySQL as the new backend. Porting over from the old DB seems to have gone fairly well so far.
More importantly, this allows us to have a more powerful web portal. This means instructors have access to important data about their clubs on their mobile. This includes access to our training syllabus, student attendance records, student contact details, and more. A future feature I have planned is a digital attendance record register, where instructors can use their phones to scan students in to sessions, and then manage that attendance data later on the desktop app.
The desktop app remains the central hub, but this time its redesigned, streamlined and powerful.
I will write more about this project in the coming days and weeks as I continue to develop it in my free time. We’re hoping to launch the first release very soon. I’m excited about the opportunities that Nexus will open up — not just for SKKSA, but as a system that can be scaled-up for commercial use in the far future.
Osaka’s “Welcome Screen” which displays the various things you can do with the software.
Osaka is a new software system I designed and coded in December 2013/January 2014 to significantly overhaul the SKKSA admin system and update the existing software architecture (which had been conceived as a modular design in June 2012, and had been in use ever since).
It replaces an app called “Nexus” which had been showing its age, and which desperately required an integrated philosophy to ensure scalability and enable a critical new feature – the Student Profile.
The Technologies
Three major technologies were used to create Osaka:
Visual C# (programming language/environment)
Microsoft SQL Server Compact Edition
MySQL Workbench (to design the database architecture)
C# is a language I’ve been using for some time now. I’m comfortable with it, hence I chose it as the best and most efficient way of undertaking this considerably complex project. Say what you want about Microsoft, but their developer tools are great. Visual Studio was an excellent IDE to design Osaka’s UI, and execute the entire project – from bringing the interface to life with UX code, to linking the screens to the database backend.
The Project
Osaka was a big step up in SKKSA’s digital systems. When we introduced SKKSA ID with the Nexus app back in 2012, we were one of the few karate organizations in South Africa to have a digital student database. Barcoded student numbers could be used to scan-in to sessions and validate registration for a seminar. But it was still very limited in its capabilities. My ultimate goal was to have a holistic solution that captured a student’s entire karate record in a single place.
Thus arose the idea of the Student Profile. A single screen could display the selected student’s records for their tournaments, gradings, Saturday senior training attendance, seminars and affiliations. This would go along with their contact info, and data central to their karate life – i.e. their dojo affiliation, current grade and SKKSA ID (their student number).
Design began with the welcome screen. I mocked-up a basic UI, and then decided what elements were critical to Osaka’s initial release. However, due to logistical reasons – me being in Cape Town and the software being in use in Durban – the development process required me to design the initial release with as many critical features as possible to avoid potential usage problems down the line.
At its heart, Osaka is really a dataset with various tables linked to each other. Each table holds data specific to a part of the student’s profile – there’s a table for their gradings, their affiliations, their tournaments etc. This all ties into the “primary” table, the “Students” table. Then there’s various other tables that hold data about seminars – seminar names, locations, dates; Saturday training – dates etc. It was complex to think about, and so I resorted to designing the dataset using, first, pen and paper (very tech-savvy, I know :P), and then migrating those initial sketches to MySQL Workbench, where I mocked-up the dataset’s tables and relations. This allowed me to see what the overall database would look like.
Designing the UI
From there, things started to get very messy. Moving over to Visual Studio, and armed with the database design, I began building the user interfaces. I chose to go with as simple a UI as possible given the time constrains. Designing for simplicity is actually really complex. I believe that the more pedantic you are about designing things and the more work you put in, the simpler the overall result will be. So with Osaka, I wrote many lines of code for the most mundane things, like automatically moving the cursor to the next textbox once a student’s ID number is captured, and using their ID number to automatically write their date of birth. In the end, these little things save a lot of time when it comes to capturing registration forms.
I attempted to tie SKKSA’s new brand image into the software. The organization’s primary colours – deep red, gold, silver, white, grey – were the basis for the colour palette. I ended up using a third-party designed icon set to minimize design time.
In future updates, I hope to focus more on making the UI design even simpler. The Profiles screen is my next focus, and I want to change the cluttered look into something cleaner, readable and information-rich without any complexity. This is what the Profiles screen looks like with Osaka 3.0.2: (certain info blurred for obvious reasons…)
Osaka’s Profiles screen
The most critical feature, though, was the TrainingBook module. This system replaces the traditional pen-and-paper register. Now, students just scan their cards, and their name is automatically added to the day’s register and to their profiles. TrainingBook was perhaps the main reason for designing Osaka. It’s where a lot of the development focus rested, and its UI inspired other aspects of the software, including the new Seminar module which functions almost exactly like TrainingBook, but for training courses instead.
TrainingBook ready to scan student cards.
Registers can be printed on a daily basis.
With an all-digital register, lots of interesting data can be extracted. While Osaka alone can’t manipulate data and provide in-depth analysis, by exporting the lists to Excel as CSV files, reports can be compiled for the instructors so they can chart their students’ progress.
Next Steps…
Osaka, like any software project, is not complete. Nor do I think it ever will be. But in its current state, it’s already significantly more powerful and feature-rich than anything we’ve had before. I’m really interested to see how it will be used; from that, I can begin mapping out the software’s future and next feature set.
And then there’s the next project I’m contemplating: an online web portal for instructors first, and then students. While Osaka is not in any way connected to an online web service, this website would take periodically exported data from Osaka and make it available as a personalized online profile page for each student. I’m still in the earliest stages of planning that project, but I know it will be based in PHP, use MySQL as a backend, HTML5 and the Twitter Bootstrapper for front-end design and UX, and in its first iteration will be exclusive to the instructors. It’s an exciting project – my first “Web 2.0” (if they still call it that) project.
Student Card Design
Along with the new software, I designed a new student card that again tie this new design aesthetic of SKKSA with their new digital systems. Here’s a collage of the initial designs:
Six designs were tested for the new student cards.
The challenge with designing the new student card was that it needed to succinctly convey SKKSA’s identity, whilst also remaining functional and eye-catching. A bold design would mean that the SKKSA ID brand image was powerful, and a noticeable object that would distinguish it from other documentation a student might carry to training or tournaments. In the end, a design similar to the fourth card above was chosen. And instead of grey (which I initially chose to be subtle and “professional-looking”), I went with a deep red and radial gradient that framed the famed tiger graphic. It’s simple, bold and carries the new SKKSA aesthetic.
Life in Pixels 