Shixi Zhang
UX designer
Magic Vision
Overview
An augmented reality (AR) product that helps users virtually place 3D artifact models in their own place. By using a target picture, users will see an AR effect of The Pyramid on the picture and be able to move or rotate it to any angle.
Skills: Interaction Design, User Research, Usability Testing, Visual Design, AR
Tools: Unity, Adobe Photoshop, Illustrator, Visual Studio Code
Platform: iOS & Android
Final AR product video
Final Screenshots
Background & Inspiration
People are not able to see the landmarks like The Pyramid, the Leaning Tower of Pisa, and more in real life unless they travel there.
Moreover, people are more likely to see landmarks to a certain standard degree in pictures and in popular presses. Thus, people may have limited perspectives from narrow angles.
The Pyramid
Look it up from a perspective
Look it down from top
In pyramids, generally speaking, the base is a regular polygon such as an equilateral triangle. The shape allows for a stable foundation for such a large structure.
From the top of its head, it can be described as a quadrangular pyramid. Though the shape of the base is rectangular, the sides of all pyramids are in a triangular shape.
Thinkings
What if traditional cultural relics and new technologies like Augmented Reality Technology (AR) are combined? Will people be able to virtually place true-to-scale 3D models in their very own space?
The Goal
​
My goal is to create an accessible experience that fosters a more informed view of AR’s potential impact(s). I wanted this experience to be a thought-provoking process, and hope that people who come out of this experience:
1. Are NOT limited to 2D or a few angles when viewing artifacts and cultural relics at home
2. Have different perspectives on viewing things
3. Have a better understanding of AR products
User flow
​
Wireframe Draft
Search Page
More details
Scan picture
Drag-and-zoom
View designer's thought
At another degree
View designer's thought #2
Paper prototyping
The paper prototyping test helped me fix the user flow and make improvements on certain pages. After doing it, I will know what the users want and need.
Improvements
Create a question page for users with further instructions
Use more icons and make the pages less wordy
Remove words like “Reset” and “0 degree rotated”
Use a target picture for scanning and upload the pyramid on it
High fidelity wireframes
I made the UI and put the AR model of The Pyramid in Unity. After the wireframes were done, I decided to do the user test again for further improvements. Four people participated in the test and I recorded it into two videos.
User test video
​
Improvements #2
​
Make the background of the Designers’ thought section whiter so that the users are easier to see it.
The top icon buttons are too crowded. Placing some of them on the left-hand side would help.
While the Designers’ thought section pops up, make other icons and yellow spots disappear in order to avoid interferences of reading.
Major lessons and takeaways from the development process
1. Prepare an easy-to-scan target picture
Realizing a good target picture for users is an essential thing to prepare before the user tests. Failing to scan the model based on the target picture may make users impatient with the app and ruin their experience. Testing the picture beforehand helps.
​
​
.png)
I tried three different versions of the target picture and the last one worked the best (with more colors on it).
2. Involve a tutorial session or question page
I learned that don’t suggest and design the app like the users know everything. A few of my users have never used AR apps before. Thus, I added a question page for the product. Offering proper and simple explanations boost their confidence in using new technology app and benefits the whole technology market as well.