ENJOY MUSIC | escape loneliness | build community
To better understand the users, we create a Persona and User Journey Map based on the research information provided by the stakeholder. Meanwhile, to align our ideas and vision for the APP, we also generated a Moodboard.
Get inspired by the Moodboard, we quickly came up to a mutual agreement with the UI style. To seal our idea, my teammate Sarah pulled up a Style Guide to make sure the consistency across all screens for our later collaborative work on the screens.
While my teammate working on the Style Guide, I decided to create a Site Map and do some Sketch. To build in all the features and ensure the Information Architecture makes sense to the users, which also helps us to visualize the structure of the app and keeps us working on the right track during the whole design process.
I began with a series of quick sketches using Procreate on the iPad, just to sketch the idea out. Then I moved my early ideation into wireframes using Figma. To keep users at the centre of the design process, we decided to turn wireframes into clickable prototype for Lo-fi Usability Testing. In this way, we could generate feedback in the early process and made sure we were on the right track to empathize and fulfilled user needs.
To concentrate on the User-centred design process, we decided to implement usability testing in the early stage, to let users' feedback guide us through the design process. While the limited time is one of our constraints, we split the interviews and created Usability Discussion Guide and Testing Plan to unify our interview protocol.
While we were doing the Lofi Usability Testing, the stakeholder wanted to validate whether or not the user preferred vertical or horizontal UI. So we additional created horizontal Lofi prototype to test alongside the vertical Lofi prototype.
We synthesized our Usability result on Trello, in order to derive the user pain points as well as the recommendations for improvement.
The overall flow works for users, their intuitive tells them the app is for virtual concert and they can quickly understand the icon and navigation throughout the app. On the other hand, as for the Pain Points, we gathered in 3:
1. Refund Tickets was not intuitive
2. Participants preferred vertical screens for main user interactions and horizontal for the concert view
3. Participants wanted purchased tickets to be visible on Home screen not just in the Account
Based on the information gathered from the Affinity Map, we generated the Empathy Map, to focus on what these users would Feel, Think, Say and Do. In order to dig deeper on their essential demand.
Feel:
Lonely and wanted to belong somewhere
Think:
Want to build friendship in a safe place while pursuing passion in music
Say:
"I feel lonely because I don't fit anywhere in my world"
Do:
If it isn't intuitive or easy, I'll give up
Tend to observe passively for a while before engaging in the online community
After reviewing our key insights, we dived right into Hifi Designs to incorporate what we found from the first round of usability testing. Also, we created Prototype and prepared to take another round of usability test to validate Hifi Designs.
Based on the user feedback, we made iteration to our wireframes and then created Hifi screens and prototypes.
Iteration - Added Purchased Tickets on Home Page
Based on the pain points learned from the Lofi prototype usability tests, users feel the original path to check their purchased tickets is way too complicated (was under Account - My Ticket). Therefore, we iterated our design and made the purchased tickets appear on the Home page,beore showing the promotional banner.
Based on the information gathered from the Affinity Map, we generated the Empathy Map, to focus on what these users would Feel, Think, Say and Do. In order to dig deeper on their essential demand.
1. Knowing their friends' active status is important to engage them join in the concert.
2. User would like to unify the payment option (coins vs. money)
3. Being able to chat with friends privately is important to keep the experience personal.
4. The ability to visually see the process of Avatar customization can help users making decision.
Stakeholder shared an information with us that "getting a phone address book is the No.1 growth hack for mobile app user acquisitions". Therefore, we added the option to invite friends to the app by allowing the access phone contact book in the onboarding process.
As we figured the Avatar Customization is essential to make users feel connected, we brought up more options for customization. Allowing photo upload to help the algorithm being more accurate with further development.
As the user found the payment option with money and coins were confused, unify the payment in the ecosystem is important. Therefore, we decided to unify the currency to coins in the app and set up a category just for exchanging coins.
1.Full customization for the in-concert layout
Users can customize their board by moving the icons around, to fit their habits.
2. Private Chat vs. Public Chat
Users have the option to switch between private chat and public chat. The color change indicate the chatting mode to prevent users making mistakes.
3. Share location
User can share their location and invite their friends travel over to meet up with them. It opens the opportunity for Anifie to discover more friendship engagement activities.
4. Avatar Customization
Users can choose accessories and moves for their avatar, the change can be adapted immediately to help them making decision.
Website / iOS / Android
Enable sending and requesting e-Transfers via SMS. Adding new features to existing flows.
Responsive Website
Utilize the cart summary page for Residential service, enable the ability for upsell and cross-sell.
IOS & Android APP, Website
Utilize to help users understand the membership benefits and boost sales.
.png)
