wire-framing
Something I regret not doing in my first project was creating wireframes to visualize my ideas. I went from concept straight to design, which did not allow me to carefully plan the layout of components/text to best utilize screen space. I utilized XD plug ins and other free resources for wire-framing to be more efficient and resourceful.
Library
Even though I had a clear idea of what Wave's branding was, a brand's presence on a product holds different characteristics. I wish I planned a library in advance to plan and define different buttons, colours, text styles, components, and icons. This not only helps with efficiency when designing, but it also helps me see if everything is proportionate and if the branding fits all together.
My libraries would be more detailed such as defining hovers and selected states, but below is a simplified library.
TOOLS
I wish I better utilized tools to enhance my design and user experience. XD has great plug ins, my skills in XD have elevated such as knowing shortcuts / using more features to their fullest potentials, and doing more prep-work beforehand for better planning.
The Redesign
Overall, I improved the layout, better utilizing the screen space, minimizing pop ups, and added more details
Fitting more information on the screen, improved tabs, highlighting new ripples, and ripples screen displays the most important information (actual ripple content) rather than the post.
Clear step-by-step indication with next button, better utilizing screen space, and most desirable button on the right.
Fit more content on the screen, more detailed screens showing multiple scenarios, keyboard interaction example for better user experience, and cleaner tabs.
Minimized pop ups, better utilizing screen space, and more featured fit into a single pop up for multiple actions to be done from one tap.
