Shingle Hanger
Creating a quirky, playful brand identity and mobile app for ShingleHanger. Helping businesses hang their shingle.
The Challenge
ShingleHanger is an all-in-one business management tool for micro-business owners. The SAAS mobile app allows business owners to organize jobs and send invoices for free. For this startup, we needed to bring the product vision to life, define the feature sets, and unify the brand. The challenges were interpreting business requirements, building a foundational brand with a new logo, and designing an easy-to-use experience for entrepreneurs.
Goals & Approach
The goal was to create a brand identity and mobile app design for the launch. I began analyzing business and technical requirements while conducting discovery sessions with stakeholders. Then, I continued logo/brand development in parallel with product low-fidelity wireframes. I mapped out the user flow, designed wireframes for all user types, and developed a detailed prototype with engineering documentation. This approach accelerated the development process with detailed guides for the mobile app design.
Discovery & personas
With chief stakeholders, I led discussions to identify the brand's core pillars, personality traits, and overall mission. I then developed a user personas guide based on existing audience data, capturing user aspirations, hesitations, growth dividers, and mindset.
Low fidelity structure
From the initial wireframes stage, I collaborated with the engineering team to align on development scope, UX structure, and capabilities within our timeline and budget to understand the most logical design approach and ensure a smooth handoff.
Brand concept
"Hang your shingle." This US idiom refers to creating a sign with house shingles to advertise a new business or small practice. As the inspired app name, I focused on visualizing the meaning and symbolism of the phrase throughout the brand's visual identity.
Logo concept
"The shingle." I created an iconic symbol that literally and metaphorically represents the meaning of ShingleHanger. The logo has a unique signboard shape and custom lettering to reinforce its quirky personality while staying effective when small.
The Solution
We successfully built and launched the ShingleHanger product with a new logo and unified branding system. With a target audience of freelancers, early entrepreneurs, and micro-business owners, I developed an inviting, lighthearted, iconic brand that stands out. For the mobile app, I designed an inviting SAAS product with an intuitive user experience to automate business actions and invoices. I finally executed a detailed brand guide outlining our voice & tone, logo guidelines, and product design system to introduce the internal team to the design standards.
Brand launch
I designed the overall visual brand system, the logomark, custom iconography, and various assets for the mobile app launch. This included testing accessibility and implementing standards across the brand.
Mobile design
I developed the complete mobile product design, strategizing user interaction and integrating visual branding. This deliverable included prototypes, documentation, and preparing all exports for the engineering team.
Brand guides
I executed a complete brand guide outlining voice & tone, logo guides, and visual brand principles. This guide includes custom brand patterns, custom iconography, and examples to expand on branding.
Internal handoff
Upon completion, I collaborated with the ShingleHanger marketing/product team to hand off all files and direct them on how this brand guide should be a foundational companion for their creativity.
Results & Impact
The company successfully launched the mobile application on the app store for free use. My detailed development documentation, functional prototypes, and collaborative handoff reduced the engineering costs by half their original estimate. With prepared assets and an onboarded marketing team, we unified the brand across social media platforms and continued to see increased user engagement and app downloads.
Conclusion
Having a background in front-end development, I worked closely with engineering teams to align on scope, architecture, and feature design. This knowledge base advanced our development timeline and reduced back-and-forth clarifications significantly. I directed UX interactions, validation states, and triggered animations while reducing scope when needed to fulfill the main user story. My unique combination of design expertise and dev knowledge can quickly advance any product design team.