Rollodex
A database that allows for business contacts to be easily formed and organized for ease of contact.
Overview
Rollodex is a digital database that allows the user to easily receive and make business cards. These contacts are all organized in one place for the user to easily access all the contacts that they have made. I worked as the sole designer on this project, and made the design based on what was already coded for it.
Process
Ideation
Design
My Role
UX/UI designer
Timeline
January - March 2024
Tools
Figma
The Challenge
Appy.Yo wanted to create a digital database to store all their business contacts so that they don’t have to rely on the use of business cards. Along with the database, they also needed branding for it since it was a new project.
The Solution
I designed a website and the branding for Rollodex. On Rollodex, the user can sign up for an account and create contacts and have them all stored in one place. All the information is displayed like business cards with the contacts’ information so that it is easily accessible for the user. I also created a branding guide that includes all the design elements that were created with the type of product Rollodex was in mind.
What they say
“Katie is knowledgeable and great to work with”
Project Manager
Ideation
Sketches
In this phase, I did a lot of sketches for the branding of Rollodex. I started with brainstorming different logo designs, playing around with different types of logos, I then moved onto brainstorming different illustrative visual elements that would be used in the website.
Design
Low Fidelity Wireframe
I developed a series of low fidelity wireframes based on the content that I was given for phase 1 of Rollodex, and the second series was chosen as the one to move forward with.
Mid Fidelity Wireframe
I further refined the chosen low fidelity wireframe by adding in the colours from the chosen colour palette and using the fonts that were chosen. In this stage, I made some small changes to the wireframe that was chosen to improve the user experience.
High Fidelity Wireframe
After finalizing the branding elements, I worked on finalizing the wireframes.
Branding
I created a style guide that would clearly layout all the design and branding elements that were created. In the branding guide, I designed the logo, typography, colour palette, website elements and visual elements.
Learning Outcomes
Take notes
Throughout this project, I took many notes, this helped me define the deliverables and keep track of the project.
Communication
In this project, communication was essential to get everything finished on time because of the tight deadline.
Let’s Connect!
©
Katie Liu
2025