I am currently working with a startup to translate their value propositions into features, establish a design system, and develop their prototypes.
Mylo is an app to find, exchange, and keep track of recommendations. The main features are the Bucket List, where users can keep things that they still want to do; and a Tinder-like feature where users can also directly send recommendations to each other, and accept or reject recommendations.
See some of the animations I made on Principle to showcase interactions below.
In a nutshell, I started with Figma wireframes, moved into Sketch to design high-fidelity screens, and exported screens to Principle where the interactive prototypes were made.
First, after discussing features with co-founders and sketching the screens on paper and whiteboard, I used Figma. Using Figma was crucial to establish common ground with stakeholders, as we were most often working in separate locations. See an example below of our Figma board where the features acquired shape.
Second, constrained by the visual design tools offered by Figma, I moved into Sketch. I created more than a hundred screens on Sketch to implement all of our features, such as sign up flow, account settings flow, accepting and rejecting recommendations, etc. See a few examples of my work on Sketch below.
Afew variations for app navigation.
And these are the navigation options we are currently considering.
I also diligently worked to find the right design for the recommendation card. Dozens of variations were tested with users and discussed with stakeholders.
We narrowed down our design strategy following what we called the 'card anatomy.' The anatomy structures cards in the "what," meaning the content of a recommendation, the "when," meaning when it was shared with users, plus other important social factors, and the "how," meaning how to interact with the recommendation.
Finally, this is the Sketch document of Mylo version 0.1:
What I Would Improve
This is still a work in progress. I am actively updating the design system, interface design, and user experience design following user and investor feedback. Therefore, there are many small visual design details that can and will be improved in the next few months. For example, one important aspect that I would improve is branding and how it propagates into the app design. I didn't have much time to work on the logo, icon design, and color palletes yet as showcasing features are currently our focus.
In terms of tools, this was the first time I used Sketch and it was great learning experience. In my next project I will start using Symbols, Text, and Layer styles from the start. These tools are incredibly powerful and can dramatically cut down iteration times if used properly.