Designing ASEAN Energy Center Website Experience
Prologue
ASEAN Centre for Energy (ACE) is an intergovernmental organization within the Association of Southeast Asian Nations’ (ASEAN) structure that represents the 10 ASEAN Member States’ (AMS) interests in the energy sector.
Serving its roles as data and knowledge hub for the ASEAN energy sector, ACE has been actively using website www.aseanenergy.org as a platform to share its activities and publications.
On this occasion, we helped ACE to redesign the website by presenting information that was more friendly and easier to use.
Our Framework
To get a better understanding of the problem and generate the best solution, we will following The Design Thinking framework for this project.
Why Design Thinking?
It is indeed way more easy to jump into the designing phase, but most likely, the result would be just satisfying the designer’s taste and might not be able to solve the problem.
With this package of the framework, we can gain benefits such as:
- Better collaboration between the stakeholders, the consultant, and the developers.
- Discover real problems that the user has
- A better understanding of the stakeholder’s visions
- Generate a better and validated solution that aligns stakeholder’s vision and user needs.
This is how we implement the Design Thinking framework to solve this revamp project.
UNDERSTAND
With a clear and on-point understanding of the problem, we will able to discover the opportunities and then generate the long-last solution. Understand phase has five steps:
Stakeholder Interview
This is the step where our team digs deeper into the needs of the project. Discovering insights from the client’s perspective. The time needed: 2–3 hours of discussion.
Survey
To compare with the client’s perspective, we surveyed to get another view from ACE website users, such as:
- How often users visit the ACE website?
- For what purposes users visit the ACE website?
- How are users overall satisfaction in using the site?
- What problems do users often encounter when using the ACE website?
Based on the survey, the data obtained are:
- 18 people say take some effort to access specific information when using the ACE website
- 15 people say ACE has poor design and navigation through the site.
- Almost all visitors look for articles/publications on the ACE website to find the latest information about the regional energy sector. Also, some visitors look for job vacancies
Research Workshop with the website’s users
Next, to ensure the website usability an evaluation/research is needed by involving the user directly to find out what is needed and desired by the user of a product.
Therefore we then conduct Usability Testing with 7 participants that represent the ACE website’s visitors or users. Participant data obtained from the survey results. With these activities, We have discovered the gaps and the reason behind why the user fails to meet the stakeholders’ expectations.
The results we get are:
- Users confused about where to focus as there is so much content on the Homepage.
- News, Publications, Reports & AEDS are the most clicked links during testing. But now, visitors need to click too many links to reach the content.
- The Sidebar was too narrow. We found that the body text also low and not friendly for senior citizens.
Card Sorting Test
In the same workshop, after the participants tried out the existing website, we conducted a Card Sorting Test. The process is as follows, we provide them with the cards containing the navigation menu of the site and ask them how would they arrange it based on their likings.
With this test, we will discover the pattern and the mindset of these participants, and the results will help us design better Information Architecture.
In this section, we used the online card sorting application Optimal sort, This web service provides a useful result analysis feature making it easier for us to immediately find out the results of the analysis after card sorting.
Here is the card sorting result for the Homepage:
Competitive Research
Following the stakeholder’s suggestion to review how the competitors or the other similar institutions design their websites, we discovered what unique are and what right elements that we can use as inspiration.
Data Synthesis
This is one of the essential parts of the Understand phase. In this step, we will extract all the data we have (the results of usability testing, card sorting, and competitive research) and connecting the dots to uncover the root cause. Understanding insights from both perspectives.
IDEATION
Once we have a clear understanding of the problems and gained insights. We move to the solution or ideation phase. We are going through these steps:
Wireframing & Interaction Design
In this step, the Giza team is going to build a low fidelity prototype. Applying The Crazy 8 Method
Collaborative Creation with stakeholders
This is a light workshop performed by Giza and the ACE Team. Together we generate the solution concepts in a day or two. If not, the Giza team alone will suffice with the review from the stakeholders.
We collaborate using Figma tools; these tools help us, solve problems, or exchange ideas quickly and directly on one page.
High Fidelity UI Design.
In this step, the Giza team will build the more polished, high-fidelity User Interface Design following the ASEAN brand and design guidelines.
VALIDATION
Next, we validate the website using the usability testing method again, and the technique is designed to help teams identify the parts of an interface that most regularly frustrate and confuse people so they can be prioritized, fixed and re-tested before launch. We use usability testing because this method is useful to uncover flaws in our current design.
In this session, we recruited different participants to help us validate the redesigned website, this is done to get honest reactions from people who are not familiar with navigating on the ACE website.
If the results do not match the user’s requirements, we will sketch again. but if the result is appropriate, then we proceed to the next step.
WEB DEVELOPMENT
The next step is to development the application following a validated design.
Make sure there are no changes to the design, because that will take even more time, and we will never know when we will finish.
From the designs that have been made, we develop applications using WordPress. Also, we create applications in website mode and also make them mobile responsive.
When building our application, of course, there are some obstacles, especially on designs that are difficult to implement by developers, what we do is by communicating them for discussion, designers must have other planning designs.
After the application is made, we then migrate the data by integrating existing data from the old ACE website to the new ACE website.
Hey, Folks!
Giza Design Lab is an Indonesian design agency with Human-Centered Design approaches. We help companies to level up their product experiences to get more love from their users and customer. Want us to work on your design project? Send email to info@gizadesignlab.com, go check our website and Follow us on Instagram
