Interface Design for the Browser Extension

The Process

Identifying Target Audience and Needs

The goal was to identify and understand the target audience and their needs to ensure the design addresses their specific requirements. This was done by examining who the potential users might be, as well as their reasons for using the service and how they would use it. The analysis focused on specific questions to gain a more comprehensive understanding of what the application is and what it could potentially be.

1. Who is the user, and what are their specific characteristics and traits?
2. What underlying needs are met when users utilize the service, and what benefits does it generate?
3. What motivates users to start and continue using the service?

I used the “Why?” technique to delve deeper into the underlying needs of the users, ensuring we did not stop at surface-level needs but understood the fundamental motivations.

Outcome: Four key user types have been identified to ensure the service functions effectively and provides societal benefits. 

Education Seekers

This group includes two sub-types:

Newly interested seekers: Individuals who haven’t previously attended higher education. They are curious, open to opportunities, possibly uncertain but eager to continue their studies after high school. They stay updated on trends, follow friends, and dream of future jobs. They are attracted to popular programs and highly-rated schools.

Experienced seekers: Individuals with market experience aiming to broaden their knowledge and skills or change careers. They are goal-oriented, meticulous, and determined, with well-defined competency development objectives. They like to compare different educational options.

Needs Addressed by the Browser Extension:

• General information and course/program overviews
• Admission chances and influencing factors
• Trackable information for quick access
• Comparison of educational programs
• Personal experiences and reviews
• Information on educational quality, competency, and employability
• Career prospects post-study
• Market trends and insights

Current Students

This group consists of students currently enrolled in educational programs. They are enthusiastic yet slightly stressed, seeking internships and jobs, or companies for their thesis work. They aim to connect with potential employers during their studies to secure references and facilitate a smooth transition into the workforce.

Needs Addressed by the Browser Extension:

• Job suggestions for part-time, thesis work, and internships
• Saving and collecting job information
• Establishing contacts with employers
• Messaging their contacts
• LinkedIn integration
• Minimizing search effort with filters
• Quick access to information
• Updates on market conditions

Newly Graduated

Recent graduates who are eager, innovative, or possibly disillusioned, ready to share their experiences. These individuals provide insights into the types of jobs they secured, the speed of employment, their roles, and the relevance of their studies. They typically join EduSelect while seeking or during their studies and continue for one to three years post-graduation, participating in surveys and sharing evaluations.

Needs Addressed by the Browser Extension:

• Sharing experiences and job details post-graduation
• Participating in surveys to provide feedback
• Influence and reflect real-world conditions to aid education seekers
• See statistics and rankings.

Employers

Employers include self-employed individuals or employees within companies or organizations. These users are meticulous, busy professionals with limited free time. They seek qualified workers, need part-time staff, or are open to hosting students for thesis projects.

Needs Addressed by the Browser Extension:

• Advertising job opportunities
• Creating job postings
• Accessing a list of educated and creative individuals
• Contacting candidates, receiving messages, and reviewing CVs

Understanding User Actions – Function and Activity

I analyzed which functions the browser extension should have in relation to users’ needs, determining if the needs are met directly or indirectly. I identified particularly critical functions for EduSelect’s operation and discussed why they are important in the workshop for every target group.

Questions Addressed:

1. What functionalities should the service provide?
2. What outcomes should users be able to achieve?

The list of essential functionality was defined as given below. This helped me in next step organizing content and designing navigation flow. 
• Register/create an account;
• Log in/log out;
• Select text;
• Save and collect information in the service: about educations, job offer, contacts;
• Remove information from the browzer extension;
• Compare educations;
• Fill in the valuation form and send it out;
• Write reviews;
• Send message in direct chat;
• Share information;
• Search;
• Filter;
• Change status.

Inspiration, Analysing Market

For my first browser extension design, I needed to gather inspiration and conduct research to understand what was already available in the market. I studied ten websites and three different browser extensions to get ideas for designing the user flow, login process, dashboard, program comparisons, rankings, and reviews for EduSelect. I discovered how browser extensions work and how platforms offer their features across different websites. After analysing the most effective features and content, I moved to the next stage of sketching ideas for the EduSelect interface.

Sketching Interfaces

I explored possible interface solutions throught sketching, iterated and refine design ideas. As my favorit tool and material in scketching is pen and paper, a quick and flexible technique, I created initial sketches of the service interface using those media. My focus was on: 

• Structure: try to think over clear and logical structure suitable for the intended target group.
• Interface Patterns that would be suitable to utilize.
• Primary functionalities.

Outcome: An iterative design process that leverages rapid sketching to explore and refine interface ideas, ensuring designs are user-focused and efficiently communicated.

Visual Design

I aimed to make the service practical, informative, and visually appealing with a modern aesthetic. To achieve this, I carefully worked on the visual design, including hierarchy, composition, colors, typography, and images to ensure readability. The larger font sizes positively impact readability, and I incorporated that into the design. Using the Adobe Color accessibility tool, I reviewed the contrast between the background and text colors to ensure good visibility.

Colors play a key role in attracting attention, establishing hierarchy, and enhancing aesthetics. Before creating the prototype in Axure, I developed a color theme and logo. I envisioned a minimalist design and used icons from the Noun Project as external graphics in Axure.

Interaction Flow and Prototype

Steps the user takes:

When registering, searching, saving and comparing programs as an education seeker.

When saving a job offer and a contact offering the job as a student.

User interface for target group 1: Education Seekers.

An education seeker is browsing online and comes across a newspaper article about a program in physical planning at Blekinge Institute of Technology.

When the user hovers over the name of the educational program, a tooltip appears showing three options: about the education, reviews, and merit.

By clicking on one of the options in the tooltip, a panel opens to the right side of the screen.

If the user is interested in the program, he/she can save it to their EduSelect profile by hovering over the EduSelect logo. A tooltip will appear when the user hovers over the logo (save to my EduSelect, open the dashboard and settings).

Saving the chosen program to My EduSelect. Target group 1: Education Seekers.

User interface for target group 2: Students seeking employment. Explore further by opening the prototype.

What could be done differently

Prioritization and Focus:

A more diversified prioritization could enhance focus on key areas and target audiences, leading to clearer prioritization for deeper development in essential parts.

Structure and Flow:
More thoughtful choices in structure, grouping, and flow that make content and functionality more intuitive.