Application Design 1 - Project 2: UI/UX Document
23.09.2024 - 18.10.2024 / Week 1 - Week 4
Teo Mei Hui / 0358315
Application Design 1 / Bachelors of Design (Honors) in Creative Media / Taylor's University
Project 2: UI/UX Document
CONTENTS
INSTRUCTIONS
TASK
Project 2: UI/UX Document
After we decide on our app concept and idea, we are required to create a
UI/UX Document that will provide us a better direction to proceed with
redesign of the application.
The document should include:
Introduction
- Purpose and Scope: Explain the purpose of the document and what it covers.
- Target Audience: Identify the intended users of the app.
- Problem Statement: Describe the problem the app aims to solve.
- Weakness of the apps: User experience and user interface.
User Research
- Survey Questionnaire and Interview: Provide detailed analysis.
- User Persona: Include detailed personas representing the target users.
- User Journey Map: Provide a map outlining the steps users will take while interacting with the app.
- Research Insights: Explain how user research influenced design decisions.
Information Architecture
- Card Sorting Method: Explain the card sorting process used to organize content and its outcomes.
- Information architecture map: Outline the main content and features of the app.
User Flow
- User Flow Chart: Describe how content will be structured for optimal usability.
- MVP (Minimum Viable Product) Features
- Feature List: Detail all app features.
- MVP Identification: Identify and highlight the features that will be included in the MVP for initial development.
Class Group Activities
Week 5: Group Activity - Card Sorting
During class, we were tasked to perform card sorting in groups of 3-4. We were given features to a travel planning app, and we wrote them down in sticky notes to work as cards. Then, we had to sort them into categories that we thought made the most sense. Additionally, we also had to add "wild cards", which means coming up with extra features for the app. We discussed a lot on how the sorting and categories would make most sense, and we changed it up many times before finalising it.
Then, we were tasked to do digital card sorting in Miro, but this time we had to come up with an app of our own. Our group decided to do a personal car app, which is a car maintenance app for people who wants to keep track of things related to their car easily.
Week 6: Presentation of Card Sorting
Each group had to present the results of both of their card sorting. Unfortunately, our other groupmates were absent on the day of presentation, so it was just the two of us. We managed to go over everything and also expressed our feedback and insights gained from this activity. For instance, I realised that there could be many ways to sort the cards as some of them can be sorted to more than one category, and the way I try to tackle this problem is by trying to pretend I'm a user of the app, in order to come up with the most optimal card sorting result.
Week 7: Group Activity - Creating User Persona
Based on our card sorting app idea, we had to create 3 user personas for the app. It was pretty fun to imagine what kind of users would use the app, and then being creative with their attitudes, goals, paint points, scenarios and quotes.
Process
Initial App Design Card Sorting
Firstly, I did card sorting following the initial app's design and features.
.jpg)
Redesigned App Card Sorting
Then, I did a new and refined version of my own by recategorizing for the bottom navigation bar, then changing a few of the card sorting. I also added new features as wild cards, which are in different color.
.jpg)
Online Survey Questionnaire & Interview Draft
Next, we had to conduct quantitative research in the form of survey questionnaires, as well as qualitative research in the form of interviews to obtain valuable feedback and insights from existing or potential users of the app. I designed the survey and interview questions by referring my analysis of Moovit in the previous task, touching on the weaknesses perceived by users and requesting feedback and suggestions on ways to improve.
Click HERE to view the survey questionnaire.
Click HERE to view the interview recordings.
User Personas
Based on the user research results, I created 3 user personas that would best represent potential users of Moovit, stating out their goals and pain points based on their characteristics and values.
.jpg)
.jpg)
.jpg)
Digital Card Sorting Activity
To understand how users would categorize the features, a digital card sorting activity was conducted on UX Tweak with 8 participants. There were a total of 20 cards representing the features in Moovit, and participants were tasked to sort them into 5 categories in ways that made sense to them. The insights gathered is beneficial in building the most optimal information architecture for the app.
.jpg)
.png)
Information Architecture Map
Based on the results obtained from the digital card sorting activity and my own version of card sorting for Moovit, I came up with the information architecture map.
Click HERE to view the full information architecture map.
User Journey Map
Then, I created a user journey map based on the phases/steps they would go through when generally using Moovit to complete the task of searching for directions of a journey. I also touched on their needs and pain points of each phase, as well as the emotions they would experience. Lastly I listed down the touch points of each phase.
User Flow Chart
The user flow chart was then created. This chart envisions the flow of how users would engage with different features of Moovit, and visualises how one feature leads to another.
Final UI/UX Document
UI/UX Document
by TEO MEI HUI
Presentation
FEEDBACK
Week 7
Specific Feedback
The card sorting I showed is for the initial app, which is not what Mr. Zeon wanted to see, he wanted to see the redesigned version.
Week 10
Specific Feedback
Mr. Zeon said that my survey questionnaire and interview questions are okay, but I need to add pictures and better descriptions to my survey form.
Week 11
Specific Feedback
Mr. Zeon checked my information architecture map and user flow chart, there were no errors identified.
.jpeg)
Comments
Post a Comment