Prototyping

Introduction

The core goal of the app is to help users relieve mood stress through music. And we plan to use the voice recognition technology, which is able to evaluate the user's mood condition. When the user's negative mood is detected, APP will intelligently recommend effective music to help users maintain positive emotions.

More importantly, based on the findings of user research, we have designed the product functions, including voiceprint recognition function, emotion evaluation function, and music recommendation function. Then, we discussed how to design the page structure of the application. Throughout the prototyping process, we combined the results of user usability testing and user research, and modified the prototype plan several times to meet the user's needs.

Low-fi Prototype

In the first step, based on previous user research and product design ideas, we conducted brainstorming within the group and drew a mind map to show the structure of the entire app.

Page structure of Mood Enhancer:

Main page - music player interface: including playing, pausing and changing songs. And it contains song information.
Emotion evaluation page: showing the user's current mood level, such as great, good, moderate, bad awful, etc. And it will inform the user to use the music function when the mood data is lower than the normal level.
User page: including user account, privacy data, product team information, and reset function.

In the second step, we drew a low-fidelity prototype map, which brought together everyone's ideas and completed the preliminary interface design.

First Interactive Prototype

We first sketched a more detailed prototype by using the prototyping software in accordance with the low-fidelity prototype. As the initial prototype, our goal is to complete the main three pages and build the main framework of this app. Therefore, the current prototype is not complete enough, but it also shows the main functional interface of our products.

Second Interactive Prototype

Based on results of user research and usability testing, our team plan to make some changes to the functionality and interaction details of mood enhancer. At this stage, we have basically completed the prototype design of all interfaces, showing the complete product usage details.

1.Notification

Most participants said they would listen to music when they were happy or in a bad mood. Based on this finding, we hope that mood enhancer can use the mobile phone pop-up window to guide the user to listen to music and adjust their moods in time.

2.User guide page

We plan to help users understand voiceprint recognition technology when they open the app for the first time, eliminating their confusion and concerns about voiceprint recognition technology.

3.Introducing external song list

we found that most users use music apps every day and prefer to listen to their favorite music. Based on this finding, we decided to add the "song list function" that allows users to introduce song lists from other music applications. Therefore, the mood enhancer can optimize the system recommendation algorithm to recommend more attractive music to users.

4.Music play page

After adding auto-play mode and manual-play mode, users can choose the music playback mode according to their needs. This is because we consider the using scenario and plan to avoid the inconvenience of automatically playing music in public. And after adding the "helpful" and "unhelpful" buttons, users can feedback for songs to improve personalized music recommendations.

5.Mood assessment refresh button

When not agreeing with the results of the mood assessment, users can restart the voiceprint analysis.

6.User personal page

After adding voiceprint recognition settings, users can choose when to activate voiceprint recognition (always/only during app open). And we plan to add error reporting function for users, which enables users to feedback problems.

Final prototype version

After the modification of the function details, we conducted the user testing again. The user indicates that the visual design of the page needs to be improved so that the interface can be clearly and directly understood. Therefore, we have revised the prototype map again with the goal of improving visual information, and completed the final version.

Prototyping still has some shortcomings and places that have not yet been completed. Due to lack of time, details such as the specific interface design of user login and data cloud preservation are not covered. From a realistic application, more usage details should be improved.

For details on the interaction, please click the link:

https://org.modao.cc/app/5c2059c399d810f263f9accd10ba0aaf

Work Breakdown