Mood ticketing app
Academic project
Reading time: 2 min
Mood ticketing app
Mood ticketing app
Mood ticketing app
Academic project
Academic project
Academic project
Reading time : 2 min
What is Mood ticketing?
I designed a mobile ticketing app for "Mood," a chain of concert venues in Phoenix, Tempe, and Glendale. The app consolidates ticket purchases for all three venues, offering a user-friendly experience for music enthusiasts.
Through this project, I gained insights into designing user-centric features, such as event filtering, account management, and a streamlined ticket purchase flow. It was an opportunity to explore mobile-first design principles and understand how to create intuitive interfaces that enhance the user experience.
What is Mood ticketing?
bebas neue
Aa
Page title
24 px
regular
#FBF2E8
Aa
Instrument Sans
Card heading
20 px
Bold
#FBF2E8
Field heading
20 px
Regular
#FFFFFF
Section Title
18 px
Regular
#FBF2E8
Body 1
16 px
Regular
#FBF2E8
Body 2
14 px
Regular
#FBF2E8
Typography
Style guide
Color palette
Orange burst
#E25A53
Cream
Silk
#FBF5E8
Dan
Brown
#2D2120
White
#FFFFFF
Orange burst II
Opacity 10%
#E25A53
Silk II
Opacity 50%
#FBF5E8
Silk III
Opacity 20%
#FBF5E8
Black
#000000
Primary colors
Secondary colors
Other colors
Components
December 2024
SA
MO
TU
WE
TH
FR
SU
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Sign in
Profile
Tickets
All Events
Home
Pop
Pop
Pop
By date
Buy Now
Buy Now
Wire
frames
DesignColor Palette: Helped determine the number of colors needed, ensuring emphasis on primary actions and contrast for readability
Spacing and Hierarchy: Improved alignment using an 8px grid, refined visual and typography hierarchy for better readability and scannability.
UI Element Positioning: Changed radio buttons to checkboxes for multi-select, consolidated filters into a single section, and optimized CTA button placement to reduce clutter
Event Card Content: Defined essential details like title, date, and time, with truncation rules for long text to maintain consistency.
How did wireframes help me?
My
Learnings
Recognized the importance of creating components early to streamline multiple iterations and ensure design efficiency.
Leveraged plugins and resources to enhance workflow productivity and save time.
Gained a deeper understanding of dividing colors into primary and secondary palettes for consistent application.
Explored typography variations to effectively define visual hierarchy and differentiate content areas.
Improved comprehension of spacing, font sizes, and opacity using Figma Mirror to view designs at 1:1 scale.
Learned how color distinctions, spacing, and micro-interactions significantly elevate user experience.
Enhanced proficiency in Auto Layout and advanced Figma techniques for more effective design workflows.
Next
Steps
Focus on efficient use of primary and secondary colors, reducing gradients, and aligning with the style guide.
Streamline button designs to ensure consistency across all interfaces.
Standardize typography to maintain hierarchy and readability.
Explore motion design to add subtle, functional animations for improved user interactions.
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Style guide
Typography
a
Font name
Use case
Size
Style
Color
Aa
bebas neue
Page Title
24 px
Regular
#FBF2E8
Aa
Instrument Sans
Card heading
20 px
Bold
#FBF2E8
Aa
Instrument sans
Field heading
20 px
Regular
#fFFFFF
Aa
Instrument sans
Section title
18 px
Regular
#FBF2E8
Aa
Instrument Sans
Body 1
16 px
Regular
#FBF2E8
Aa
Instrument Sans
Body 2
14 px
Regular
#FBF2E8
Color palette
Primary colors
Secondary colors
Other colors
Orange burst
Orange burst II
Silk III
Silk II
Dan brown
Cream silk
White
#E25A53
Opacity 10%
Opacity 20%
Black
Opacity 50%
#E25A53
#FBF5E8
#000000
#FBF5E8
#2D2120
#FBF5E8
#FFFFFF
Orange burst
Orange burst II
Silk III
Silk II
Dan brown
Cream silk
White
#E25A53
Opacity 10%
Opacity 20%
Black
Opacity 50%
#E25A53
#FBF5E8
#000000
#FBF5E8
#2D2120
#FBF5E8
#FFFFFF
Orange burst
Orange burst II
Silk III
Silk II
Dan brown
Cream silk
White
#E25A53
Opacity 10%
Opacity 20%
Black
Opacity 50%
#E25A53
#FBF5E8
#000000
#FBF5E8
#2D2120
#FBF5E8
#FFFFFF
Components
Icons
Sign in
Pop
Pop
Pop
By date
Buy Now
Buy Now
December 2024
SA
MO
TU
WE
TH
FR
SU
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Profile
Tickets
All Events
Home
Sign in
Pop
Pop
Pop
By date
Buy Now
Buy Now
December 2024
SA
MO
TU
WE
TH
FR
SU
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Profile
Tickets
All Events
Home
a
Font name
Use case
Size
Style
Color
Aa
bebas neue
Page Title
24 px
Regular
#FBF2E8
Aa
Instrument Sans
Card heading
20 px
Bold
#FBF2E8
Aa
Instrument sans
Field heading
20 px
Regular
#fFFFFF
Aa
Instrument sans
Section title
18 px
Regular
#FBF2E8
Aa
Instrument Sans
Body 1
16 px
Regular
#FBF2E8
Aa
Instrument Sans
Body 2
14 px
Regular
#FBF2E8
Sign in
Pop
Pop
Pop
By date
Buy Now
Buy Now
December 2024
SA
MO
TU
WE
TH
FR
SU
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Profile
Tickets
All Events
Home
Wireframe
How did wireframes help me?
DesignColor Palette: Helped determine the number of colors needed, ensuring emphasis on primary actions and contrast for readability
Spacing and Hierarchy: Improved alignment using an 8px grid, refined visual and typography hierarchy for better readability and scannability.
UI Element Positioning: Changed radio buttons to checkboxes for multi-select, consolidated filters into a single section, and optimized CTA button placement to reduce clutter
Event Card Content: Defined essential details like title, date, and time, with truncation rules for long text to maintain consistency.
My learnings
Recognized the importance of creating components early to streamline multiple iterations and ensure design efficiency.
Leveraged plugins and resources to enhance workflow productivity and save time.
Gained a deeper understanding of dividing colors into primary and secondary palettes for consistent application.
Explored typography variations to effectively define visual hierarchy and differentiate content areas.
Improved comprehension of spacing, font sizes, and opacity using Figma Mirror to view designs at 1:1 scale.
Learned how color distinctions, spacing, and micro-interactions significantly elevate user experience.
Enhanced proficiency in Auto Layout and advanced Figma techniques for more effective design workflows.
Next steps
Focus on efficient use of primary and secondary colors, reducing gradients, and aligning with the style guide.
Streamline button designs to ensure consistency across all interfaces.
Standardize typography to maintain hierarchy and readability.
Explore motion design to add subtle, functional animations for improved user interactions.
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
LET'S CONNECT
I am everything design! I am resilient to the core.
Get in touch to find out more about how I create digital experiences to effectively reach and engage audiences.
Email: shailees0406@gmail.com
Contact: +1 (602) 576-4588
LET'S CONNECT
I am everything design! I am resilient to the core.
Get in touch to find out more about how I create digital experiences to effectively reach and engage audiences.
Email: shailees0406@gmail.com
Contact: +1 (602) 576-4588
Home
Home
LET'S CONNECT
I am everything design! I am resilient to the core.
Email: shailees0406@gmail.com
Contact: +1 (602) 576-4588