Project Overview
Project Overview
Project Overview
Industry / SaaS
Services / UI/UX Design
Timeline / 5 Months
Date / 2023/24
sound-scope.net
Industry / SaaS
Services / UI/UX Design
Timeline / 5 Months
Date / 2023/24
sound-scope.net
Industry / SaaS
Services / UI/UX Design
Timeline / 5 Months
Date / 2023/24
sound-scope.net
Sound Scope is an innovative app crafted specifically for musicians who are eager to enhance their careers and broaden their horizons. With Sound Scope, you'll have access to a comprehensive suite of tools designed to elevate your musical journey and professional growth.
Sound Scope is an innovative app crafted specifically for musicians who are eager to enhance their careers and broaden their horizons. With Sound Scope, you'll have access to a comprehensive suite of tools designed to elevate your musical journey and professional growth.
Sound Scope is an innovative app crafted specifically for musicians who are eager to enhance their careers and broaden their horizons. With Sound Scope, you'll have access to a comprehensive suite of tools designed to elevate your musical journey and professional growth.
The objective of this project was a complete overhaul of the Sound Scope mobile app. This included recreating the app architecture and developing a new revamped design system.
The objective of this project was a complete overhaul of the Sound Scope mobile app. This included recreating the app architecture and developing a new revamped design system.
1 / Information Architecture
1 / Information Architecture
1 / Information Architecture
2 / Wireframes
2 / Wireframes
2 / Wireframes
3 / Typography and Color
3 / Typography and Color
3 / Typography and Color
4 / Design System
4 / Design System
4 / Design System
5 / High Fidelity
5 / High Fidelity
5 / High Fidelity
Information Architecture
Information Architecture
Information
Architecture
This streamlined version of the information architecture provides a clear overview of the app's primary and secondary screens. It details the layout of buttons and the navigation flow between each page, offering a comprehensive view of how users will interact with the app.
This streamlined version of the information architecture provides a clear overview of the app's primary and secondary screens. It details the layout of buttons and the navigation flow between each page, offering a comprehensive view of how users will interact with the app.
This streamlined version of the information architecture provides a clear overview of the app's primary and secondary screens. It details the layout of buttons and the navigation flow between each page, offering a comprehensive view of how users will interact with the app.
Wireframes
Wireframes
Wireframes
These wireframes showcase the home screen and analytics dashboard—two essential screens in the app—along with the task management page, a crucial secondary screen. They also highlight the various components on these pages and the common elements they share.
These wireframes showcase the home screen and analytics dashboard—two essential screens in the app—along with the task management page, a crucial secondary screen. They also highlight the various components on these pages and the common elements they share.
These wireframes showcase the home screen and analytics dashboard—two essential screens in the app—along with the task management page, a crucial secondary screen. They also highlight the various components on these pages and the common elements they share.
Typography and Color
Typography and Color
Typography and Color
Echo Yellow
Echo Yellow
Echo Yellow
#E3FA21
#E3FA21
#E3FA21
Blurple
Blurple
Blurple
#7573FF
#7573FF
#7573FF
Suit Blue
Suit Blue
Suit Blue
#2A2D35
#2A2D35
#2A2D35
Off White
Off White
Off White
#F2F0EB
#F2F0EB
#F2F0EB
Design System
Design System
Design System
The design system uses custom-built components with multiple variants. This enables rapid high-fidelity screen creation that meets the specifications outlined in the wireframes. Certain components, like the header, contain smaller elements such as the timeframe filter component.
The design system uses custom-built components with multiple variants. This enables rapid high-fidelity screen creation that meets the specifications outlined in the wireframes. Certain components, like the header, contain smaller elements such as the timeframe filter component.
The design system uses custom-built components with multiple variants. This enables rapid high-fidelity screen creation that meets the specifications outlined in the wireframes. Certain components, like the header, contain smaller elements such as the timeframe filter component.
High Fidelity Screens
High Fidelity Screens
High Fidelity
Screens
These final versions of the home, analytics, and task management screens illustrate how the screens will appear once the wireframes are filled with components from the design system and user data. The next steps are to develop any additional components required and integrate them into the remaining wireframes of the app.
These final versions of the home, analytics, and task management screens illustrate how the screens will appear once the wireframes are filled with components from the design system and user data. The next steps are to develop any additional components required and integrate them into the remaining wireframes of the app.
These final versions of the home, analytics, and task management screens illustrate how the screens will appear once the wireframes are filled with components from the design system and user data. The next steps are to develop any additional components required and integrate them into the remaining wireframes of the app.