quadrilingual ui/ux designer, Visual designer i convert complex ideas into beautiful, simple, and intuitive experiences I'm a curious, lifelong learner passionate about all things design
Loan Collections Redesign
Insikt is a financial tech start-up that offers loans at an accessible rate through partnered stores and banks to help the underbanked build credit.
The goal of this project was to optimize the debt collections efficiency for Insikt's internal operations team. Since the users are internal, I was able to conduct extensive user studies from early-stage research to testing. Together with the product manager, the operations team manager, and multiple collections agents, we constantly worked together to define expectations, goals, and structure. The direct feedback from each department heavily influenced the designs.
Challenges: There are multiple fields that can yet be improved. For instance, designing a chart-heavy dashboard for a responsive layout proved to be quite difficult. Also, there remains an overwhelming amount of information that requires more explorations to further declutter and simplify - and that's the beauty of iterating.
Identifying the Goals
User Research | Learnings
Extensive user research proved that one size does not fit all. I realized in most cases a feature/product is not designed to satisfy every user, but driven and prioritized based on business goals. For instance, the collections page is prioritized for agents handling customers from 30 days delinquent to charged off, as most customers lie in this category and have a lower likelihood to pay.
*Intentionally low-resolution for privacy protection
User + Business Goals Accomplished
Working together with the product manager, the operations manager, and both seasoned and novice collectors helped to clearly define the goals and priorities.
Before | After
Agent Sales Dashboard
Goal: 1. Motivate partner agents to sell more loans by having Internal field agents inform partner agents how they are performing each month. 2. Keep internal field agents accountable
Key features: 1. Partner agent dashboard showing their performance summary, rankings, and challenge of the month 2. Challenge page to allow partner agents to sign and accept their monthly goals 3. Partner agent profile to keep each person's basic information on file 4. Check-in to keep internal agents accountable
Challenges: 1. Maintaining process while running on a tight deadline, with less than two weeks scoped for finished designs. 2. Solely relying on internal agents for user testing and research 3. Working together with the developer to understand how best to implement the charts and graphs, and what the limitations were.
Select print collateral used to drive loan sales in partner stores. I had the opportunity to define our tone and voice, as well as collaborate with translators to design in both English and Spanish, as our target audience is primary Spanish speaking.
To incentivize our partner agents to sell more Lendify loans, Insikt selects nine top performers every sixth month to attend a three-day president's club event. I designed the President's Club newsletter aiming to document these memories and attract more agents to compete for the coveted spots.
For every partner store we launch our loan product, I am responsible for creating a marketing package customized for each partner (logo, color restyled) to drive sales and assist the application process.
Challenge: 1. Creating a consistent visual and language system that serves as a template for every partner with decisions driven by legal, business, and our partners. 2. Designing in Spanish!
Merchandise Design - Hollywood and Vegas President's Club
Designed separate logos and accompanying merchandises for two President's clubs, one held in Hollywood and the other in Las Vegas
When hobby adds value to work: I had the opportunity to put my lettering skills into use!
Real-World Applications - Integrate advanced CSS properties - Use HTML5 structural elements - Use CSS Resets to "normalize" the rendering of your page across different browsers - Use the Box Model to style element borders and structure your page
Technical Requirements - Use HTML5 structural elements (nav, header, footer) - Use a CSS Reset file in addition to your style.css file to style the page - Use IDs and Classes to to select and style elements on the page - Style your text with the Google Fonts provided by your style guide - Follow naming conventions, maintain consistency across .html and .css files and use best practices for naming IDs and Classes - Indent nested elements to increase your code's readability
Real-World Applications - Use media queries to render different CSS files according to screen size - Revisit applications and projects to iterate on and improve code you've written
Technical Requirements - Use media queries at 490px, 768px, 1000px breakpoints - As a user changes the size of a browser window: 1. Content remains in appropriate divs 2. Content remains visible to the user 3. Fonts change size appropriately 4. Margins and padding change size appropriately 5. Content does not overlap 6. In the blog section, the two-column layout changes to a single-column layout when appropriate
Technical Requirements - Build a web-app (using $.val (), $.click, $.ready(), $.attr(), and if/else) that will take a user's input and update the background image of the page based on that input.
I've been wanting to learn illustration for such a long time, so when I saw my favorite illustrator taught a course, I had to sign up for Skillshare.
I had so much fun taking the class, and found it a great combination with the Sketch together time lapse tutorial. Throughout the process, I found myself obsessing over the details, making sure no lines extruded, no colors or shadows looked off, and continuously adding and removing complexity to strike the right balance. Also, I realized that adding accessories makes a huge difference. Finally, the blue mono-line (now my Skillshare avatar) was an accidental invert, but I ended up loving it - and I may have just found my illustration style.
SeekPanda (now renamed Cadence) is an intermediary platform that helps to matchmake quality interpreters with foreigners seeking to do business overseas (primarily in China).
Challenge As SeekPanda was an early stage start-up, the co-founders wanted a working responsive prototype fast to present to investors. Over the course of 5 weeks, I designed the MVP website - the entire experience included a separate sign up, on-boarding, dashboard, and profile flow for both SeekPanda interpreters and clients. The role also required fluency in Mandarin, as we were designing for both a global and localized audience.
Upon sign up, the interpreter (Panda) flow lands on an empty dashboard. The immediate call to action encourages the Panda to update his or her profile to get started.
Client Dashboard | Client Job Posting Status | Interpreter Accepting a Job Request
Selecting a Panda (Desktop vs Mobile)
Client Payment | Interpreter Invoice
Brainstorming session with lead backend developer. Together, we white-boarded the entire user flow for our three main personas: the customer, the interpreter, and the admin. Having established the flow, I was instantly able to get everyone on the same page, and begin iterating with a clear picture of exactly what needed to be designed.
Final Style Guide
iOS Mobile On-boarding
My main project at Redfin was designing the First Time User (On-boarding) Experience for Redfin's iOS App. Most users go to Redfin for real estate listings, but few knew Redfin has salaried agents paid based on customer satisfaction instead of the closing price of the home. Thus, the two main goals of this project were aimed at increasing agent awareness and sell side conversion.
Although I did not get to realize the final illustrations before my internship ended, I owned the entire content, copy and concept of the project. Below is my work and process.
Goal of my project: 1. To help the user find their way back or report an issue easily 2. To turn a point of friction into a memorable user experience.
Solution: Inspired by the movie "Up", I wanted to create a lighthearted scene showing a house floating away. I animated the idea with Keynote, and reworded the message into a short, functional copy carrying a gentle tone that all but whimsically implies something is wrong.
Before (The Original 404 Page)
Initial Explorations and Wireframes
Process: I began with initial sketches and wireframes, moved on to low-fi mock-ups in Sketch and Keynote, and presented my mid-fi prototypes to the design team. Many explorations, iterations on direction, copy, and graphics later, we reached a consensus for the floating house. The biggest challenge was getting buy-in from the entire team, and I learned that presenting a limited number of options and animating the concepts proved the most effective.
Alternate Copy/Graphic Exploration
The idea was to create a set of error states that belong to the same family. A maintenance page, for instance, would look slightly different with alternate messaging.
My Final Proposal
Hope that was delightful! :)
Select print (holiday card, insert cards, magazine ad) and content (Blog, Pinterest, Instagram, Facebook, infographic) designs for BabyList, a Baby Registry Start-Up. It was exciting to see the "How Many Baby Clothes Do I need" infographic reach over 2500+ repins!