VoNo Voice Note App - Redesign

Creating a better UX for an existing app, as well as a complete style redesign.
App Analysis
User Research
Competitor Research
Hi-Fi Prototype
Usability Testing
Client
DTT
Date
Jun 2022
Role
UX/UI Designer
Link to Prototype
will be added soon.

The Challenge

I was contacted by the agency DTT, with the brief to redesign an app they had previously created.

The app is called Vono, a memo app, that allows users to easily save their ideas or share them. Vono's users are most often busy people in the 20-45 age group, who like to keep their ideas organized and quickly takes notes while doing other things.

The app has 4 functionalities. Voice memos, Voice-to-text, text and photo memos.

The brief stated that the client of DTT would like to improve the UX of the app as well as a complete new visual style.

Below you can see the BEFORE (left) vs AFTER (right).

How I did it

The process

I started my process by dowloanding the app and using for some time in order to really get in the shoes of the user.

After spending some time with the app and taking notes of my experience I started noticing things that felt wrong. I continued my further analysis with some desk research related to UX for apps.

These are my findings:

Step 1 - App Analysis

Home Page

1. The primary issue identified was with the navigation, which was positioned at the top of the page and appeared cluttered with minimal white space. This setup could be frustrating for users who need to quickly make memos on the go.

2. A significant design flaw involves two buttons that perform different actions but look identical, leading to user confusion. Additionally, if there are five or more emails, users must scroll to locate the save button, increasing the risk of accidentally sending an email to the wrong recipient.

3. The design uses excessive space at the top of the screen, making it feel crowded, especially for users with larger hands. This excessive use of space is unnecessary.

4. Another issue with the sending was that I could only send to 1 recipient at a time, through this button, which seems like a missed win.

5. These two icons are so cluttered, they are almost impossible to press, especially if you are in a hurry.

Step 1 - App Analysis

Memo Screen

6. Having a search bar is very useful. 

But from the brief we  know that the user is an organized busy person. 

Therefor I think here would be useful to have the option to categorize the different notes into folders, like “business, personal, etc.”.

7. Further more, from researching other apps I saw that usually the main/home screen is the collection of all the saved notes. Seems logical because if I’m using this to take notes, I may want to refer to them at any given point. That is why I feel like the home page and the memo overview page can be merged.

8. Also when the user goes back from the memo overview to the home page the app automatically starts recording. 
This is not very useful, because sometimes the user may use the app only when they refer to notes. 


‍

Step 2

Competitor Analysis

In order to further my research and understand how I can improve this app I took a look at some similar apps. I looked at:
‍
- Voice Notes
- Voice Memos (Apple’s native app)
- Voice Recording
- Voice Recorder & Memos pro

Positive Findings:
‍
- app does not record automatically
- saves notes automatically
- notes are accessible on the home page
- ability to send a memo to multiple recipients

Negative Findings:

- usually the apps only allow for Voice-to-text and no other ways to take notes.

Redesign Concept Phase

Flow Diagram

One of the main aspects that the brief required me to improve was the sending flow. In the previous version of the app the user could only send to one recipients at a time, through the main send button. Otherwise there is a “share” button, through which the user can share it on social media with multiple people. But throught email they can only send it to one at a time.

This could be easy to solve by adding a small extra steps in the following way.

Concepting and Wireframing

Here I will show my initial design ideas through a wireframe.

Wireframes

Concept Wireframes

1. The main idea of my redesign was to merge the memo overview page with the home page. Then when you record and overlay will show up with the recording process. Also I added a new feature of the memos being saved automatically, in order to reduce the steps being taken by the user.

2. As you can see my initial design still keeps most of the patterns from the old design. One of the most important needs of the user is to be able to quickly record. Therefore I wanted to keep that recording button.

3. The overlay addition in order to create more space for the home space. This also makes it more easy for the user because they can do all the steps on the same screen, without moving to other pages.

4. The main issue with the initial design was the top-placed navigation bar. Further research revealed that placing navigation at the bottom is more user-friendly, as it's easier for thumbs to access quickly.

Wireframes

Iterations

In order to test all of these I did a quick user testing with 5 people, and that helped me to go through several iterations of my new design.

Wireframes

Style guide and small design system

I created a small style guide and design system for this app in order to create a smoother handover, as well as having a coherent design. I included Colors, Icons, Typography and Components.

Prototypes

Hi-fidelity Designs

The design I will show below are the results from the 3rd round of iterations, after collecting user feedback.  

User Testing

Due to the short timeline of the project I did not have the chance to run very deep user testings. However I did manage to conduct a few short tests. I mostly tested for usability and the flow of the app. If every step of the design is clear.
‍

Positive:
The clean design was highly appreciated. The app seemed to be more initiative, and some frustrations like the automatic recording from the previous app were eliminated.

Negative:
There were some unclarities with the navigation. For example the lack of a home button sometimes confused the users. Next to that sometimes it was unclear how to stop a process.

Prototypes

Final Result

With those corrections incorporated I present the final version that I delivered to the client.

Next Steps

Recommendations

After my hand off we had a discussion and I had a small final recommendation, based on the brief.

The brief I received said that the photo note option was used around 3% by users, which is very low.

Based on my research when people think about making or sending photos, they always use the native camera app and that’s the use of VoNo’s function for taking pictures is so low.

Therefor I would recommend to remove it complete from the app. This way it’s more clean and uncluttered, which improves UX for the busy person on the go, since there is less options.

Portfolio

Next Project

Curious to know what else I've work one? See my next project below.

University Website Revamp

Web Design
Web Development
SEO
Haarlem Campus University of Applied Science was about to launch it's first cohort of students and I was hired to give them a fresh look and improve their website.
View all
View all