Malaysia Energy Information Hub Portal (MEIH) is a portal where you can have all the information about energy. The client, Suruhanjaya Tenaga wants to revamp their current MEIH. So, we came out with MEIH 2.0 to be proposed to the client to replace the old MEIH portal.
Project
User
Pain Point
- Less interaction from public.
- Information displayed are unclear.
- Difficult to obtained information needed.
- Less visually appealing user interface.
What I did
- User Interview
- Low Fidelity Wireframe
- Sitemap
- High Fidelity Design
- Prototype
Research
Current State Evaluation
I started the process by getting to know the state of the existing website and evaluating the website layout and content to discover on which part that can be improved. Below are the some of the problems I found through heuristic evaluation:
Keep it short and straightforward
Lengthy descriptions could overwhelms the readers as it is difficult for them to find the information needed.
Avoid displaying long lists
Websites that displaying long list especially in the Homepage could make visitors to lose interest in exploring the website.
Poor UI
Having a visually appealing website is important to attract visitors as it will the website more usable and intuitive.
User Interviews
Interviews Synopsis
Interviewed Suruhanjaya Tenaga to get some insights of how do they want their websites to be. They mentioned to have a new portal with better visual and user experience. They have shown a few examples of how they imagine it to be.
“We want to have a more interactive website”
” To display a clearer information that can be captured in a glance”
” Create something that is similar to this (existing website) or something visually better”
Competitive Analysis
Next, I wanted to explore more the functionality that are offered by the websites that are similar to this. I compared a few of important components of UI in general to discover on which part MEIH website could be improve.
Ideation
Site Map
Based on the research, I brainstormed, compiled and organized the necessary content and functionality. The current website was heavy in redundant and obsolete information that didn’t provide much substance. I decided to include the most important information in the new version so that it will be clean and easily to navigate.
Low Fidelity Design
After created the structure of the website, I attempted to create the first set of lo-fi wireframes to run some preliminary testing with the clients. Thhis allowed me to gather some feedback and to save time later on in the process before I started to design high-fidelity prototype.
From the first round of testing I decided to make a few iteration that included:
- To put the news/highlights section in carousel so that it would give space to include others
- Include highlights of publications and infographic section in homepage.
- Summaries of important information in charts and cards.
UI Kit
Color Palette
Fonts
Inter Semi Bold 48 This is a Header
Inter Semi Bold 32 This is a Sub Header
Inter Medium 20 This is a Body and Button text
Buttons
Navigation
General
Prototype & Test
Usability Testing
After I have done the prototype, we have conducted a usability testing to see whether this second version have improved from the first one.
Below are the outcomes from the testing:
Overall rating:
Comparison
Homepage
- I have added more graphic & info inside the homepage and divided it into sections.
- Add view more button to see more of the content instead of displaying all in one page.
About Us
- Only display important information and separated it in boxes for clearer view.
Statistics
- Created an expanded navigation for the sub page for Statistics to reduce the number of pages users need to click.
- Changed the filter from checkbox to dropdown list to save space and make it more neat.
- Added chart and table button to give options to users for them to choose whether to see only charts or table or even both.
- Instead of displaying all in table, I changed it to a scrollable table so that users can focus on each things.
Publications
- Created a table of list published reports with published date and download icon.
- For defaults, only display 10 reports per page, however users can change that by filtering using dropdown on below page.
- Used pagination to move to next page to view more items.
- Added search bar for users to search a specific items.
Contact Us
- Changed page name from Helpdesk to Contact us.