Winghopper
Building A 3D Parametric Modeling User Interface
The Challenge:
WingHopper is a parametric modeling tool that allows users to easily create 3D wing designs without the need for complex engineering programs such as CAD. Most commonly used for crafting hydrofoils such as those used by kite or surf foil systems, it allows hobbyists and professionals alike to test and 3D print their designs.
Already having the program for the web-based modeling portion of the business built, WingHopper needed to refine their design interface to allow first-time users to more intuitively navigate the system. Additionally, they wanted to create a new website to introduce themselves and their software.
Team:
With this being a largely UI-focused project, I undertook all the design responsibilities and worked closely with WingHopper creator, Zach Backas, to draft copy and modeling parameters.
My Responsibilities:
Establishing a user flow, designing wireframes into high-fidelity mockups, branding, imagery, and building a design system to hand-off to the client for development.
Tools Used:
Figma
Wireframing
Design System
Mockups
Prototyping
Ideation
Wanting WingHopper to remain an accessible, web-based application, I began sketching additional screens to complement the design app portion of the site.
Crafting a well-rounded website was important in order to provide first-time users a more introductory experience, complete with a home landing page and an about section.
Wireframes
With 3D modeling being a potentially complicated subject, I designed the home page to feature brief sections detailing WingHopper’s capabilities.
These modular sections incorporate a call and response hierarchy between header and body copy to succinctly introduce WingHopper and its industry in a very conversational tone.
It was here that I added an About page to go more in-depth with some of these concepts as well as company history. Both sections also feature large images with breathable spacing.
Moving into digitization, I first simplified the interface of the 3D design app to work more intuitively for beginners as well as returning users. This was done by:
Maximizing the viewport window
Adding parameter groupings with clear labels to better understand what part of the wing is being adjusted
Separating all view related options into a minimizable bar
Providing a clear button to export designs as well as a link to a new Design Guide page with parameter explanations
I also created a new website landing page with streamlined navigation to allow users immediate access to the About and Templates pages, as well as the design app itself, without the need to create an account first.
Design System
While updating my wireframes into colorized, high-fidelity mockups, I built a design system to deliver standardized elements to WingHopper to assist them in development moving forward. In selecting color tones, I utilized their orange logo color for emphasis throughout the site, while adding a secondary dark blue to create a calm and professional contrast.
High-Fidelity
Wanting to merge an engineering nature with a sense of real-world physicality, I centered WingHopper’s website imagery around water and the sky. In doing so I was able to incorporate the orange and blue brand colors while showcasing finished wings in action.
I opted to keep the design interface portion of the site clean and simplistic to maximize usability, using colors to draw attention to only the projected model and the parameter sliders.