CheckPay is a Vancouver-based fintech startup with a focus in providing simple payment solutions. I had the great opportunity to be part of their product team for their newly-launched mobile application, HelloChat, a social and financial app.
role
UX/UI Designer
responsibilities
UX flows
UI design
prototyping
animation
illustration
video editing
tools
Adobe XD
Adobe Illustrator
Adobe After Effects
Jira
Zeplin
Sketchbook
UI Design
Icon Pack & Illustrations
Within the first 2 weeks, I studied HelloChat and designed a set of icons (120+) that matches the app's brand identity and personality. Later on, I created 20 illustrations with the same style.
Navigation icon set for HelloChat.Empty state illustrations.
Dark Mode
Creating a dark mode colour palette for future development was a great opportunity for me to study and under HelloChat's UI design and colour combinations.
Dark mode colour palette mockup with key screens.
UI Redesign
Working with the other UI designer on the team, we researched and work together to create a set of mockups with the redesign concept. The goal was to highten the lively spirit of HelloChat and to appeal to the younger demographic.
Dark mode colour palette mockup with key screens.
UX Design
New Feature: Favouriting Posts
Prior to designing the user flow of this new feature, I studied major social apps on the market to see what I can learn from and what I should avoid. I then explored different flows with low-fidelity wireframes before creating a full set of UX flow with the current app design.
Saving a Post
Managing Your Saves
Wireframes for saving a post to your favourites.
New Feature: Group Split
HelloChat currently has a feature where users can split bills with 1 other friend. With the addition of a Group Split feature, users can easily manage larger events with multiple participants. I was in charged of designing the user flow for this entire feature.
A flowchart illustrating the user scenario.
Animations & Videos
Splash Screen - Valentine's Day edition
HelloChat has a brief splash screen, where users always see when they log in to the app. My task was to ideate and create a special splash screen for Valentine's Day. I started with researching and sketching mini storyboards out, created different versions, and eventually finalized on one concept.
Final Version
Version.1
Version.2
Version.3
Version.4
Version.5
How-to Videos
As part of the public launch of HelloChat, I was responsible to create a seires of instructional videos on the main features of the app; for instance, how to top up your e-wallet, how to split a bill with someone, how to add friends etc.
I created prototypes while ensuring the mockups were up-tp-date with the actual app, then I applied a consistent editing style to the videos to deepen the brand identity. I also wrote out the scripts and work with the marketing team to record them. At the end, I typed out a detailed editing and script guideline for future use after I finish my co-op.
A few video examples:
Creating a Group Chat
Paying with QR Code
Paying a Split Bill
reflection
Outcome
My 4 months with CheckPay was a valuable experience as it was my first time working in a startup environment. A small team size means I had to take on more role as a UX/UI designer and challenge my comfort zone, which brodened my skillset as a designer.
I particularly enjoyed how I was able to work closely with everyone in the office and as well as other departments; I gained a lot from interacting with people from different fields with different experiences.
Joining a team when the product was just coming out to the market was a truly unique experience to me. Not only was I there to witness every step that it took to improve the product, I was part of the journey too! The entire process was new to me and I feel very lucky to be able to contribute to the product at its early stage.
