Heading 6
Heading 6
zCentral:
a platform for 600+ zSpace AR/VR applications searching, browsing and launching
Project Type Product Design
Role Full Stack
Team Product Manager, Business Stakeholders, Engineer Team, QA Team
Date Dec, 2018 - Sep, 2019
Tool Sketch, Invision, After Effects, Photoshop, Illustrator, Hand Drawing
Original Design
Product Goal
-
A big challenge to well organized all over 600 application from in-house creation and 3rd parter provider
-
Encourage user to search, browse and launch the app through the platform and provide more opportunities to find out our new app products related. In order to increase software product sales.
-
Increase end users satisfaction rate
In order to communicate the value of zCentral, I started the project with user interview.
The 1st question,
Who's our target user?
Interview & Persona
Group Number
7 groups user
3-5 internal experts each group
for 1on1 interview
.png)
User Type
Teacher in US
Student in US
School Admin
School IT
Service Provider
Sales
Customer Support
Interview Question Design
The interview questions design into 3 parts:
1. User personal information & preferences
2. User growth curve & journey
3. User experience: Pain points, needs & likeness
From the user interview, I have created 3-page user persona
Persona Page 1
Persona Page 2
Persona Page 3
User general personal information
& preference
User journey & growth curve
User experience:
- Pain points
- User needs
- likeness
Jane
Female, 34 years old. Hobby in cooking, reading and sharing time with family. 5 years experience as science teacher for 3,4 grade class student in Washington Elementary School
She finds that as the teaching content deepened and boring, lower grade students could not continuously focus on the entire class. Students lack traditional teaching methods. She hopes to be able to have some high-tech with courses to help students interested in sciences and improve teaching efficiency.
Since zSpace have been introduced into the science class and this class is very popular with students now. Obviously, the zSpace lab class once a week cannot meet the needs of the students, and my operation is not very proficient either. The class time each week becomes particularly valuable.
After the user learning, I have concluded different types of the user goal and their pain points
User Goal
-
Quick find out the target app (All users)
-
Speed up the class (Teacher & Student)
-
Preparing the activity information before the class
-
Presenting related activities, creating more usabilities
Pain Points
-
"I can not find the application I have typed, searched" (All users)
Context: zSpace owns 600+ applications
-
Mistyping reduces efficiency in finding correct apps (Teacher & Student)
Context: k-12 lower grade students can not type correctly in the search bar
-
Hard to control with the zSpace AR/VR hardware-eyewear & stylus. Don't have enough time to practice (Teacher & Student)
Context: From the user learning and data driven, each school who is our user own 1 zSpace lab only. Some of schools shares 1 zSpace device with 2 students together during the class. Students have the zSpace lab class once a week. It's a limit time for teacher and students use the zSpace products.
-
Limited functionality (Internal users)
Challenge the Assumption
One of my assumption was focus on solving problem "Quick find out the target app". If the platform is able to include with account system to save user application preference, providing features like "Recently used“ “Your FAV", it also help understanding the user experience from the data.
After discussed with engineer team and product manager, the feature is valuable, but according to the bandwidth, timeline and prioritize of the user needs, more other pain points solution, the account system would not happen in the 1st launch.
But in the end, we launched the 2nd version with the account system. One of the assumption has been confirmed.
Edge Use Case Study
• Thinking about user who has color weakness, poor eyesight is able to access with activities in color information.
• When the user cannot use the stylus and mouse, the keyboard operation design
5 Main Scenarios & User Flow
I believed to list the scenarios & user flow could help the team understand the user journey and always remind myself to think back on the main problems.
• How different users looking for target applications?
• How users review the activity detail information during the class, out of the class?
• How users quick launch the application in the class
• Setting the system
• If users need help through the platform
Scenario 1. How different users looking for target app?
-
All users except student, would like to type the activity entire name or key words into search bar
-
All users except student, may also filter by category, select the target subject, and getting the correct app
-
All users, typing the quick launch code (3-4 digital numbers) for each activity, getting the target app
Scenario 2. How users review the activity information?
-
All users with account, browse detail information on website
-
All users, read general description in each tile from zCentral
-
Teacher (with account), read general description in each tile, link to the webpage to read more detail information
User (without account), read general description in each tile, click and open the tutorial video about the app
Scenario 3. How users quick launch the application in the class
-
Teacher, shows students quick launch app in the class. (writes on the white board or tell students the code)
-
Teacher, prints and prepares the worksheet with quick launch app code for each students before the class
-
All users except student, type the code into search bar. The target app show app. Launch it
-
All users, Marketing, type the code in the Quick Launch Page. The target app show app. Launch it
Scenario 4. Setting system
-
School IT, Internal, 3rd party, zCentral system version check and upgrade
-
School IT, Internal, 3rd party, App version check and upgrade
-
Global all users, Language selection
Scenario 5. If users need help through platform
-
School IT, teacher, 3rd party, Contact customer support by email or number
-
School IT, teacher, Video tutorial
-
School IT, teacher, 3rd party, Link to the website QA, help, more contact information page and professional education
The flow was design to help articulate how different users would move and throughout the zCentral and reach their coals.
After optimized the flow, remove the unnecessary steps, keep as simple as possible for user to reach the goal easily and solve problems, also easy to understand through the presentation for the team communication.
Prioritize the solution according to the team bandwidth, timeline and mostly needs from users into different versions launching
Lo-Hi Fi Wire-framing
Filter
When user arrive to the landing page, we would like to provide a filter section to select content type, and subject first, if user don't know what's the app name or want to general browse with type related application.
How I made the decision with the filter category?
Our existing users familiar with the category layout in the website already, so I have follow the same layout from the website.
Tile
It's screen includes 6-8 tiles according to filter section open or closed, as the platform is design in responsive screen.
In the 1st launch, I have focused on designing quick launch code, also with the application clickable url.
After the user feedbacks, observation and data analytics, I have learnt most of users try to click the Quick Launch Code. In the 2nd round design, I change the QLC design into clickable button style, and also keep the clickable url link as before. The new feature design to increase more usability is "Resource" and "Tutorial" button. In the 2nd round version, the team decided to include with the account system.
When user with account and log into the account, they are able to see "Resource" button. After user read the general description by hovering the tile, they may want to read more detail information. The button brings user to the website with detail app information.
When user don't have account, like student or any new business user, they are able to see "Tutorial" button. Click and pop-up a video window about the application.
Landing page
1st Phase
2nd Phase
Prototyping User Testing
How did I make the final decision on design?
I created clickable prototyping testing for internal user. For example, the tile design. The most challenge each small tile includes with 8 elements. App icon, Type name, Activity name, Quick launch code, App url link, thumbnail, description, launch button.
Who made this decision?
From the user needs, and iterated the feedbacks with different stakeholders, I have finally made the decision.
I provided 4 options, which one the user is able to find their necessary information in the tile fastest, the one is the best option. Finally we pick the A.
1st Phase
From the user observation through the testing, I also understood following.
- User don't need anything fancy, keep simple as possible
- For the 8 elements in each tile, user has the prioritize. They are Title/App icon, name/ Code
- General description is necessary, help user making sure it's a correct app before launch ( saving time)
It's also confirm one of my assumption again which I mention at the beginning.
Visual Design
After iterated the feedbacks into the design several rounds. Finally I have move to the visual design part.
I have created pixel perfect visual design according to the design system. Before the final presentation, I am used to checking with everyone in the team, to make sure again with the timeline, new features and detail. Then I managed the final presentation with the whole team, and got the approval.
After that, I exported the spec and writes the design documentation, follow up with engineer team in the daily stand up meeting, and join the QA section.
We launched!
My work hasn't finished. After the product launched, I set the data analytics in the Crazyegg and Google Analytics for 60 days.
1st Phase
2nd Phase
Filter UI Design
The most different design from 1st to 2nd is content type.
2nd check mark with higher color contrast which is friendly for user who has color weakness or poor eyesight to access.
Though each color corresponds to a different content type, the color using not the only visual means of conveying information. Check mark is the primary information, color is the secondary additional information.
1st Phase
2nd Phase
Tile UI Design
1. Hover and show Launch button > Move the Launch button to the first layer.
User hover to find necessary information not access for keyboard user.
2. Black Quick Launch Code > Stronger contrast color in white.
3. Unclickable Quick Launch Code > Clickable Quick Launch Code in button style.
4. Original color thumbnail > Added a shade layer over the thumbnail.
Made a stronger contrast for title, the primary information user want to see, the result from testing.
5. Color content type above each tile > In white, moved into each tile. Accessibility firstly, color additional information secondary.
6. When user has account to log in, the 3rd button show as Resource. user is able to link to the web page learn detail information.
When user doesn't have account like students or new user, the 3rd button show as Tutorial. Click and pop up video introduction.
When the app without a video tutorial, the 3rd button always shown as Resource, but gray out for user who doesn't have account to log in
User Feedback & Observation
After the 1st launch, I was glad to have the opportunity to meet the real users, have observation and interview to understand how our user's feedback and preference with the new products, new features.
I have spent 3-day in the school. 2-day stay with teacher and students in 5,6 grade. During the break, I had change to talk with teacher and student to ask some questions about zCentral platform. From the quick interview, I have collected new user needs, edge cases which is valuable. And also I have received high positive feedback from teacher. The new design help improving classes efficiency, speeding up classes. Greatly shorten the time to find the correct app during the classes.
The product had reached the goal.
Science lab class for 2 different grades students
1-day teacher training