Design Portfolio
01 Research
ABC.net
Government website redesign
How can we develop a more user-friendly Responsive Web Design UI Style for the government agency navigation website (ABC.net)?
As a UI designer, my task was to redesign and update the ABC.net website by understanding users’ struggles. In a five-week period, I executed the design process on the right ->
INFORMATION ARCHITECTURE (IA) COMPONENTS
I have decided to rearrange the Homepage and Navigation bar that I believe would be more logical to readers. With annotation, I defined the location of the navigation elements on the homepage and interpreted the segments included in navigation menu on existing website.
ABC.net Homepage
Navigation Bar
I started off my research phase brainstorming with a group of peers. Together, we noted some key elements 'we' (as users) would want to see while browsing through a (Government) News Website.
In addition, specific to ABC.net, my goal was to understand what the existing users’ pain points was of the main components present on the site. In this way, I can better proceed to develop a more useful Responsive Web Design UI system.
DEFINING USER PATH
First, working in a group of three, we defined two major user paths being:
Our group spoke to 9 site visitors via 1-1 interviews by observing them perform the above two tasks. The focus group include frequent users and first-time site browsers.
We summarized our user testing results into a Feature Prioritization Matrix in order to identify the priority of existing or missing features, in terms of Stakeholders and Usability aspects.
FEATURE PRIORITIZATION 2 X 2 MATRIX
.png)
Regrouping the navigation segments appear to be the priority for both parties
Below are key features we decided to focus on for better usability:
My Regrouped Components
CARD SORTING & REGROUPING
Given the categories included in the existing menu, it is clear to me how each segments are differed and grouped in each tab.
Having the navigation cards laid out in front of me, it is easier for me to sort and rearrange the elements in a simplified structure to avoid complexity.
Primary Navigation Sorting
Secondary Navigation Sorting
03 Prototypes
LOW-FI WIREFRAME
I condensed the existing navigation system into less tabs to lessen the time required for users to browse through the nav bar to find their targeted segment.
L.A.T.C.H. ANALYSIS
Furthermore, I conducted a L.A.T.C.H Analysis (Location, Alphabetic, Time, Category and Hierarchy) to ensure a well-organised layout is fitted to the navigation elements. Hence, completing the overall structure of the segments on the homepage.
STYLE GUIDE
MID-FID WIREFRAMES
FIVE-SECOND USER TESTING
Mobile A
Mobile B
Test 1: Mobile Interface
Test 2: Desktop Interface
Desktop A
Desktop B
04 Final Thoughts
By redesigning ABC.net website, I noticed the existing sense of attentiveness and formality. To refine such theme, I was able to apply IA analysing methods to breakdown the current layout so to simplify the structure of the user interfaces.
The reorganised navigation structure and regrouped categories has created a neater format of news presentation, reducing the time needed for readers to find their target topics and increase the site's overall usabilty.
