This challenge of this project was provided by an industry client, VoNo. The client would like to improve the UI/UX of the app and improve the visual style. These include an updated version of the home screen (which includes the four ‘memo’ functionalities) and improved memo sending flow. The home screen should be intuitive and reflect the needs of the user. The process of sending memos should be fast and allow the user to easily select the desired email address(es).
The design process initiated with user research and user statistics data provided by the client, which added value from the perspective of end-users. I then began constructing user stories and user flows based on the design requirements that had been generated. The design went through two iterations, with the first version wireframe being evaluated with the target groups via interviews, and the second clickable prototype evaluated with the establishment of the UI library. Finally, I conducted remote usability testing using the online tools-userberry, in which participants completed the tasks in order to complete the entire user journey. UX criteria were evaluated on both the emerged new features/functionalities and the current app in terms of users satisfaction, design effectiveness and accessibility, navigation flow. Data analysis was carried out using both qualitative and quantitative methods.
| Time frame: | 11/10-11/17.2021 |
| Client: | VoNo |
| Role: | UXUI Designer |
| Techniques/Tools: | User research, wireframing, UI library, Figma(clickable prototyping), Userberry (usability testing) |
| Share: |
3+participants were recruited to have the first use of the existed app. They were asked to install the app and answered some questions. These insights were converted to a Persona.
A Persona was then created to identify various potentially relevant elements/thoughts from the target user's point of view. This was then combined with user statistics data and the client's request to produce design requirements. The design activities then progressed to the structuring of the potential user flow on the app solutions.
User data exploration
User research flow
The visual style corelates to the delivered branding identity. From the radar chart, we can see that, for instance, the accessibility using on the mobile apps in most compatitors can still with big room be improved. Whereas, the client's app provide a rather handy way to memo using the mobile app. Furthermore, most applications branding values can be reflected nicely on their products. The branding's identity, nevertheless, is not very obvious reflected on the client(vono)'s product.
Benchmarks on the competitors on the target features and functionaliies; Plotted a radar chart analysis the functionalities on 5 dimensions, specifically focusing on the scenario of using mobile app.
I then sketched the wireframe and evaluated it with the target groups to gain a first understanding of user opinions.
Following that, I created a series of UI libraries to be used in the following high-fedality prototype, which I integrated with the client's branding vision.
A final design structure was then created to integrate the elements of client requirement & UX flow (mutiple improved elements and new features). The link for clickable prototype can be accessed from HERE
Key interface structure
The usability test with 10+ focused participants were conducted remotely. This test could be accessed from HERE. Participants were gone through 6 tasks with new version app first online (shown in below figure). They then were asked to install the already-used vono app to perform 2 same tasks (Task B, Taks C). There were usability questions and Likert scales asked in between. Eventually, questions to compare the two versions of apps were asked.
Remote usability testing flow and data analysis
High-fidelity prototype& Challenge organization
Challenge A & B
Challenge C & D
Challenge E
Challenge F
