Declutter information overload through translating information with visuals and filing information with drop-down menus.
Declutter information overload through translating information with visuals and filing information with drop-down menus.
Declutter information overload through translating information with visuals and filing information with drop-down menus.
Bridge Burma: Career Page
Bridge Burma:
Career Page
Bridge Burma:
Career Page
Jul 2021 - Dec 2021
Jul 2021 - Dec 2021
Type: Career Page Redesign, UI Internship Project, Solo Project
Type: Career Page Redesign, UI Internship Project, Solo Project
Roles: UI Designer, Researcher
Roles: UI Designer, Researcher
Tools: Figma
Tools: Figma
Target Audience: Potential internship applicants
Target Audience: Potential internship applicants
Time limit: 3 months
Time limit: 3 months
Team size: solo
Team size: solo
Project Summary:
This is a solo project I did during my UI internship for Bridge Burma in which I was tasked to rework the company’s career page due to the career page lacking visuals that may attract potential interns. Bridge Burma is a passion project created by a group of Burmese college students studying abroad who wanted to give back to their country, Myanmar, by offering mentorship programs and educational support for younger generations.
Project Summary:
This is a solo project I did during my UI internship for Bridge Burma in which I was tasked to rework the company’s career page due to the career page lacking visuals that may attract potential interns. Bridge Burma is a passion project created by a group of Burmese college students studying abroad who wanted to give back to their country, Myanmar, by offering mentorship programs and educational support for younger generations.
Problem
Problem
The career page of Bridge Burma lacks visual hierarchy and presents an overwhelming amount of information, making it difficult for potential interns to navigate, absorb key details, and apply efficiently.
The career page of Bridge Burma lacks visual hierarchy and presents an overwhelming amount of information, making it difficult for potential interns to navigate, absorb key details, and apply efficiently.
Value Proposition
Value Proposition
My solution to the problem was decluttering the information overload on the Career Page by using more subpages/dropdown menus and icons.
By implementing these changes, the page will achieve a more visually organized layout, enabling users to navigate more effortlessly and absorb information more effectively.
My solution to the problem was decluttering the information overload on the Career Page by using more subpages/dropdown menus and icons.
By implementing these changes, the page will achieve a more visually organized layout, enabling users to navigate more effortlessly and absorb information more effectively.
Phases
Phases
Research & Discovery
Research & Discovery
UI Research:
The career page of popular websites, such as Airbnb and SquareSpace, was researched and referenced for the redesign of the Bridge Burma career page alongside my mentor's guidance throughout the project.
UI Research:
The career page of popular websites, such as Airbnb and SquareSpace, was researched and referenced for the redesign of the Bridge Burma career page alongside my mentor's guidance throughout the project.
UI Research:
The career page of popular websites, such as Airbnb and SquareSpace, was researched and referenced for the redesign of the Bridge Burma career page alongside my mentor's guidance throughout the project.
Key Findings:
Use of drop-down menus and subpages to reduce information overload.
Use of icons and visuals in substitute of text to engage readers.
Key Findings:
Use of drop-down menus and subpages to reduce information overload.
Use of icons and visuals in substitute of text to engage readers.
User Flow
User Flow
As this project was a redesign of a single page, the userflow was simple and short.
As this project was a redesign of a single page, the userflow was simple and short.
Wireframes & Low-Fidelity Design
Wireframes & Low-Fidelity Design
A low fidelity wireframe was created on Figma to garner feedback from my mentor and the Dev team.
A low fidelity wireframe was created on Figma to garner feedback from my mentor and the Dev team.
A low fidelity wireframe was created on Figma to garner feedback from my mentor and the Dev team.
Design Rationale:
Design layout was inspired by the research I did on popular websites’ career pages
Visuals and icons to engage readers more
Design Rationale:
Design layout was inspired by the research I did on popular websites’ career pages
Visuals and icons to engage readers more
Design Rationale:
Design layout was inspired by the research I did on popular websites’ career pages
Visuals and icons to engage readers more
High-fidelity Frames
High-fidelity Frames
Desktop Prototype
Desktop Prototype
Mobile Prototype
Mobile Prototype
Desktop Walkthrough
Desktop Walkthrough
Mobile Walkthrough
Mobile Walkthrough
Before and After
Before and After
Before
Before
After
After
Reflection & Takeaways
Reflection & Takeaways
As this project was my very first UX/UI project at my first UI internship, it was a great learning experience for all various aspects of the field. Major learning includes:
Workflow of a UX/UI project
Communication between different teams, such as the design team and the tech development team, of the company
Experience using Figma as a beginner
The key takeaway I received from this project would be my skill in familiarizing myself with and going through a proper design workflow of researching, wireframing, and prototyping.
Biggest Challenges & The Solution
Biggest Challenges & The Solution
Biggest Challenge: explaining my design rationale and process to the tech development team that does not specialize in design.
Solution: consulted with my design mentor before my presentation to the tech team and learned some development skills in HTML and CSS.
Biggest Challenge: explaining my design rationale and process to the tech development team that does not specialize in design.
Solution: consulted with my design mentor before my presentation to the tech team and learned some development skills in HTML and CSS.
Next Steps & Future Improvements
Next Steps & Future Improvements
Streamline my workflow of research, wireframe, and prototype.
Expand my knowledge in simple web development such as HTML and CSS to understand developer’s point of views towards my designs.
Streamline my workflow of research, wireframe, and prototype.
Expand my knowledge in simple web development such as HTML and CSS to understand developer’s point of views towards my designs.