Duo-Wei Yang
Georgia Institute of Technology
Waddle: the walking school bus app
May - August 2020
App Prototyping, Service Design, Graphic Design
Since 2019, the City of Milton (GA) along with Georgia Tech researchers have been working on a "walking school bus" app, a tool that would provide real-time group communication for parents who want their children to have supervised group walks to school. This project was created to build upon Milton's Safe Routes to Schools (SRTS) initiative and encourage healthier habits and minimize traffic and pollution.
I was brought in at a crucial time in the project. The team was looking for someone to give some design input, especially suggestions on improving usability and appeal. During this internship, I redesigned the entire app concept, flow, and overall aesthetic. I also designed and created promotional material, such as an advert for a showcase and the website they were planning to launch.
.png)
Research and planning
The very beginning
If I look back at when and how the app project started and evolved, I think I can say that I was brought into the project at an unusual time. The walking school bus app had been going on for at least about a year and the researchers, Milton planners, and AppZoro (software company the city hired) pretty much knew the ins and outs of, well.... everything. I was going in pretty much blind, so I had to look through their records and documents.
I looked at Milton's proposal to receive a grant from the Georgia Smart Communities Challenge, business requirements from the software company, and the general scope of features they were looking for. These features include:
-
Registration/Security: registration to the app should be by invitation only,
possibly with unique codes made available to each student in the school. -
Scheduling: Help parents sign up as parent volunteers or join an existing group.
Communication should include route starting time, location, days of participation, etc. -
Tracking: There will be tracking of the leader/supervisor of the walking school bus.
-
Individual tracking: Parents should be able to track their children if they have a
smartphone with the application running. -
Messaging: an ability to send direct or group messages to other students and parents.
Dissecting the previous design
Before I joined the project, the Milton planners had asked Appzoro to produce wireframes and mockups for the walking school bus app. They had been working and discussing the design for several months together until I came in. Here are samples of what they looked like:
At first, I thought it seemed alright and just needed some adjustments, but the more I looked, the more problematic the overall scheme was.
For example, the home screen (first app screen on each of the above images) is extremely messy. The different typefaces and fonts don't really match up and the sizes are off. The UI elements don't have a distinct flow to it. The "Hi Mark" is so much smaller next to the search bar. The grid of icons (features) are not intuitively laid out. The screen just has too many elements and information.
The schedule screen is also problematic. There's no sense of font hierarchy and the calendar is quite small. The schedule details are hard to peruse in an instant and the squared circle add button is a very strange design choice.
I also found the groups section very odd. There was too much at the top and the group were laid out in a way that didn't feel clean or easy to look at. It's not that the asymmetrical placement is necessarily bad in app or graphic design, but this execution definitely didn't work.
Overall, the color scheme and typeface choices are not really tied together to establish some sort of feeling and emotional that's essential in branding. Although this app isn't for a company, it should still embody the ideal experience of a walking school bus.
My work was about to get a lot more challenging than I expected.
Redesigning
Creating a brand
Based on the quality of work and the file type (pdfs and individual Photoshop files for each screen), that AppZoro sent me, I decided to redesign the app from scratch. This was a daunting task because I was designing something alone and on a project that had been going on for a while. However, the freedom in starting from zero was also liberating in a way. My direct supervisors, the Milton planners, and I had weekly discussions during this process.
The first step was to decide on an appropriate color scheme, fonts, a logo, and an official name for the app. My supervisors and I agreed that as the app was centered around elementary to middle school-aged students, it should be more playful and exciting.
The idea behind the logo came from a walking-to-school event Milton schools had. Students that participated received a cute penguin keychain. This also lead to us deciding the name of the app: "Waddle".
Quicksand Medium
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Helvetica Neue
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Early mockups
The next step was to design new mockups based on what AppZoro had created. This included the:
-
Home screen
-
Groups feature
-
Scheduling feature
-
Messaging feature
-
Routes on the map
I usually went through several versions of each before my supervisors and I were satisfied.
.png)
The above screens are an example of this process. In Version 1 (left), my priority was to redesign the home screen into something that was much more clean and straightforward. This included:
-
A tab bar at the bottom would be much more intuitive to use. When an individual icon is pressed on, it will turn orange to indicate what section of the app it's in and go to its respective screen.
-
Upcoming trips would be shown on the home screen for quick and easy access
-
The top left menu button would lead to a sidebar that would allow you to edit your profile, notifications, and other smaller functions.
-
More visual hierarchy.
In one of my intermediate versions (center), I tinkered with:
-
Color choices
-
Introduced badges, something the supervisors wanted to incentivize usage of the app
-
Used the bell icon on the top right as its own button for notifications and its settings
For the final version (right), I decided to:
-
Improve the badges
-
Reintroduce the history feature that was omitted
-
Have a better structure of the UI elements
This process similarly happened with the other features as I was given feedback by the Milton planners and Georgia Tech researchers.
Prototype
Showing prototype to stakeholders
Whilst making my mockups, I already began to create links between my artboards. However, the flow changed as suggestions or comments were made, and they didn't just come from those working on the project.
COVID-19 made things difficult, as conducting user testing sessions with prospective users (parents of students) were highly challenging. User testing that's in-person (at least in my experience), is intimate and gives a better understanding of how a user thinks. You can also observe their actions, which can often speak louder than words. Another issue was the time constraints and tight schedule the project was on. While it was possible that we could ask parents to download Adobe XD or InVision to test things out on their phone, AppZoro was on a tight schedule to produce a fully-working product by August.
We were able to however, present the prototype (work in progress at the time) to parents at a Zoom meeting. My supervisors and I explained the features and flow of the app. The main feedback we received were the following:
-
Notifications were important. For example, a parent wanted a five-minute warning before the walking group arrived so he could hurry his kids and make them head out the door in time.
-
The tracking feature was very liked and felt essential.
-
The app's calling feature that was available to both walking supervisors and the parents was well-liked.
-
Some parents asked if changing the font size or having a dark/light mode was possible.
-
Parents asked for a built-in tutorial for new users and an instructional YouTube video.
The last two main points are likely going to have to be implemented after the app is first launched, due to scheduling and budget concerns. However, my supervisors and I agreed that they were necessary at some point.
Waddle: the walking school bus app
Whilst making my mockups, I already began to create links between my artboards in Sketch. However, screens sometimes shifted around in the flow or were edited heavily due to usability concerns. The following is what I completed and handed to AppZoro, though they weren't able to implement it in its exact form due to the time needed to code and some disagreements in design. However, I believe that they will be able to replicate most of it once usage of Waddle begins.
1. Intro screens
Like some apps, there is a quick intro when you first launch it. There is a discussion on launching this app in cities outside of Milton, so this might be useful for people who don't know the app well.
2. Logging in or signing up
This screen allows users to quickly switch between signing in or signing up, depending on if they created an account previously or not.
3. Home screen
The home screen currently shows upcoming trips, earned badges, and trip history, all information that can be summarized quickly to the user.
.png)
.png)
4. Notifications
Although AppZoro's design didn't include notifications, I convinced the others that it was necessary to be able to adjust notifications on an individual level. Parents also agreed with that notion. The notifications are accessible by the bell icon and can be adjusted by pressing on the gear (settings) icon.
5. Groups
Here, parents can add more walking groups they want to be a part of. This can be for scheduling or proximity reasons. If they are in the supervisor tab, they'll go through their group information as a supervisor. If in other tabs, they will be acting as a parent for a specific child. Photos of children cannot be used for privacy and security reasons, so I designed cute penguin avatars that each child can pick for themselves. This can make the student more involved with the app and walking school bus concept.
6. Messaging
This was the only feature that had one version. However, I think this is likely because the app is not focused on this feature so it wasn't something that was very complicated or needed a lot of nuance.
7. Students
In this feature, parents can add information on their student(s), such as which school they go to. They can also see what badges were earned for each child.
8. Schedule
Here, parents can add themselves (as a supervisor) or their kids into a current or new group. They can specify which days and time they or the kids want to be in the group and how often. If the user is looking for a new group, the app will display a map with available routes/groups that have enough room.
Promotional material
Website
Aside from my UI redesign work, I was asked to design a website that will be used to explain and promote Waddle. On a personal note, I wish I could've been able to create videos of the app for the tutorial pages, but AppZoro's version of the app was very different from what I had and my internship was pretty much at the end at that point.
Showcase advert
Another assignment I had was to create an advert for an upcoming showcase they had. My supervisors were planning to present the current app to Milton officials, parents, and other community members.
