myBCA News
myBCA News
The Problem
The Problem
myBCA portal is a self service tool for employee to access all account information they have and collaborate with other departments using one single user ID.
myBCA portal is a self service tool for employee to access all account information they have and collaborate with other departments using one single user ID.
The news section was developed due to employee's frustrations:
“The portal looks very serious....it screams work, work, and work”
The news section was developed due to employee's frustrations:
“The portal looks very serious....it screams work, work, and work”
The Goal
The Goal
Redesigning the newsfeed to improve content navigation and user experience
Redesigning the newsfeed to improve content navigation and user experience
Research
Research
Survey and Observation
Survey and Observation
I began by reviewing an internal survey to evaluate the portal’s efficiency. One key finding was that 10 participants cited “too many categories in the News section,” suggesting issues with content overload and navigation.
I began by reviewing an internal survey to evaluate the portal’s efficiency. One key finding was that 10 participants cited “too many categories in the News section,” suggesting issues with content overload and navigation.
Web Audit
Web Audit
I then audited the existing portal to test whether poor navigation and content overload were impacting user behavior. This includes analyzing user session traffic and reviewing bounce rate across key sections.
I then audited the existing portal to test whether poor navigation and content overload were impacting user behavior. This includes analyzing user session traffic and reviewing bounce rate across key sections.
Here's what I found:
Here's what I found:
⭐️
Excessive hyperlinks led to unintentional page
Excessive hyperlinks led to unintentional page
⭐️
Poor search engine (no filters and keyword mismatch)
Poor search engine (no filters and keyword mismatch)
⭐️
Many unused categories
Many unused categories
⭐️
Heavy data management on the admin side
Heavy data management on the admin side
Prioritizing Through Interview
Prioritizing Through Interview
I talked to 10 employees who regularly use the newsfeed and mapped feedback into an impact-effort matrix to prioritize solutions based on business value within the limited scope of my internship.
I talked to 10 employees who regularly use the newsfeed and mapped feedback into an impact-effort matrix to prioritize solutions based on business value within the limited scope of my internship.
Strategy
Strategy
Once the core issues were prioritized, I started with a revised sitemap to better reflect user workflows and streamline navigation.
Once the core issues were prioritized, I started with a revised sitemap to better reflect user workflows and streamline navigation.
Rebuilding the Information Architecture
Rebuilding the Information Architecture
I began by auditing outdated content, removing broken links, and consolidating redundant categories.
I then restructured the information architecture to support clearer paths to content and a more intuitive user experience.
I began by auditing outdated content, removing broken links, and consolidating redundant categories.
I then restructured the information architecture to support clearer paths to content and a more intuitive user experience.
Visualizing Through Wireframe
Visualizing Through Wireframe
I created some high-fidelity wireframes to get feedback on the overall structure of the newsfeed. This process included setting up a standardized visual hierarchy and layout for future features.
I created some high-fidelity wireframes to get feedback on the overall structure of the newsfeed. This process included setting up a standardized visual hierarchy and layout for future features.
Modular Grid Layout
Modular Grid Layout
By combining card-based modules and an F-pattern-aware structure, I made the interface more digestible while supporting editorial-style storytelling
By combining card-based modules and an F-pattern-aware structure, I made the interface more digestible while supporting editorial-style storytelling
By combining card-based modules and an F-pattern-aware structure, I made the interface more digestible while supporting editorial-style storytelling
Optimized Search Model
Optimized Search Model
By implementing a categorized search result model with filters, users can quickly locate relevant content without feeling overwhelmed by dense pages.
By implementing a categorized search result model with filters, users can quickly locate relevant content without feeling overwhelmed by dense pages.
By implementing a categorized search result model with filters, users can quickly locate relevant content without feeling overwhelmed by dense pages.
Smart Section Filtering
Smart Section Filtering
By implementing multi-select category filters using horizontally scrollable buttons, it allows quick content refinement without affecting the full page.
By implementing multi-select category filters using horizontally scrollable buttons, it allows quick content refinement without affecting the full page.
By implementing multi-select category filters using horizontally scrollable buttons, it allows quick content refinement without affecting the full page.
Gathering Feedbacks Through User Testing
Gathering Feedbacks Through User Testing
I tested the prototypes in four key scenarios with five users to gather feedback on areas for improvement.
I conducted usability testing with 5 users of the newsfeed, focusing on 4 key scenarios to evaluate each feature.
I conducted usability testing with 5 users of the newsfeed, focusing on 4 key scenarios to evaluate each feature.
Success Rate
Success Rate
Based on 5 participants
Based on 5 participants
Scenario 1
Scenario 1
Navigating to newsfeed from portal
Scenario 1
Navigating to newsfeed
from portal
Scenario 2
Scenario 2
Searching Keywords
Scenario 2
Searching Keywords
Scenario 3
Scenario 3
Finding promos
Scenario 3
Finding promos
Scenario 4
Scenario 4
Selecting Categories
Scenario 4
Selecting Categories
Maximizing the Experience Through Iterations
Maximizing the Experience Through Iterations
Most participants found the process of accessing the newsfeed to be confusing.
To fix this, I redesigned the section to be clearer, easier to spot, and visually distinct, giving it its own identity within the portal.
Most participants found the process of accessing the newsfeed to be confusing.
To fix this, I redesigned the section to be clearer, easier to spot, and visually distinct, giving it its own identity within the portal.
All users successfully identified how to access the new newsfeed
Old Design
Old Design
New Design
New Design
Final Design
Final Design
The final design addressed the previous pain points, and after presenting it to the lead designer and project director, I secured full stakeholder approval to move forward.
The final design addressed the previous pain points, and after presenting it to the lead designer and project director, I secured full stakeholder approval to move forward.
Starting Page
Starting Page
Previously, the newsfeed was embedded within the main portal, which made data management frustrating for the admins.
By giving the newsfeed its own entry point and a structured space, employees can access updates instantly, and admins can finally manage content without the clutter.
Previously, the newsfeed was embedded within the main portal, which made data management frustrating for the admins.
By giving the newsfeed its own entry point and a structured space, employees can access updates instantly, and admins can finally manage content without the clutter.
From portal to newsfeed
From portal to newsfeed
Hello, I’m your
new newspaper
From portal to newsfeed
From portal to newsfeed
Hello, I’m your
new newspaper
Layout
Layout
I redesigned the experience using card-based modules and an F-pattern-aware layout, helping users scan updates while supporting more visual, editorial storytelling.
I redesigned the experience using card-based modules and an F-pattern-aware layout, helping users scan updates while supporting more visual, editorial storytelling.
Search and Recommendations
Search and Recommendations
The old search function was cluttered and slow. I utilize filters and smart recommendations to allow finding relevant articles faster and easier.
The old search function was cluttered and slow. I utilize filters and smart recommendations to allow finding relevant articles faster and easier.
Promo Page
Promo Page
The new promo page uses a card-based layout with category tags, making it easy to scan trending deals at a glance and eliminating the need for extra clicks to see key information.
The new promo page uses a card-based layout with category tags, making it easy to scan trending deals at a glance and eliminating the need for extra clicks to see key information.
Impact
Impact
Before development began, the final design was approved by the lead designer and project director.
At the end, I ended up with:
Before development began, the final design was approved by the lead designer and project director.
At the end, I ended up with:
⭐️
⭐️
A restructured information architecture that supports information-heavy sites
A restructured information architecture that supports information-heavy sites
⭐️
⭐️
A dedicated and structured space for easier content management on admins side
A dedicated and structured space for easier content management on admins side
⭐️
⭐️
A modular layout that improved readability and content navigation
A modular layout that improved readability and content navigation
⭐️
⭐️
40% decrease in task completion time (Such as finding relevant articles).
40% decrease in task completion time (Such as finding relevant articles).
What I Learned
What I Learned
🧠 Being proactive
🧠 Being proactive
🧠 Being proactive
As my first design internship in a corporate setting, I learned to stay proactive through slow feedback loops by setting self-imposed deadlines, moving forward with partial data, and validating ideas through internal usability testing.
As my first design internship in a corporate setting, I learned to stay proactive through slow feedback loops by setting self-imposed deadlines, moving forward with partial data, and validating ideas through internal usability testing.
⏱️ Balancing autonomy and collaboration
⏱️ Balancing autonomy and collaboration
⏱️ Balancing autonomy and collaboration
This experience shaped how I balance autonomy with collaboration, and it deepened my appreciation for adaptability as a core part of the design process.
This experience shaped how I balance autonomy with collaboration, and it deepened my appreciation for adaptability as a core part of the design process.
This experience shaped how I balance autonomy with collaboration, and it deepened my appreciation for adaptability as a core part of the design process.
Storytelling
Designing with logic, motivated by detail, building with heart.
Storytelling
Designing with logic, motivated by detail, building with heart.