Research
Market & Competitive Analysis
I performed a market and competitive analysis to better understand how other roofing service providers were presenting information and attaining clientele. I evaluated the competition's website and overall digital presence to identify weak points and how to present information in a way that homeowners would digest best.
The industry's low barrier to entry became prominent when studying the competition's digital presence.
- Information seemed difficult to understand
- Trust was rarely communicated effectively
- The over-all objective was to obtain user's information as quickly as possible
While obtaining contact information and calling homeowners may be the industry's normal sales process, it misses the opportunity to be considered as thought leaders before the homeowner gets contacted by a sales rep. By designing a seamless user interface design, Sheegog would gain a clear advantage by communicating trust, capacity, experience, and capabilities in an industry that has been notorious for fraudulent acts after each storm.
Interaction Design
APPROACH TO INTERACTION DESIGN
For this step, the focus was on the reasons necessary for a user to interact with the roofing industry, and thus, the digital movement in the interaction.
Design Prototype
User Flow
The user flow was designed to be easily processed, quick to understand, and expandable (providing the option for Sheegog to continue growing their services). In this step, we quickly narrowed down that the services could be categorized down into three key areas (as seen in the navigation): Roofing, Construction, and Restoration. Incorporating the services at the structural level led to a better understand the user journey.
Lo-Fi Wireframes
Low-fidelity wireframes were built to visualize the information architecture and user flow above. We also made sure to do this for desktop view first to get client approval before wireframing for other interfaces.
Mid-Fi Prototypes
After client approval, the process moved on to mid-fidelity prototypes. In this step, color schemes, patterns, and overall organization was refined to improve the design ideas and details.
Modules
Modules were able to be ideated and assigned to a specific type of template -- aiding in the predictability and familiarity factor we wanted the users to experience.
Define Scope
Some human outputs were defined to target the homeowners main pain points.
Micro-Copy:
The micro-copy was designed to be breviloquent and familiar across all pages, which leads to it being easy to process. The copy also focused on the pain-points of the process, but quickly shifted towards the solution. These solutions were highlighted whenever possible. Ultimately, the language was created to exemplify the team work and retainability of the services offered by Sheegog Contracting.
Icons
The icons were designed to communicate a clear process of working with Sheegog, creating an organized expectations beyond the interface and into the physical service user are to receive.
Patterns
The different characteristics of the patterns (included in the brand's icon) were designed to create consistency and familiarity throughout the various services offered; helping users create a mental model in their interactions.
Physical/Positioning
Modules were unique to each information they presented (i.e. validation modules, headers) and they remained predictive and consistent in aesthetics and positioning to improve understandability and affordance. This was important since a peripheral goal was to make it easy to collect user information in order to apply a marketing strategy via email automations or mailers (these also mirrored the interface design).
Micro-Interactions
The approach chosen for the navigation involved the creation of an interactive design with micro-interactions that provided a smooth and immediate feedback for the user, as influenced by the UX animation when hovering.
On a hierarchal point-of-view, the services offered by Sheegog was narrowed down into three main pillars: Roofing, Construction, and Restoration. This was behind-the-scenes work on effectively organizing the information process (and sales funnel) we wanted users to follow.
The delight of a simple navigation was goal-driven to solve the recurring problem in the industry: providing the target audience with too much information in an unnatural structure (thus, no structure at all). This ease of access to pertinent information directly mirrored the learnability and efficiency that we wanted the intended user to connect with Sheegog.
Responsive Layout
Introduction to some of the digital choreography ideated to add a new level of depth to the interaction design. The goal of introducing animation was to align with the users' goal and help them understand the expectations of the interface.
State Transitions
To ease the transition from interface design to development, a grid system was used as the backbone to create templates that were familiar and consistent across multiple devices. In the development phase, this made it easier to reproduce specific modules where they were needed. It also made the feedback loop more efficient by decreasing the distraction and communication gaps from designers to developers and vice versa.
Homepage Prototype
Provide final prototype file to client and development team. Final prototype with interactive states.
Final Interactive Prototypes
You can scroll and click through the interactive prototype below to preview the webpage and micro interactions while hovering. If you're on a tablet or phone, check out the responsive prototype.
