Leisy Vidal

Project Brief

Orlando.org

While working as a designer and developer at Designzillas, I was assigned to work with the leadership team at the City of Orlando’s Economic Partnership division to redesign and develop the digital face of Orlando business and growth at Orlando.org. The new website would exist as a four-part multi-site broken down into four functional sites: a news platform, a talent recruitment site, a business development magnet, and a public-facing site for the City of Orlando’s Economic and Business Development organizations. All four sites are live, and are set up to attract top talent to the city, attract businesses and corporations to move their headquarters to Orlando, and to support existing talent as they uplift the city to financial success.

Client

The City of Orlando’s Economic Partnership

Project

A new multisite experience to represent the City of Orlando, and a full news platform.

Role

User Experience, User Interface Design, Front-end Development

Project Ownership

Designzillas

Notable Outcomes

Post-launch increase in number of users and sessions by +48% YoY. American Advertising Federation sliver ADDY award winner.

Step 01

Data Research and User Interviews

We used competitor analyses, keyword search data, and Google Analytics data to review current user data and targeted trends users would need to see on the new site. Besides the default data search, we also used real user input in a variety of ways. For the talent recruitment site, we used survey and interview data from a Recruiter’s Roundtable session held by the Orlando Economic Partnership with recruiters from key talent hiring pools, (such as Disney, NBC Universal, Wyndham Vacations, and more) to extract out pain points current recruiters had with the existing site to ensure a smoother experience with the new site. For the business development site we reviewed city presentations and investor feedback for Orlando’s pitch to obtain Amazon’s new headquarters. We reviewed feedback from the Orlando Economic Partnership’s Brand Roundtable (with top brands like Red Lobster, Florida Hospital) to understand what top brands in the city needed to facilitate growth for their companies and consequently, for the city.

Images of the old Orlando.org site
Orlando home page ui design

Pictured above: a comparison of the before and after views of the user interface design of Orlando.org.

Step 02

User Journeys and Card Sorting

The Designzillas team got together for quite a few planning sessions to map out a full sitemap, user flow, and simple wireframes of each and every page. We outlined detailed acceptance criteria, content, design, and development needs on a per page, per section basis, for every single part of their web experience. With so many user personas and use cases at stake, we knew we couldn’t have let any important user flows go unplanned.

Pictured above: images of different user journey mapping and card sorting sessions held at Designzillas.

Step 03

Initial User Experience Flow Prototypes

Once all user journeys were mapped out, the team started mapping out different user flows. We presented the prototyped flows to the Orlando Economic Partnership team, and with their review and approval, moved on to wireframes.

Pictured above: screenshots of early user flow prototypes created by the team for the business development site that influenced my designs.

Step 04

Wireframes

Once all user journeys were mapped out, I started wireframing out regions. The strategy, planning, and data phases all influenced the final wireframes created for all four sites.

wireframe for Orlando talent recruitment site

Pictured above: the wireframe I created for the second project site, titled "Live, Work, Play", the talent recruitment site for the City of Orlando.

Step 05

High-Fidelity User Interface Designs

From the approved sitemap planning meeting and wireframes, I moved into more solid high-fidelity designs. I started playing with different font pairings, layouts, photography styles, and menu designs that aligned with the existing 39-page brand guideline book, yet elevated it to the next level. I designed success story archive pages, neighborhood search pages, board member listing pages, and more for these four sites alongside the rest of the Designzillas design team.

Orlando Cost of Living Calculator
Orlando Success Stories UI design
Orlando Neighborhoods UI design

Pictured above: high-fidelity user interface designs of a cost of living calculator page meant to compare how affordable it is to live in Orlando versus other major cities, a locals' success stories archive, and a neighborhoods listing page.

Step 06

Front-end Development

I also worked as a developer on this project. I developed a lot of the front-end styles, sections, layouts, and pages seen across all four Orlando.org sites, in order to support senior developers Jordan Pakrosnis and Ryan Smith as they worked on a lot of the multi-site architecture development, cross-site network querying, API implementations, advanced custom post type and category archives’ search and filtering functionality, and the custom WordPress Gutenberg block creations. It was amazing to develop a lot of the pages I designed, such as the success stories page and the cost of living calculator and see them come to life. I also integrated the website’s forms with Orlando.org’s CRM, HubSpot in order to track newsletter leads into segmented lists.

responsive data tables with mobile th attributes

Step 07

Project Summary

The Orlando.org website is live, and has received gold ADDY awards from the American Advertisement Federation. Their site is performing well with high increases in new and returning users (up +48% YoY), number of page views (up +48% YoY) and decreases in bounce rate (down average of -9.9%). This site continues to be the face Orlando talent, business developers, and investors see every day.

View Orlando.org

View all Project Case Studies

View all of my latest projects in featured case studies to see examples of wireframing, user interface design, and front-end development work created in SCRUM-certified agile work environments.

View Case Studies

Let’s Work Together

If you are interested in working with me to develop online courses, speak at a meetup or conference, assist with a mentorship program, or even guest write a blog article, just send me a message to get started.

Let's Work Together