Tomo Blog
The blog will be a content repository for homebuyers and agents that shares insights to users while being a major SEO driver to Tomo’s homepage.
Intro
Problem
Originally it was thought that Tomo could achieve profitability via SEM, but performance metrics showed that it was not feasible at this time. In order to make Tomo profitable, the cost of real estate leads has to come down.
Goal
One opportunity identified for helping bring down lead costs is to invest in SEO (to which Tomo hired an SEO consultant) and the biggest way we can impact SEO is to build a blog.
Design also kept in mind these goals from marketing and engineering:
- Marketing: Easy to use, “dead simple” templates to create and publish posts
- Engineering: Easy to build (manage, update, monitor, deploy and migrate) ideally by one person in a short timeframe
My Role
Design and brand Tomo’s blog that is simple to build and to use with the SEO features advised.
Design
When marketing first proposed the idea of a blog, we made an initial blog wireframe and design. The UX designer (s/o Taylor Raquer!) and I brainstormed ideas on how to create a unique blog atop a standard structure. We also asked our engineering partner what their preferred platform is and understood the guardrails there.
Wireframe
We worked with marketing to determine the basic components on our blog. The initial blog was to include:
As for where in the navigation the blog could live, we landed on it being within a new dropdown tab named “Resources” (along with the FAQs page). We discussed whether we should call it a “blog” or could it be “learn”, “learning center”, “learning room”, or “resources”? Since the FAQs page was the most visited page, we decided to give users more resources in the top nav.
We worked with marketing to determine the basic components on our blog. The initial blog was to include:
- Category filters
- Article grid
- Lazy loader
- Banner to download the homebuyers’ guide
As for where in the navigation the blog could live, we landed on it being within a new dropdown tab named “Resources” (along with the FAQs page). We discussed whether we should call it a “blog” or could it be “learn”, “learning center”, “learning room”, or “resources”? Since the FAQs page was the most visited page, we decided to give users more resources in the top nav.
Branding
“Design a simple blog.” Let’s do it.
The branding process involved several steps that aimed to build upon Tomo’s visual identity—the fundamental principles being to welcome, to guide, and to delight. Keeping that in mind, we focused on the imagery as the space where we could infuse branding. This would show up in the blog’s thumbnail images and individual article’s hero space.
Step one was to create a design system for the article categories: real estate, homebuying 101, mortgage process, and Tomo news. We concepted several directions below using photography and graphics.
“Design a simple blog.” Let’s do it.
The branding process involved several steps that aimed to build upon Tomo’s visual identity—the fundamental principles being to welcome, to guide, and to delight. Keeping that in mind, we focused on the imagery as the space where we could infuse branding. This would show up in the blog’s thumbnail images and individual article’s hero space.
Step one was to create a design system for the article categories: real estate, homebuying 101, mortgage process, and Tomo news. We concepted several directions below using photography and graphics.
Photography & graphic considerations:
After careful consideration, we decided on the rounded corners direction that included natural photography and branded illustrations. The photographs felt clear and inviting to users, while the illustrations create a fun depiction of (what might be) a boring mortgage process. The rounded, top corners felt unique to Tomo and created a pattern reminiscent of tiles (roof shingles, garden dividers).
- Does the photography feel warm, inviting? Is it unstaged, candid?
- In terms of photo editing, does it feel natural? No strong filters, harsh lighting? -
Is there a clear focus on the home and/or the humans?
- Is the home being presented in a way that makes a viewer feel like it could be something special?
- Is there clutter, distractions from the home and/or humans? - Tomo is a fintech mortgage startup, so when we add in technology (phone, laptop, tablet), are we presenting an atmosphere where the process looks easy and painless?
- How do the human expressions look? - What is our brand illustration style? Are branded graphics easy to create by the marketing team?
After careful consideration, we decided on the rounded corners direction that included natural photography and branded illustrations. The photographs felt clear and inviting to users, while the illustrations create a fun depiction of (what might be) a boring mortgage process. The rounded, top corners felt unique to Tomo and created a pattern reminiscent of tiles (roof shingles, garden dividers).
Blog main page and article page, in desktop and mobile
Photography selection
Illustration styleFuture thinking
After establishing the blog’s visual foundation, we would hope users find the blog to be as resourceful as Tomo’s popular FAQs page. Additional components are already in conversation with Tomo’s SEO consultant, such as adding:
- Articles with friendly UI incorporating images, videos, sub-headlines, quote features, table of contents
- Templates for a general article, guides, “listacles”/”how-to”s/”best of” round ups, glossary
- Internal blog navigation with pagination, site map
- Author bio detail page