A passionate frontend developer currently studying Master of Arts in Digital Ideation at Lucerne University of Applied Sciences and Arts with a keen interest in transitioning into the world of UI/UX design. With a foundation in coding and natural inclination towards creating intuitive user interfaces, I have embarked on a journey to combine my technical skills with a focus on user experience design.
I relocated to Switzerland from India in 2023. With a bachelor’s degree in Information Technology and gaining an experience of 3.5 years in Frontend development, my goal is to advance my career from development to UX design.
Hi there,
I’m Alina
PRoject brief
business research
website navigation
lofi wireflow
accessibility
ui kit
hifi prototypeS
Usability testing
CONCLUSION
DESIGN
HANDOVER & QA
Design Process
Team structure
Background
My Responsibilities
As a systems engineer working on frontend development, I was responsible for developing the website using React JS and Material UI in close collaboration with the UI/UX designer. Together with the UI/UX designer, I defined content categories and pathways for users to access detailed stakeholder profiles, news updates, and relationship visualizations.
My task was to develop the design created by the UI/UX designer using coding and present it directly to the client. The client would then suggest changes(if any) in the UI/UX design directly to me and I would update it accordngly.
I worked as part of a team of a UI/UX designer, frontend & backend developers, a team lead & a project manager. I was mainly reporting to the team lead & occasionally to the project manager.
A recap of the project (AIA App) that I had worked in during my time as a Systems Engineer at Tata Consultancy Services (TCS).
Project Brief
I started by understanding the project requirements.
Business Research
Tata Consultancy Services client, a multinational pharmaceutical and biotechnology company, requires an internal application, the AIA App, to facilitate its employees in accessing comprehensive information about politicians (stakeholders) in a Latin American country. The challenge lies in providing the client’s employees with a user-friendly platform that efficiently presents detailed personal and professional profiles of stakeholders, along with relevant news updates and interconnections between stakeholders. Additionally, the application needs to incorporate features enabling users to view the latest tweets and YouTube videos of these stakeholders. Thus, the primary objective is to design and develop an intuitive and efficient UI/UX solution tailored to meet the internal information needs of the client’s employees.
business goal
PROBLEM?
SOLUTION
GOAL
FEATURES
I created a user navigation path to show how the user journey will be.
Website Navigation
Login
AIA App
Home
News Carousel
News List
Keyword Search
Last Viewed Pages
Interactive Searchbar
Interactive Searchbar
Keyword Search
News List Pop-Up
Redirect Page To Social Media Post
Redirect Page To Social Media Post
Favourites Folder
Terms & Condition Information
Favourite News
News Information
Favourite Agenda
Favourite Social Media
Favourite News List
Favourite Agenda List
Favourite Social Media List
Map
Agenda List
Keyword Search Pop-Up
Keyword Search Pop-Up 2
News Carousel Pop-Up
News List Pop-Up
Stakeholders
Agenda
Map Of Influence
Social Media
Favourites
News Information
News Information
Keyword Related News List
Page Navigation
Stakeholder Information
Stakeholder Connection Display
Social Media List
Stakeholder Connection Details Pop-Up
Selected News Information
Terms & Conditions
This is the simpler version of the Hifi Prototypes showing the different pages and flow of the website in AIA App.
LoFi Wireflow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ddgo eiusmod tempor incididunt ut labore et dolore magna aldfsiqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborihhs nisi ut aliquip ex ea commodo consequat. Duis aute irure doldor in reprehenderit in voluptate velit esse cillum dolore eu fugiat ndfdulla pariatur. Excepteur sint occaecat cupidatat non proident, sdunt in culpa qui officia deserunt mollit anim id est laborum. Lorem idpsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
News Image
News Heading
Author Name of Published News
News Published Date & Time
News Description
Stakeholder 1 & Stakeholder 2
Stakeholder 1 & 2 Connection Information
Keyword Pop-Up
News List Information
News List Information
News List Information
News Image
News Heading
Author Name of Published News
News Published Date & Time
News Description
Favourite Folder
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Favourite List Item Information
Tab 7
Sort Button
Sort Button
Terms & Conditions Content
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 7
Favourite Folder
Favourite Folder
Favourite Folder
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 6
Type Keyword
Social Media Information
Social Media Information
Social Media Information
Social Media Information
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 5
Enter Stakeholder Name
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 4
Agenda Information
Agenda Information
Agenda Information
Agenda Information
Agenda Information
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 3
Selected Stakeholder Name, State & Political Party Name
Selected Stakeholder Photo
Selected Stakeholder Information
Enter Stakeholder Name
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
Tab 2
Search Button
Type Keyword
Keyword Search Section
Page 1
Page 2
Page 3
Page 4
Last Viewed Pages Section
News List Section
Logo & App Name
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Username
News Information
News Information
News Information
News Image & Information
Tab 1
Username Field
Password Field
Login Button
Logo & App Name
I wanted to ensure the design follows the required standards of my client and works for all of it’s employees.
Accessibility
I’m working on the website to fully comply with industry’s Web Content Accessibility Guidelines.
Text size is legible & can be easily changed
Content is not cropped
Optimal colour contrast ratio
System is accessible on different of screen sizes
The client was very insistent on following the color palette of their brand company and using the agency brand logos when displaying the articles posted by the corresponding agency.
WCAG validation
Poppins
FONT FAMILY
ICONS
Home
Stakeholder
Map Of Influence
Social Media
Favourites
About
Scroll-To-Top
Search
Logout
Back
Agenda
COLOR PALETTE
#10384F
#10384F(75%)
#10384F(66%)
#10384F(50%)
#00BCFF
#89D329
#FFFFFF
#000000
This includes the color palette, icons, and font family that have been used for the project.
UI Kit
We did a usability testing among the team itself to see if there are any constraints and how we can make the website more user friendly.
Usability Testing
CONSTRAINTS
SOLUTIONS
A Scroll to top button was added to the end of all the pages where a lot of content is present in the website.
A Search field to enter a keyword was added to the homepage which opens a pop-up with a list of all the news articles related to that keyword which when clicked on further opens up another pop-up with the information related to the selected article.
A star icon with a feature to add/remove the items in the list were added to news, agenda and social media list items.
A sorting button was added to news, agendas and social media folders in the favourites page which helps the user to sort the list from A - Z or Z – A.
The user should be able to move easily to the top of the page when the page has a long list of contents.
The user should be able to save the most useful or important list item from news, agenda and social media.
The user should be able to search for a news article related to a particular keyword.
The user should be able to identify a particular favourite item when the list inside the favourite folders are too long.
This is the final prototype of the AIA App website.
HiFi Protoypes
LOGIN
HOME
STAKEHOLDERS
AGENDA
MAP of influence
social media
favourites
terms & conditions
favourite news
favourite agenda
favourite social media
news carousel pop-up
keyword search pop-up
STAKEHOLDER CONNECTION DETAILS POP-UP
KEYWORD SEARCH POP-UP 2
The final design was shared with the development team.
Design Handover & QA
Working together
The final prototype was handed over to the development team to begin implementing them in code. Assets like the icons, wireframes and style guides were also provided.
Conclusion
The AIA App offers significant value to the client’s and its employees by providing a centralised platform to access crucial information about politicians (stakeholders) in a Latin American country.. Here's how the solution benefits the company and its employees:
Streamlined Information Access: Efficiently access comprehensive stakeholder profiles for marketing teams.
Strategic Insights: Empower employees to identify potential partnerships and collaborations easily.
Efficient Communication: Visualize stakeholder connections for improved team coordination and alignment.