On the homepage the user can see a moving animation built with code of a soundwave. It stays within the top third of the screen at all times but with randomly flow and change shape The user can see the main record button which stands out against the dark background. The dark theme is not only an aesthetic choice but also saves battery life on the mobile phone. The two other icons on the homepage are the Saved memos button and the Settings button
In the send as email page the user can see all of their available contacts. Ideally this list would fetch data from their Gmail or other email provider during an onboarding process when the app has been installed for the first time and is automatically updated with new emails. Otherwise emails can also be entered manually with the plus button at the top right.
If the user taps the audio button once the app will begin to record an audio only memo. It will begin listening to the user and the graphic animation will move in sync with the users voice (like waves of sound) A timer will appear and begin coming up from zero to indicate the length of the recording To indicate a single tap the icon will glow with one green circle and a click sound will play. The prototype was made using Overflow
If for any reason an error accures during the users use of the app, this screen will appear. It prompts the user to re-launch the app using the button provided.
On this page the user can begin recording a audio and text memo by double tapping the main audio icon. To indicate a double tap the icon will glow with two circles and for each tap a click sound will play. The sound wave animation will move in sync with the user's voice and will be visible behind the text. The text will load as the words are being spoken, fading onto the screen. As soon as the stop recording button is pressed, three buttons appear coming out from the main button and landing on the right of the screen.
Style Guide for the app
User Stories
DTT Amsterdam, VoMo App - UI Designer
For this project the client wanted me to improve the UI/UX of the a memo sending app, VoMo, and completely change the visual style. Firstly they wanted an updated version of the home screen (which included the three ‘memo’ functionalities) and improved memo sending flow. They wanted the home screen to be intuitive and reflect the needs of the user. The process of sending memos needed to be fast and allow the user to easily select the desired email addresses.
I began with researching existing apps to explore the competitive landscape. I think it's important to spend time in the initial phase to really understand what the client requires. I looked at existing voice memo apps on the app store and tested them. I also looked at Dribbble and Behance at other designers working in the same field to see how they would tackle the brief.
Then I put pen to paper and made my first hand draw / low fidelity wireframes to flush out some ideas. This process also saves time in the long run otherwise you get too locked into a certain design that has no potential.
Next, using Figma and Overflow, I started getting ideas down and seeing what worked, both visually and practically including discussions with my colleagues and the users to truly understand how the design were being perceived.
Following this I begun making high resolution designs. This is where I lock in my design, check the workflow and that the art board looks decent, spaced evenly, the correct sizes, there is coherence across the design etc. There is a lot of back forth between Figma and prototyping in this stage as the design comes into practice.
For this project I also made a style guide and some user stories. This is valuable for the developers but also for myself. It gives me a clear overview of the colours and style I have used and whether they are all consistent.
