A Journey in Product Development: Part 3 – Creating a Clickable Prototype January 11, 2021 by Riston Leave a Comment In Brief… This is the culmination of the design stage before investing in any solid development decisions. Gathering user feedback from this artifact will be essential for finalizing and assembling a full-scope requirements document and technical design decisions such as infrastructure and stack. If the idea is terrible and not well received, at least the development cycle can be avoided before hiring in additional team members. In this case, I’ll likely be the sole contributor and will work to complete this project whether its well received or not, but in a more business-centered context this could be a important stage in whether the product lifecycle will progress or be stalled out. Moodboards and bringing the app to life. Since the moodboard for the design contains copyrighted material, I will not post a screen shot of it here, but you are welcome to check out my Pinterest board for this project. I feel that the design should have a look and feel appropriate for a music-centric app with “data-ist” aesthetics. A “dark mode” is almost always a great choice for visualizations outside of purely business-analytics oriented interfaces, and this project should emulate that style while using a vibrant color theme for actionable assets and visualizations. The moodboard will also continue to provide inspiration for developing the final visualization elements for the application. General Flow LogIn/Register Sequence A fairly basic and generalized flow for this function should be sufficient. The only consideration is in later stages of the app’s development where we may wish to get the user to enter more personalized data for display in the online forum. For the Login process, the app begins with a loading screen (currently containing a placeholder for the logo), then follows a sequence that can be tested in the prototype. I may in the finalized design add a password set/reset screen, but that is a decision that can wait. Visualizations For the visualization feature of the app, I created a few placeholder visuals using Illustrator. There is also the button for selecting these visuals in the bottom toolbar. There are not only visuals for streaming data, but also some basic “waveform/spectral” visualizations. Radial Visual (Generic but works as a placeholder)Spectrogram VisualClassic Waveform Visual Linking things up Adobe XD features fairly robust options for working quickly generating clickable prototypes and publishing them for review. It is quite fascinating to see all the connection widgets graphically displayed, and its even more interesting to see the proposed architecture while in clickable prototype mode. In Action… A basic prototype is now complete, and can be viewed live here.
