Select Page
Gadget-protect

Project Overview

Timeline: mid-2016 – 2017

Role: UI/UX designer (Team Project), User Research, Wireframing, Prototyping, UI design, and Interview with the stakeholders

Tools: Pen & paper, Figma, Adobe photoshop

Meralco Corporate Blog

I was responsible for creating Wireframe to Prototype, Workflow, UI design and build.  This web blog has been used in Meralco as the source of information, daily tips, and alternative communication tools for the people. 

 

Challenges

Overhauled the Web site to optimize the user experience. The newly launched site catapulted visit-to-lead and visit-to-order ratios while shrinking the page-abandonment rate by 21%.

The Task

Create a UI for Meralco corporate blog with this specification we gather from the user and the stakeholders

  • Improve user experience through making adjustments in the design. We need to redesign the Home Page and Category Page.
  • improve the footer design for internal interlinking
  • We use different lifestyle categories here such as Business and Pop Culture, depends on our target market. These are usually popular articles for Filipinos and we can share these through Facebook and Twitter to increase more traffic and awareness.

 

The Process

The Team plunged into the product as a UX designer conducted an interview with stakeholders. We study the current blog they use, how this blog can interact with the user. what are the special feature might need to improve the new design.

We run a heuristic evaluation to identify the usability issue in the user interface we created so that we are aligned on the process that Meralco has.

We also have created a detailed schemed of all screens, popups, and notifications. this will help us to work more flexibly and quickly on the apps, improved the flow and the service.

We created a fully clickable prototype for the user as a requirement before we send it off to the development.

We run the design sprint. we invited people from the different departments with given demographics. again from ideation to wireframing, and prototyping. We conducted a demo of the prototype we created. we invited those employees to try the prototype.

 

The following are the suggestion and tools we give during the discussion on how to gain much attention to the user:

Search Engine Optimization

We will need to provide an end-to-end search engine optimization process for the Meralco blog. This includes Google rankings, keyword research, meta tag optimization, and content optimization.

Social Media Presence

For the social marketing tools, we will employ the best design and practices for the current Facebook and other social media preference. We will also need to create, setup, and maintain the corporate accounts for it.

All these sharing and interlinking will create a mini-network of the site and its properties thus creating more awareness, traffic generation, and most importantly, credibility in Google’s eyes. This should optimize the site’s social signals.

For Content

    1. Create short descriptions on all category pages that will coincide with the metadata.
    2. Fill up a blog with content at least once a week.
    3. list of post needed on the blog (recommendation only)
      • The Personal Spotlight Post
      • The Media Post
      • The News Post
      • The Cheat Sheet Post(Instructional post)

Thought Leadership Publication

Position the key people in the company as influencers and thought leaders in the industry. This will provide good reputation for both the company and its employees, as well as boosting views from potential clients and candidates.

Analytics and Reporting

We will need reporting and analytics services to measure each online marketing campaign in the different channels.

 

UX Design

Based on research I had a clear idea about the product. To make this process more productive, I made a low-fi wireframe layout. I use Figma here to create a wireframe to make a simple and fast way to understand the flow also help the clients get a clear understanding of the layout structure. 

Sketching

We did a low-fidelity design to consolidate our ideas and make a visual presentation of it before we proceed with the prototype.

Prototyping

I use Figma here to create a wireframe to make a simple and fast way to understand the flow also help the clients get a clear understanding of the layout structure. 

User testing

We run the design sprint. we invited people from the different departments with given demographics. again from ideation to wireframing, and prototyping. We conducted a demo of the prototype we created. we invited those employees to try the prototype.

Final Say

The newly launched site catapulted visit-to-lead and visit-to-order ratios while shrinking the page-abandonment rate down by 21%.