Direct Link Cle App
Project Overview
Musicians in Cleveland often rely on limited networking circles to grow their artistry. Direct Link Cleveland is a music resource designed to expand these connections by providing contacts for local venues, national venues, festival labels, and more. While the website offers essential tools, a mobile app was needed to make these resources more accessible on the go.
Design Challenge
To create a branded mobile app that:
Mirrors the functionality of the web version.
Provides intuitive navigation on mobile devices and tablets.
Enhances the user experience with improved usability.
Research and Strategy
Drawing inspiration from existing resource-based apps like study tools and news aggregators, the project focused on creating clear and categorized navigation. A bottom global navigation system was implemented to make accessing specific “genres” of resources seamless. The existing website served as a foundation for adapting features to mobile.
Personas:
Musicians: Searching for venue and label contacts.
Vendors for hire: Seeking partnerships or opportunities.
Venue owners/booking agents: Submitting or updating venue information.
The Design Process
Wireframes
Created initial sketches and digital wireframes to define key user flows and navigation.
Identified pages that could be condensed to prioritize usability.
Hi-Fi Prototyping
Incorporated branding elements, including color palette, typography, and logo.
Transitioned from wireframes to a high-fidelity prototype.
Iterative Improvements
Addressed key issues, including refining navigation and improving UI elements.
Adjusted branding inconsistencies (e.g., font sizes and color usage).
Testing & Feedback
Conducted usability testing to refine interactions and ensure seamless transitions.
Focused on creating a cohesive experience across different devices.
Final Wireframe for prototype:
Final Mobile Prototype
Results
The final prototype delivers a streamlined app with user-friendly navigation and clear branding. Musicians, vendors, and venue owners can now access vital resources in seconds, ensuring a more effective and convenient experience than the web version.
Key Screens
Login/Sign-Up Flow: Simplified onboarding process.
Settings: Personalization options for users.
Global Navigation: Categorized access to venue, label, and festival contacts.
Iteration 1 - Login / Sign Up
Iteration 1 - Settings
Iteration 2 - Digital Wireframes
Through the iteration process, I identified key UI design components that needed refinement. To elevate the final iteration, I revisited my approach, drawing inspiration from apps on my phone. I closely analyzed their buttons, transitions, and animations—elements that made those apps feel polished and intuitive. This exercise revealed opportunities to enhance the app’s branding and functionality, including addressing issues with font consistency, such as uniform sizes and colors, which impacted the overall visual hierarchy.
Below is the final iteration of the wireframes, with annotations detailing the design decisions and improvements made.
Iteration 1 - Global Screens