Website logo

Zept App

A React Native app that helps international students get into the best universities in North America.

Role —
Product Designer
Duration —
6 weeks
Responsibilities —
Lean research
User journey mapping
Visual design
Interaction design
Usability testing
Highlights —

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

Background, goals and my role


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.

Zept's Product Vision —

An intuitive and innovative native app that enables potential students to be matched with the right program in the right university and be able to communicate with a university recruiter.

My role and challenges

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.

Business goals

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

Challenge #1

Design starting at the same time as development

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.

Above: Screenshots from Zept's original web app. Inconsistent design patterns, overlapping elements and accessibility issues were some of the issues uncovered from our initial audit.

Understanding user goals and behaviour

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.

Above: Zept's target user analysis from our kick-off sessions. I used this data to create a proto-persona which would help guide design exploration.

Mapping our MVP flows

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

Above: Our MVP task flows

A lean baseline for design direction

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.

Above: Initial moodboards created during the lean competitive analysis exercise. Alignment with the client early on this helped set the stage for design feedback later in the project.
Above: Some proposed design values based on the requirements of the project, goals of the company and observations from the competitive landscape.

Evolving the design language

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.

Above: As the design work evolved into components and layouts, we matured the design direction into a style tile.


Get client buy-in on an agile approach to design

Challenge #2

Our product owner wore too many hats...

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.

Key flow exploration

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.

Above: Early iterations of the messenger feature.
Above: Evolved designs for the messenger feature as we aligned on design direction.

Choosing your preferred school

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.

Agile design evolution

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.

Above: Empty-state illustrations for the main sections of the app.


Hold regular design check-ins

Challenge #3

Usability testing could only be conducted at the end of the engagement

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.

Above: We tested our new user flow, asking users to onboard, select schools and edit their shortlist.
Above: A more common theme was users grasping what type of company Zept was and how the app worked. I put together an optional walkthrough and recommended that the team investigate this further.
Above: Other themes centred around the University profile page. Some high-value items such as compatibility and cost of programs were not clear enough.


Educate the client on the value of user feedback, early and often


Zept App approved for the App store!

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.