HEARTLAND MEDIA SITE LAUNCH
The Heartland Media Group Website development project showcases the immense value I have delivered to clients with my design and development competencies. This is another instance of aligning my skills and experience specifically to the local media industry in the US.
As a part of the strong forte in technology solutions catering to the local media industry, I was handpicked by Heartland to overcome the various challenges around their business website. Right from consulting and strategy design to competitive evaluation and design overhaul.
THE BRIEF
Heartland Media specializes in local media broadcast. They operate multiple TV stations and manage digital assets from coast to coast across the US. Looking at their scale of operations, evolving user preferences, strong mobile-first demand signals, and future industry demands, they needed to get their websites revamped. They needed a tech partner who understands the US local digital ecosystem and zeroed down on us.
THE GOAL
The Heartland Media website aims to execute a seamless user experience with the complex information architecture and intricate audience targeting. This needed enabling superior digital experiences throughout the customer journey and keep customer engagement high.
In order to accomplish these challenging objectives, we finalized on Frankly platform. This move provided multiple advantages like interactive visual interfaces, smart design methodologies, and an intuitive web experience that was device agnostic.
THE OUTCOMES
- A more intuitive with a dramatically reduced load time and future proof visual appeal.
- Total re-design of the website to match target market and user preferences of the client
- Keeping in mind the mobile-first philosophy of the company, we planned and executed the project accordingly. Most features that are on desktop are included in mobile automatically. There is no need for the client to invest additional time or efforts to sync the mobile site with the traditional site. This functionality helped drive the mobile user acquisition objective of the business.
- Automatic alerts informs you immediately of a breaking story or an update.
- Unprecedented content programming and promotional capabilities with the ability to configure and surface headline modules on any page or section of your site.
1.INTRO CALL/KICKOFF
As per SLA objectives, we provided a comprehensive business and technology consulting session to kickstart the project. We also discussed the delivery schedules, budget, point of contacts, process, and broad milestones associated with the project. The key outcomes and project KARs too were finalized.
It was a call with the client, developer, client services manager and myself.
It was a great opportunity to teach the client how to maximize their digital footprint during this session. I heard a lot of “I don’t know what we want to put there. What’s your suggestion?”
2-BRAINSTORMING IDEAS
Before doing a deep-dive into the project, we requested a project briefing to keep everybody on the same page. During this in-house meeting, we reviewed the performance of their current site, looked at some competitors and set a few general goals.
We tried to answer the following questions:
- What are we trying to achieve?
- How will we know the project is a success?
- What do we need to do?
- Why do we need to do it?
- What are the must-haves?
- Who is the target audience?
- How will they know about it?
- What are your technical and non-technical requirements?
3-COMPETITIVE ANALYSIS
While we don’t recommend obsessing over competitors, we wanted to find out how Heartland compared to others. So we ran their website through the HubSpot’s free Marketing Grader tool to generate a report card of how their website and marketing is performing.
Next, we took a look at their competitors’ website, and took a note of what they like, and what they don’t. This was not meant to make them a copycat, but rather to help the client realize about what we can do better to get a competitive edge. Once we conducted the analysis, we put together a list of action items highlighting areas of improvement and what client can do differently than the competitors.
- Design
- Content
- Conversion paths
- Performance
4-INFORMATION ARCHITECTURE
On a website, the information architecture is organizing, labeling, prioritizing, and connecting content to support usability and findability. In other words, a website with a clear information architecture:
- Makes a website easier to use
- Makes website content is easier to find
In my short definition, there are 4 words that are very important: organizing, labeling, prioritizing, and connecting.
Because local media sites have a lot of content and different categories, it is very critical for the user to find what they are looking for in the primary and secondary menus. We recommended three type of secondary menu (dynamic drop down, static, and mega menu). Heartland chose to go with our dynamic drop down menu and limit their main menu items to 10 items or less. We also helped them choose various modules and templates based on their personas. Then, we built the rest of the website components around that.
5-WIREFRAMES
Wireframes can be one extra step in the beginning of any web design project that can save a significant amount of time, rework, and costs later on. Besides improving productivity, it also improves the final result of each single webpage, and the website as a whole. A wireframe is a “template” of simple lines, shapes, and labels that can be used to predefine a website’s layout before any of the design’s details are actually placed.
Based on the feedback we got during our meeting, I put together a series of wireframes from all the different breakpoints. This was done in a tool called UX Pin. These wireframes were then reviewed over the phone with the client with real-time collaboration and comments directly on the wireframes.
5-MOCKUPS & STYLEGUIDE
Mockups give viewers an idea of how the final product will appear, and the implementation of interactive elements like buttons and icons also hints at the function.
I came up with 20 mockups for various screen sizes followed by style guide done in Photoshop and Zeplin.
