A React Native app that helps international students get into the best universities in North America.
Designed and deployed a React Native app to the iOS store in under 3 months
Built a fully functional messenger feature complete with push notifications
Components were designed to meet WCAG 2.1 AA accessibility standards
Zept helps potential international students identify programs and universities they would like to attend in Canada and allows them to connect with university recruiters. Although Zept had an existing web app, it didn’t meet all the needs of the students or recruiters, most notably was experiencing a drop-off in communication between those two parties.
Zept needed a partner with React Native expertise who could help build and submit apps to the App Store. That’s where Rangle came in. At Rangle, we created an intuitive and innovative React Native app, featuring a messenger and integrated push notifications for increased engagement.
I was the Product Designer on the project, joining two Senior Developers, a Scrum Master and later a business and quality analyst. Our engagement with Zept was contracted for 3 months, however, I was contracted part-time (6 weeks) as the client had indicated that the design updates would be minimal. At the time, I was also part-time on another project so I needed to prioritise my time accordingly.
Our PO on the client side was the lead designer and developer on the project. Later we could come to learn about the challenges which came with that.
Zept had come to us with the following business goals:
—
Release a mobile-first MVP version of the current web app in React Native on Android and iOS
—
Push notifications feature for additional user engagement
—
Reuse existing code base with minimal refactoring
—
Rangle developers to share best React Native practices and pair-program with Zept developers
During the contract negotiation stage, Zept stakeholders indicated that the design effort on the project would be minimal and mostly entail the adaption of existing flows from the current web app for Android and iOS app stores. As a result, design started the project at the same time as development. Typically at Rangle, design teams would start projects at least 1-2 sprints ahead of developers to conduct the necessary research before developers needed designs.
Zept’s current web app, however, was designed internally by their lead developer, and as we dived deeper into the current state of the web app, we discovered a lot of missing functionality and flows as well as some serious usability issues.
During our kickoff sessions with the client, we needed to get a clear understanding of Zept's target users, their goals, motivations and pain points. During the session, we learned about demographics, device usage and their Facebook advertising acquisition model. Since Zept did not have any persona artifacts, I leveraged this data to create a proto-persona to assist my design exploration.
To better understand the task ahead, I conducted some task analysis studies for the two main priority flows identified in our discovery. These were:
—
New user flow – Onboarding to the app and managing school selections
—
Push notification flow – Conversations between recruiters and students
With limited time available to research, I moved quickly to some lean competitive analysis of University recruitment and similar service models to get a better understanding of the space and to help to guide design patterns.
Since we had no clear brand or experience values defined for Zept, I gathered visual design components during this exercise to help inform a cohesive visual style for the app and guide design decisions. I put together a moodboard and some chosen design values as a starting point based on the goals of the project. This would prove quite valuable as a relationship-building tool with the product owner by involving them early in the design process.
A big challenge I faced immediately was that I was required to deliver design work by the end of the first sprint, without much, if any, established or preexisting design patterns that could be leveraged.
Forming a basis for a design language initially helped a lot. We would take a less is more approach, leaning into material design patterns for base components we needed right away and then revisiting cohesion as we addressed more problems. Getting client buy-in for this approach allowed us to move quickly without sacrificing good user experience.
With just six weeks of design time on the project, I needed to move quickly so alignment on design direction was critical. With our product owner's duties spread thinly across acting as the product owner, developer lead and design lead on the client's side, setting up regular design reviews and check-ins contributed significantly to the velocity of the project and trust the client had with our process.
The messenger feature would be the largest development epic of this project and we needed design sign-off on this early. We "built the plane while flying it" for this feature as it coincided with our design direction exploration.
Up next was school selection — users would be presented with school matches based on their grades, preferred programs and school selection. Design reviews helped us improve the original University profiles greatly, especially from an accessibility point of view. In this project's scope (and at the request of the PO) we needed to stick with the floating preference buttons.
Later in the project, we had the opportunity to add some flair and introduce some illustrations and animations. I created illustrations for empty-state screens for the primary sections of the app. I also created a lottie loader animation for when users were searching for schools or adjusting their filters.
Getting to these finishing touches was a great bonus as these details were out of scope initially. The product owner had become invested in the visual design evolution and the project ran smoothly, we were fortunate to have time left over for this.
We had advocated for usability testing early on in the process and the client had suggested that it would be something they would take on internally after the App store submission. As we got to the end of the engagement we found an opportunity to conduct usability testing sessions with a hybrid of Rangle employees and a few international students the client was able to source for us.
We asked users to onboard to Zept, select their universities and edit their shortlist. Before I off-boarded from the project, I synthesized the major themes and provided recommendations for the Zept team to investigate further.
In less than 3 months we had a functional app live on the app store and we were shipping weekly updates. Our team had prioritised the iOS App store and fully onboarded the Zept team in preparation for release to the Android store. In addition, we had tested the Android process to ensure we would need minimal code and design updates.
A place to track your key accounts, property and financials for your executor