INSTRUCTIONS
PROJECT 2 - UI/UX Design Document
After locking down our app concept and idea, we are ready to proceed with the UX design. We are required to produce a comprehensive UX design document to provide better directions to design the app.
Purpose & Scope
The purpose of this document is to outline the UI/UX design process and collecting insight to improve the mobile Steam Application. It covers the aspect of User Interface (UI) and User Experience (UX) design, collecting information from users, understanding the users, and identifying the MVP features to ensure that the app satisfies the targeted user while also being user-friendly.
Target Audience
Steam is a platform that allows users to discover and purchase games, the target audiences are teens or young adults aged from 17 to 24 years old. They can both be hardcore gamers or casual gamers who just want to find games that suit them.
Weakness of the Steam App
Confusing and Boring Visual Design
- The colour and design are not unique nor stands out to the user’s first impression.
- Sections in the app looks the same back to back which confuses the user on whether or not they had already seen it.
- Due to the way the games are presented, its cluttered and eye straining for the user’s eyes.
Unpleasant and Confusing Layout
- The layout are too cluttered together and is all over the place.
- The size are not measured to fit the small mobile screen which makes them look too big along with the buttons.
- Many features are hidden behind dropdown buttons that doesn’t clearly states its function.
Hard to Navigate
- Due to the poor visuals and layout, user get confuse and have a hard time navigating.
- Main issue is the lack of accurate and clear label/icon that the user understands.
- If the user is able the navigate through, the functionality of the app is still decent and a straightforward process.
Survey Questionnaires
The question asked in the survey is to collect feedback and insight from the user using the Steam App to potentially enhance their experience with the app. The questions encourages the user participants to provide their experience. Feedback and insight collected will be helpful for the later steps of the journey.
Section A: Demographic Profile
Section B: Usage & Preference
Section C: Application Design, Usability & Functionality
Section D: User’s General Experience with Steam
Click HERE to view the Survey.
Interview
We are required to interview 3 people who use the app and ask them questions related to help us with our final project with the insight we get.
Click HERE to see the folder containing the interviews
Research Insights
Based on the interview I had sum up the common comments that they have.
Visual
- From them they all mention that the design is boring.
- Layout is messy and cluttered.
- Icons are too big.
- Sections look the same with everything else.
- Pictures for the games are good and to expect in the game.
Navigation
- They had a hard time with the the drop down buttons due to them not specified clearly.
- The feature are not presented to them directly.
- Can’t tell where are they looking because everything looks the same.
- Not so user friendly especially to new users.
Functionality
- The app does get the job done for helping user to discover and get games wherever they are.
- Process is simple and straightforward, didn’t encounter much problem.
Overall Experience
- It is manageable.
- They would not stay on the app long to discover games.
- Would only use the app when they already have a game they want in mind.
User Persona
With the Survey and Interview we did we have to create 3 User Persona based on the insight we obtained.
Card Sorting
In order to get more information from user’s experience to create the information architecture of Steam App, a hybrid card sorting method is used.
There are 20 card with the content elements and the participant have to drag each one of the cards into one of the 6 categories that they think the contents belongs to. They also have the option to create their own categories if they find it more suitable.
Standardisation Grid
This shows the summary of the cards sorted into the categories.
The table shows the number of times the card was sorted into the corresponding standardised category. This allow us to easily see where a card is sorted by majority of the participants.
Information Architecture Map
From the result of the Card Sorting, this Information Architecture Map is made of how the user perceive and categories each features. This will be helpful when creating the User Flowchart later.
Though due to the limit amount of cards that are free to put in UXtweak, the result is also not as precise as I wanted.
Categories like Expense and Library had been put under Profile due to them having very few feature sorted and it is the most suitable category to be under.
Some tweaking with the categories and feature will be made for the final prototype.
Click HERE to view the Information Architecture Map on MIRO.
User Journey Map
Click HERE to view the User Journey Map on MIRO.
User Flowchart
Click HERE to view the User Flowchart on MIRO.
MVP Features
FINAL PRESENTATION