Ex No: 1 DESIGNING A RESPONSIVE LAYOUT FOR AN

SOCIETAL APPLICATION
Date:

AIM

To design a responsive layout for a societal application in Figma.

PROCEDURE
1. First take the frame of iPhone 13-mini from the frames.
2. Insert a image as the background for the frame.
3. Create a rectangle above the image for adding other elements.
4. Add the status bar for the phone in the frame.
5. Create a textbox and add text in that and align accordingly.
6. Add a vector for giving the swipe up gesture.
7. Create another frame of the same phone.
8. Add the image and create a rectangle above it.
9. Similarly add the status bar.
10. Add the textbox.
11. Create another rectangle and add two textbox for adding email and password.
12. Have a login button.
13. In the vector add the interaction of swipe up into the next frame.
14. Add the interaction of swipe down for the second rectangle for coming to the first frame.
15. Now a responsive layout for a societal application is created.
OUTPUT

RESULT

The above design for a societal application is completed and it is responsive.

Ex No: 2 EXPLORING VARIOUS UI INTERACTION
PATTERN
Date:

AIM

To explore various UI interaction patterns using Figma.

PROCEDURE
1. Create a frame for iPhone-14 pro for the home page of travel app.
2. Add a rectangle to the frame of the same size and add a image above it.
3. Add the icon, status bar and text to the 1st frame.
4. Create the same frame for the next page for discovering new places.
5. Add the rectangle and place a image over it.
6. Add the icons and align it properly.
7. Create another frame for the next page of the blog about the place.
8. Place the icons, images and the text box accordingly.
9. Create another frame for checking the liked posts.
10. Place the icons, text, images accordingly.
11. In the prototype add interactions with each frame for exploring the interaction patterns.
OUTPUT
RESULT

The above design for a exploring various UI interaction patterns is completed.

Ex No: 3 DEVELOPING AN INTERFACE WITH PROPER
STYLE GUIDES
Date:

AIM

To develop an interface with proper UI style guides.

PROCEDURE
1. Create a frame with iPhone 13-mini.
2. Set the background color and add the icons.
3. Add the status bar and text in text box.
4. Create another frame.
5. Add the logos, text, images and set the color to it .
6. Create another frame.
7. Add the mic logo, text, images and set the color to it.
8. Add the status bar to all frames.
9. Check the alignment and align accordingly.
10. Add interactions between the frames.
OUTPUT

RESULT

The above design for developing an interface with proper UI style guides is completed.
Ex No: 4 DEVELOPING WIREFLOW DIAGRAM FOR AN
APPLICATION
Date:

AIM

To develop a wireflow diagram for a headphone store using Figma.

PROCEDURE
1. Create a frame.
2. Add the box and ellipse where the images can be given.
3. Add the text and create a rough button.
4. Create another frame.
5. Add icons and rectangles to create a layout for headphone store.
6. Add the headphone and the categories and popular headphones section.
7. Add the flow from first frame to second frame and back forth.
OUTPUT

RESULT

The above wireflow diagram for a headphone store using Figma is completed.
Ex No: 5 EXPLORING VARIOUS OPEN SOURCE
COLLABORATIVE INTERFACE PLATFORM
Date:

AIM

To explore various open source collaborative interface platforms for UI & UX design.

1. FIGMA
Figma is a free, online tool used for UI, UX, graphic design and wire framing.
It’s a web-based application, so it can work on any computer.
It is even offering some limited collaborative tools in their free tier.

2. SKETCH
Sketch is a vector-based platform with features, tailored specifically for designing UI and creating digital
assets.
It provides real-time collaboration.
It is only available for macOS.

3. PROTO.IO
Proto.io is an online prototyping tool that allows you to create interactive prototypes for web and mobile
applications.
While it's primarily focused on prototyping, it offers collaboration features to work with a team.
However, Proto.io is not open source, and it has both free and paid plans.

4. PENCIL PROJECT
Pencil Project is an open-source GUI prototyping tool that is available as a Firefox add-on and a
standalone desktop application.
It's more basic compared to some of the other tools mentioned and primarily used for creating diagrams
and basic UI mock ups.
Collaboration features are limited compared to dedicated design tools.

5. FLUID UI
Fluid UI is another online prototyping tool that's specifically designed for creating mobile app prototypes.
It offers collaboration features to work with a team, and it supports real-time collaboration.
However, it's not open source, and it has free and paid plans.
6. GRAVIT DESIGNER
Gravit Designer is a vector graphic design software available as both a web-based application and a
desktop application for Windows, macOS, Linux, and Chrome OS.
It offers a range of features for graphic design and vector-based illustration. Gravit Designer provides
limited collaboration features, mainly through cloud storage and sharing options.
It is not open source and has both free and paid plans.

7. INKSCAPE
Inkscape is an open-source vector graphics editor that's available for Windows, macOS, and Linux.
It's primarily designed for creating and editing vector graphics, making it suitable for tasks like logo
design and illustration.
Inkscape's collaboration features are limited, and real-time collaboration is not a native feature of the
software.

8. VECTR
Vectr is another vector graphic design tool that's available as both a web-based application and a desktop
application for Windows, macOS, Linux, and Chrome OS.
While it's not open source, Vectr is free to use and offers some basic collaboration features.
Users can share their designs with others for feedback and editing, but it may not offer advanced real-
time collaboration like some dedicated design tools.

RESULT

The above exploration of various open source collaborative interface platforms is completed.
Ex No: 6 HANDS ON DESIGN THIBKING PROCESS FOR A NEW
PRODUCT
Date:

AIM

To do a hands on design thinking for a music app.

Design Thinking Process

Design thinking is a methodology which provides a solution based approach to solving process. The
stages are:
1. Empathy
2. Define
3. Ideate
4. Prototype
5. Test

1. EMPATHY
Conduct user research through surveys, interviews, and observations to understand the needs and
preferences of music enthusiasts.
Identify common pain points such as difficulty in finding new music, managing playlists, and accessing
artist information.
Explore the devices and platforms users prefer for music consumption.

2. DEFINE
Based on your research, create a clear problem statement: "Music enthusiasts need an app that offers
effortless navigation of their music library, personalized playlists, and seamless music discovery to
enhance their overall music experience."
Define specific user needs, such as the desire for intuitive playback controls and comprehensive artist
information.

3. IDEATE
Brainstorm innovative features and concepts:
Personalized Music Discovery: Implement AI-driven algorithms to recommend songs and artists
based on user preferences and listening history.
 Dynamic Playlists: Allow users to create, edit, and reorder playlists effortlessly with drag-and-
drop functionality.
Artist Hub: Provide a dedicated section with artist biographies, discographies, upcoming tour
dates, and related artists.
Visually Engaging Interface: Design an aesthetically pleasing and user-friendly interface with
album artwork and interactive animations.

4. PROTOTYPE
Create wireframes and prototypes for the app, including:
A homepage with personalized music recommendations.
A user-friendly music library with sortable and filterable options.
A playlist management system with easy drag-and-drop functionality.
Artist pages with biographies, discographies, and tour information.
Intuitive playback controls with options for repeat, shuffle, and cross fade.

5. TEST
Conduct usability testing with a diverse group of music enthusiasts.
Observe how users interact with the app, gather feedback on the interface, functionality, and overall
experience.
Iteratively refine the prototype based on user feedback, addressing any usability issues or design
concerns.

RESULT

The above hands on for design thinking a music app is completed.

Ex No: 7 BRAINSTORMING FEATURE FOR THE PRODUCT

Date:

AIM

To brainstorm features for the music app.

BRAINSTORMED FEATURES

There are some features for the music app:

1. Personalized Music Discovery:
Advanced recommendation algorithms that suggest songs, albums, and artists based on a user's
listening history, preferences, and mood.
Daily or weekly playlists tailored to the user's taste, including "Discover Weekly" or "New Release
Radar" style playlists.
2. Intuitive Music Library Management:
A user-friendly interface with the ability to sort and filter songs by genre, artist, album, and more.
Smart organization features that automatically categorize music based on genres and user-defined tags.
3. Customizable Playlists:
Playlist creation with drag-and-drop functionality for easy song arrangement.
Collaborative playlists that can be shared and edited with friends and family.
4. Visual Experience:
Stunning and visually engaging album artwork display.
Integration with music videos and lyric displays when available.
5. Clear and Intuitive Playback Controls:
Easily accessible playback controls with options for play, pause, skip, and volume adjustment.
Cross fade and gap less playback for a seamless listening experience.
6. Comprehensive Artist Information:
Artist pages featuring biographies, discographies, and related artist recommendations.
Notifications for upcoming concerts, tours, and album releases.
7. Social Features:
Social sharing of playlists, favorite songs, and music discoveries.
Integration with social media platforms for easy sharing and following of friends' music activities.
8. Offline Listening:
Download and offline playback options for songs and playlists.
Clear indicators of which songs are available offline.
9. Mood and Activity-Based Playlists:
Curated playlists designed for specific moods (e.g., workout, relaxation, party) or activities (e.g.,
cooking, studying).
User-generated mood-based playlists.
10. Dark Mode and Theming Options:
Customizable themes, including a dark mode, to cater to different visual preferences.

RESULT

The above brainstorming for the music app is completed.

Ex No: 8 DEFINING THE LOOK AND FEEL OF A NEW
PROJECT
Date:

AIM

To define the look and feel of the music app.

DEFINING THE LOOK AND FEEL OF THE MUSIC APP

The look and feel of the music is given by two things:

1.Visual Design

2.User Interface Elements

VISUAL DESIGN

Color Scheme: A color palette reflecting the app's mood and tone, embracing vibrant and dynamic colors
evoking a sense of energy and creativity, is considered.

Typography: Fonts that are easy to read and complement the overall design are chosen. Different fonts
for headings, subheadings, and body text are employed, with attention to appropriate text size for
mobile or desktop devices.

Iconography: Icons, intuitive and representing common music-related actions like play, pause, skip, and
adding to playlists, are either created or selected. Consistency in icon design is regarded as crucial for
user recognition.

USER INTERFACE(UI) ELEMENTS

Homepage: The homepage, designed to be visually engaging, presents users with personalized music
recommendations. Large album artwork, sliders, or carousels are considered for showcasing featured
songs or playlists, ensuring users immediately observe trending tracks and discover new music.

Music Library: The music library is organized and designed for easy navigation. Grid or list views for
music tracks are employed, along with options for sorting and filtering by artist, genre, and releasedate.
Prominently displaying thumbnail images of album covers is prioritized.
Playlist Management: An interface for managing playlists is created to be both intuitive and visually
appealing. Users are enabled to drag and drop songs for playlist creation and reordering. Clear icons are
utilized for actions such as renaming, deleting, and sharing playlists.

Artist Pages: Artist pages are crafted to feature high-resolution images, artist biographies, discographies,
and tour information. A visually pleasing layout is incorporated to showcase the artist's journey and
musical contributions.

Playback Controls: Accessibility and visual clarity of playback controls are ensured. Standard symbols
for play, pause, skip, and volume control are used. Implementation of interactive features, such as
album art animations during playback, is considered.

RESULT

The above defining of the look and feel of the music app is completed.
Ex No: 9 CREATE A SAMPLE PATTERN LIBRARY FOR THAT
PRODUCT
Date:

AIM

To create a sample pattern library for the music app like mood board, fonts and colors.

PROCEDURE
1. Create a rectangle.
2. Decide the colors, fonts and icons to be used.
3. Start creating a mood board in Figma.
4. Add the colors which are going to be used.
5. Add the fonts that are going to be used.
6. Add the icons that are going to be used.
OUTPUT

RESULT

The above sample pattern library for the music is completed.

Ex No: 10 IDENTIFY A CUSTOMER PROBLEM TO SOLVE

Date:

AIM

To identity a customer problem of the music app to solve.

PROBLEM

Music enthusiasts struggle to navigate and make the most of their extensive digital music collections,
including discovering new music and keeping their playlists organized.

PAIN POINTS

Music Discovery: Users often find it challenging to discover new music that aligns with their preferences
and moods, leading to stagnation in their music consumption.

Playlist Chaos: Managing and organizing playlists can be time-consuming and confusing, especially as
users accumulate more songs and tracks.

Artist Information: Accessing comprehensive information about artists, including biographies,

discographies, and tour dates, often requires switching between multiple apps or platforms.

Effortless Navigation: Users desire a seamless and visually engaging experience for navigating their
music libraries, with intuitive controls for uninterrupted music enjoyment.

Personalization: Users seek the ability to create, customize, and manage personalized playlists that
reflect their moods and favorite tracks.

SOLUTION

Personalized Music Discovery:

Implement advanced recommendation algorithms that analyze users' listening history and preferences to
offer personalized music suggestions.

Curate playlists and featured songs based on users' moods, activities, and favorite genres.

Provide a "Discover" section with a continuous feed of new and trending music tailored to each user.

Streamlined Playlist Management:

Introduce a user-friendly playlist management system that simplifies creating, editing, and organizing
playlists.

Allow users to effortlessly add or remove songs, reorder tracks, and apply smart tags to categorize
playlists by mood or occasion.

Implement a search function that helps users quickly find songs in their vast music collections.

Comprehensive Artist Information:

Create dedicated artist pages that offer detailed information about musicians, including biographies,
discographies, upcoming tour dates, and related artists.

Provide multimedia content like videos, interviews, and behind-the-scenes footage for an immersive artist
experience.

Ensure a seamless transition from music exploration to artist exploration without leaving the app.

Effortless Navigation and Visually Engaging Interface:

Redesign the app's user interface to be visually engaging and intuitive, making music navigation a
delightful experience.

Use vibrant and dynamic colors, album artwork, and interactive animations to create an aesthetically
pleasing interface.

Incorporate features like swipe gestures, simple and recognizable icons, and drag-and-drop functionality
for effortless interactions.

Personalization and Customization:

Allow users to personalize their experience by creating custom playlists and stations.

Implement a "For You" section that adapts to users' preferences and listening habits.

Integrate intuitive playback controls with options for repeat, shuffle, and cross fade to make the listening
experience more enjoyable.

RESULT
The above identification of a customer problem to solve for a music app is completed.
Ex No: 11 CONDUCT END-TO-END RESEARCH

Date:

AIM

To conduct end-to-end research like user research, creating personas, flow chart for the music app .

USER RESEARCH

Surveys: Distribute surveys to potential users to collect information about their music preferences, pain
points, and app usage habits.

Interviews: Conduct in-depth interviews with a diverse group of music enthusiasts to gain insights into
their needs and desires.

Observations: Observe users interacting with existing music apps to identify common usability issues
and preferences.

Data Analysis: Analyze the data collected to uncover patterns, user behaviors, and pain points.

CREATING PERSONAS

Persona 1: Energetic Emily

Demographics:

Age: 25-34

Gender: Female

Location: Urban

Behaviors:

Daily music listener

Enjoys indie and alternative music

Regularly creates high-energy workout playlists

Loves exploring new, lesser-known artists

Pain Points:
 Difficulties finding indie artists and tracks

Wants dynamic playlists for workouts but often struggles to curate them

Desires a music app that introduces fresh, energetic tracks

Goals:

Discover new indie artists and tracks for workout playlists

Easily create dynamic workout playlists with recommended songs

Access an extensive catalog of indie music

Persona 2: Relaxed Robert

Demographics:

Age: 45-54

Gender: Male

Location: Suburban

Behaviors:

Occasional music listener

Prefers mellow and acoustic music

Values a hassle-free music experience

Often listens to music while winding down

Pain Points:

Overwhelmed by complex music apps

Has difficulty finding calm and acoustic tracks

Seeks a simple and intuitive music app

Goals:

Enjoy a relaxed and stress-free music experience

 Discover soothing and acoustic songs for relaxation

Persona 3: Tech-Savvy Taylor

Demographics:

Age: 18-24

Gender: Non-binary

Location: Tech hub/city

Behaviors:

Constantly exploring new music genres

Enjoys electronic and experimental music

Actively participates in online music communities

Tech-savvy and enjoys experimenting with features

Pain Points:

Limited availability of experimental and underground music in mainstream apps

Wants a platform that integrates with social media for sharing music discoveries

Goals:

Discover and share unique electronic and experimental tracks

Engage with a community of like-minded music enthusiasts

IDEATION PROCESS

SCENARIOS

Scenario 1: "Energetic Emily's Gym Session"

Context: Energetic Emily is at the gym, looking for a playlist that matches her workout intensity.

Behavior: She opens the app, goes to her workout playlist, and wants to quickly add upbeat indie tracks.
She navigates to the "Recommended for You" section to explore new energetic songs.

Goal: Find and add new indie tracks to her workout playlist for an energized gym session.
Scenario 2: "Relaxed Robert's Commute"

Context: Relaxed Robert is commuting and wants to easily switch between his favorite calming tracks.

Behavior: He opens the app and selects his "Sunday Morning Vibes" playlist. While commuting, he
uses the playback controls to skip tracks and adjust the volume.

Goal: Enjoy a seamless music experience during his commute with easy track navigation and playback
control.

Scenario 3: Tech-Savvy Taylor's Music Exploration

Context: Tech-Savvy Taylor is at home, looking for a platform that caters to their experimental music
taste and allows for seamless sharing within their online community.

Behavior: They open the app and explore the "Experimental Sounds" section. Using advanced filters,
Taylor narrows down the search to find tracks with specific BPM and experimental sub-genres. Taylor
discovers a hidden gem and wants to share it on their favorite social media platform directly from the
app.

Goal: Find and share unique electronic and experimental tracks with the online music community.

USER FLOW

User Flow for Energetic Emily:

Opening the App

Energetic Emily opens the app and is presented with the home screen.

Music Discovery

She navigates to the "Recommended for You" section.

Here, she finds a collection of energetic indie tracks recommended based on her listening history
and preferences.

Playlist Customization

Energetic Emily selects a few of the recommended tracks and adds them to her "High-Energy
 Workout" playlist.

She uses the app's easy drag-and-drop functionality to reorder the playlist according to her
workout routine.

Discovering New Artists

Curious about the artists behind the new tracks, she clicks on one of them.

She's taken to an artist page with a biography, discography, and upcoming tour dates.

She enjoys exploring lesser-known artists.

Seamless Playback

Energetic Emily presses "Play" and enjoys her dynamically curated workout playlist.

Playback controls, like shuffle and repeat, are easily accessible for a seamless gym session.

User Flow for Relaxed Robert:

Opening the App

Relaxed Robert opens the app and is presented with the home screen.

Playlist Selection

He selects his "Sunday Morning Vibes" playlist.

Commute Experience

While commuting, he uses the playback controls to skip tracks and adjust the volume.

Enjoying a Seamless Experience

Relaxed Robert enjoys a seamless music experience during his commute with easy track
navigation and playback control.

User Flow for Tech-Savvy Taylor:

Opening the App:

Tech-Savvy Taylor opens the app and is presented with the home screen.

Exploring Experimental Sounds:

 They navigate to the "Experimental Sounds" section.

Use advanced filters to refine the search based on BPM and sub-genres.

Discovering Hidden Gems:

Taylor discovers a unique track and adds it to their "Experimental Playlist."

Social Media Integration:

They click on the sharing icon and seamlessly share the track on their preferred social media
platform.

Community Engagement:

Tech-Savvy Taylor engages in discussions within the app's community forum, connecting with
other users who appreciate experimental music.

Personalized Recommendations:

The app provides personalized recommendations based on Taylor's exploration and engagement,
creating a tailored music discovery experience.

RESULT

The above end-to-end is completed by creating personas, ideation process and user flows .
Ex No: 12 SKETCH, DESIGN WITH POPULAR TOOL AND BUILD
A PROTOTYPE
Date:

AIM

To sketch, design with Figma and build a prototype and perform usability testing and identify
improvements for the music app .

PROCEDURE
1. A sketch is created roughly for the music app.
2. Figma is opened to design the music app.
3. Add the first frame of iPhone 11 pro max.
4. In this frame the homepage of the app is designed.
5. The homepage is designed by adding icons, fonts and colors.
6. Add the second frame of iPhone 11 pro max.
7. In this player of the app is designed.
8. It is designed by creating a rectangle.
9. On top of the rectangle the image and background colors are added.
10. The playback control icons are added and set in place.
11. Now the frames are connected using a flow.
12. As there is a flow the prototype is built.
13. The usability testing is performed by making sure there are proper navigation.
IMPROVEMENT
1. Login Page:
Implementing a login page would allow users to create accounts or sign in. This can enhance user
engagement by offering personalized features, such as saving playlists and preferences.
Provide options for social media login, email registration, or guest access for a seamless onboarding
experience.
2. Artist Information Page:
Enhancing artist pages with more in-depth information about the musicians, including their history,
influences, and interviews.
Display related artists, allowing users to explore similar musicians easily.
Incorporate multimedia content like videos and interviews for a richer artist experience.
3. User Page:
Create user profiles where users can manage their personal information, playlists, and settings.
Allow users to connect with friends, follow their music activity, and share playlists with their network.
Include a history of recently played tracks and personalized music recommendations based on listening
history.
4. Home Page:
Revise the home page to include multiple sections catering to different user needs.
Besides personalized recommendations, add sections for new releases, top charts, and user-curated
playlists.
Ensure the home page adapts to users' preferences and listening habits.
5. Player Page:
Improve the player page by making playback controls more intuitive and interactive.
Include lyrics, artist bios, and related track suggestions while playing songs.
Implement features like crossfade and gapless playback for a seamless listening experience.
6. Search Functionality:
Enhance the search feature, allowing users to search for songs, artists, albums, and playlists more
effectively.
Implement filters and sorting options for search results.
Add voice search functionality for hands-free navigation.
7. Social Integration:
Enable users to connect their app with social media platforms to share their music activity and discover
what their friends are listening to.
8. Accessibility:
Ensure the app is accessible to a wide range of users, including those with disabilities. Implement features
like screen reader compatibility and accessible color schemes.
9. Personalized Radio Stations:
Create radio stations based on user preferences and provide a radio listening experience akin to traditional
radio.
OUTPUT

RESULT
The above sketching, designing, prototyping, testing and identifying improvements for music app is
completed.