< Back to Work/Projects
Resident Advisor
Brief
Agent Z is a virtual marketing agency for real estate agents. Delivering high-quality branding, marketing strategy, and content creation for agents on the go.
After having worked for almost 3 years with sales reps and real estate agents, I realized a lot of the shortcomings with the company’s workflow, so I’ve thought of putting together an idea that would make the process run more efficiently.
Tools Used:
Figma, Illustrator CC, Framer
Methods:
User Research, Personas, Userflows, Sketches, Prototype
Resident Advisor Cover
UX Audit
Before redesigning the new layout, it was important for me to understand the current flow of the site by auditing the experience and taking inventory of potential issues and pain points.
I performed a UX audit with myself and 2 other users to get a better picture on the usability. Some found the layout straightforward but didn't know where to place their focus since most of the content seemed to be on the same level of importance. I personally found the long trail of old archives to be a dreadful scroll to bottom of the page. And some pages, like the News page, didn't have a well structured layout, it seemed more like a mesh of things without a clear purpose or hierarchy.
RA page design during UX Audit
Research
I did some research into the founder of RA and also the changes in the industry due to streaming services. From there I gathered some key points and understanding of what could possibly work.
The analytics for the site revealed where the users are mostly from, as well as the bounce rate and the main interest of people who go to the site.
Other interesting ideas to explore would be connecting streaming music services through the site.
Through the information found on the analytics, sites that shared the same industry goals were also listed. I examined their sites and see what patterns other competitive sites use.
Resident Advisor Proto-Persona
Information Architecture
After analyzing the site analytics, I re-organized the navigation and the content for each page, by delivering a new way for users to receive rich content through a clear distribution of channels: Read, Attend, Watch, and Listen.
Old and New Sitemap Redesign
Wireframes
Through sketching and lo-fi wireframes, I created different variations for the content.
Branding
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
Styleguide and Navbar component
Outcome
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
RA Prototype Preview
Outcome
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
RA Prototype Preview
UI Mockup
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
Final Page Layouts
Brief
Agent Z is a virtual marketing agency for real estate agents. Delivering high-quality branding, marketing strategy, and content creation for agents on the go.
After having worked for almost 3 years with sales reps and real estate agents, I realized a lot of the shortcomings with the company’s workflow, so I’ve thought of putting together an idea that would make the process run more efficiently.
Tools Used:
Figma, Illustrator CC, Framer
Methods:
User Research, Personas, Userflows, Sketches, Prototype
Ad for Agent-Z app
Research
The workflow would usually consist of request done through emails or in-person.
To illustrate, a sales representative emails a request for a "Just Listed" postcard and flyer design on behalf of an agent. They usually provide the following: the MLS link to the listing property, agent's information: name, contact, email, DRE#, logo, headshot, company information, property photos, sales content, and a few other details. The problem occurs when the sales rep would forget what to include, or down up miscommunication would occur, leading to tension and frustration on multiple ends.
The research was based on first-hand direct experience, and online content from Real Estate agents, which led to me create an overview of the personas.
Targeted audiences
Agent Z is for working professionals in the real estate industry: agents, brokers, companies, agencies and teams. Professionals who want to level up their game with a strong branding force and strategy.
For the personas, I created a profile based on those I've worked with and interacted in the field. Details are taken by in-person inquiry and observations.
Problem Definition
To get a clear picture, I listed the context and conditions, (the when and where), on the use case for the app and think about the environment in which the agents are experiencing the problem.
Context & Conditions:
- Agents are on the go; they need the product to be mobile with a desktop version if they prefer to work in their home/office.
- They have too much going and don't have time to think about marketing
- Make agents feel like they have their marketing under control
A flowchart of the starting point in the prototype
User Scenario
The following user scenario informs the screen list (right):
Kelly is going through deals and meeting clients and needs help with defining her brand for her newly thought project, a real estate business podcast. She jumps on her phone and launches the Agent-Z app. Kelly then sends a request for the service.
Old and New Sitemap Redesign
Wireframes
After defining tasks and understanding the product, the interface would work best is in the form of a dashboard for project management and overview. The product will be in a mobile app platform since real estate agents are often on the go and spend less time in front of a desktop computer.
I brainstormed possible layouts for the mobile app. The challenges I had was defining a good workflow of the screens and how they would work together. But through different variations, the solution came through.
Wireframing ideas for the app
Lo-Fi Prototype Flow
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
Prototype Flow - A visual aid to help when creating the interactions
Styleguide
The branding was created to convey reliability and to promote confidence.
The primary color was chosen to signify trust and loyalty to the client. The typeface, DM Sans and DM Serif Display represent elegance and maturity. All icons were recreated for this prototype.
Branding Styleguide
Outcome
As a final step, before shipping the product, I would test the prototype with Real Estate industry professionals, along with defined KPIs to measure the success of this solution.
Agent-Z Prototype Preview
UI Mockup
Final Screen Layout
Brief
Cabin Residency is a concept project inspired by a book called, Cabin Porn; which is an online community that started off on Tumblr by sharing photos of unique and stunning cabins built by people around the world. The movement is essentially about taking a break from the everyday fast-paced lifestyle to go back to the basics and to what matters most for the person or community.
Objective
The goal for the project was to design a booking website for a niche community of cabin-enthusiasts and outdoor explorers. For people who want to experience living in a cabin in the middle of nowhere, off-the-grid or on-the-grid; But mainly to bring the cabin-building community together to share their homes and to teach others the skills of building their own cabins.
Tools Used:
Sketch, Illustrator CC, Framer X
Methods:
Research, User Research, Moodboard, Personas, Userflows, Sketches, Prototype
Cabin Residency cover
Research
Most of my research was based on certain sections of the book, their Tumblr page, and article interviews with the founder. This helped to get the gist of their ethos and direction for the prototype.
Audience
The personas were based around the observations I got from my research and also from Instagram profiles; by querying tags such as #cabinlife or #cabin and looking for commonality in the likely users for Cabin Residency.
Personas research
User-Flows
After collecting and strategizing the content, I began sketching out the ideas for the branding and the layout for the UI. I created a rapid branding identity that best suited Cabin Residency.
Defined Task list and Prototype Flow
Wireframes
After collecting and strategizing the content, I began sketching out the ideas for the branding and the layout for the UI. I created a rapid branding identity that best suited Cabin Residency.
Lo-fi Wireframes for desktop
Branding & UI
The branding for Cabin Residency was aimed to keep it close to feeling naturalistic and with a sense of taking action to experience it.
UI Styleguide
High Fidelity Mockup
Aesthetics inspired by the moodboard, the UI mockup for Cabin Residency aims to visually appeal the website and promotes nature retreats and community-building.
It features a scenic header image with a welcoming tagline and a search bar for finding cabins. The main content showcases various off-the-grid and on-the-grid cabin options, inspirational stories about nature living, and community activities like workshops and cabin building. A call-to-action section encourages users to join the community by signing up. The footer provides navigation and support links. The design uses nature-driven images, clear typography, and earthy tones to create a serene and inviting atmosphere.
Moodboard
High Fidelity Mockups
Outcome
To conclude for now, the idea of Cabin Residency is building a community for the real outdoors and to learn from each other in being more self-sufficient.
Next steps: Will be to test the prototype with some possible users and iterate the design from the feedback.
Cabin Residency Prototype Preview
