UX Guide

Client Q&A

Products & Services

Development - Affordable/mixed income housing, commercial & mixed use, and neighborhood revitalization around surrounding areas of properties.

Property Management - Residential and commercial in various neighborhoods of Pgh, Indiana and Washington Counties, from affordable/mixed income to luxury living.

Target Audience

Current and potential residential & commercial tenants.

Potential employees looking to work with Trek.

Potential development and investment partners for future projects.

Communities in which Trek is expressing interest to develop in the near future.

Hard to determine who makes up the current site traffic, so there’s an opportunity to delineate by segmenting the site into residential vs commercial.

Plans for Digital Presence

Attract potential tenants to their new residential/commercial space. Better present press releases concerning Trek Development in a scalable, convenient manner that is also more aesthetically pleasing and engaging. Convey Trek Development as the premier authority in property development and management in the Pittsburgh area to open the door for partnerships.

Current Challenges

WordPress CMS and editor tools are difficult to maneuver for updates and changes, while also limiting the presentation of content on the site.

Orange theme and logo can be polarizing from an aesthetic point of view if not paired with the correct palette.

Competitors

TCB https://www.tcbinc.org/

Content is laid out in a readable fashion, but UI suffers the same problem as the current site with multiple nav groups.

Walnut Capital https://walnutcapital.com/

Well branded towards client lifestyle, collection of property pages is neatly laid out and has just enough info without going overboard.

Q Development http://www.qdevelopment.com/

Great example of what we are avoiding from a design and organization standpoint. Currently serves as a business card and has a poor portfolio layout.

Pages/Sitemap

Properties - Database for all commercial/residential buildings

About - Why Trek, Awards, Approach, Green Technology, Team Bios, Careers

Services - Development, Property Management, Supportive Services

Projects - Portfolio including current and past projects and their dedicated pages

News/Press - Curated content that highlights involvement of Trek Development

Blog - Valuable content that Trek shares with their audience, including company culture, latest properties, resources, etc.

Contact - Location, contact info, and submission form leading to an email inbox

Resident Portal - External redirect leading to Realpages portals

Styling / Aesthetic

Modern, clean. Orange should be paired with a secondary color that can serve as a complement while also highlighting key sections or breaks within the site.

Two separate menu navs on the header detracts from the user experience and should be consolidated into one.

Pages should be visually driven by the properties and their surrounding neighborhoods. Being able to provide equal balance among all services and types of properties offered is essential for an accurate visitor experience.

Features / Functionality

Sort/filter function - For property type, function, location, etc for prospective tenants

CMS/editor access - Update blogs, project pages

Voice & Tone

Approachable, community-oriented, inviting, professional

Are you aligning your site with an event or promotion?

Trek parent site should be revamped once the property/project websites are all redesigned and serve as suitable landing portals.

SEO Analysis

What terms people use to find your website when they use a search engine

Traffic

Competitor Analysis

Sitemap

CTAs & User Journeys

Successful Conversion Action

  • Find Your New Place
  • Apply
  • Investment Inquiry
  • Contact Us

Calls To Action

  • Get in Touch
  • How We Can Help
  • Learn More
  • Apply
  • Find Your New Place

Main User Journeys

  • Home → Find Your New Place → Property Detail → Contact
  • Home → Lenders/Investors → Contact
  • Home → Careers → Apply
  • Home → Resident Portal
  • Home → Contact

Logos

Main Logo vertical
DOWNLOAD

Color Palette

Primary 1
#F17641
Primary 2
#FF8F5E
Primary 3
#e04826
Dark
#1f2024
Grey 1
#3e3f46
Grey 2
#72747e
Grey 3
#bfc2cc
Grey 4
#dee0e5
Haze
#f3f5fa

Buttons

Button
Color Button
Button
Secondary Button
Button
White Button
Button
Color Button (Small)
Button
Secondary Button (Small)
Button
White Button (Small)

Super Heading Number 1
King of Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Super Heading Number 2
Heading's Revenge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Super Heading Number 3
Rise of Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Super Heading Number 4
Heading's Fall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Super Heading Number 5
Return of the Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Super Heading Number 6
The Last Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph - Big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Top