UX/UI & Graphic Design
UX/UI & Graphic Design
Selected Work on Design Projects:
Selected Work on Design Projects:
VUSEUM
APP DESIGN
Client: Course Project
Timeline: October - December 2020
Keywords: app design, UX design, UI design, interaction design, product concept
Tools: Adobe XD, Figma, Sketch, Invision Studio, Photoshop, Mural, SurveyMonkey, Google Forms, etc.
I. DEFINE THE PROBLEM
PROBLEM STATEMENT
During the Covid-19 quarantine, people have difficulty going outside, traveling abroad, and visiting beautiful museums in person. As shown by the Google Map screenshots on the left, most museums have been closed due to the stay-at-home order.
Therefore, I plan to conceptualize and prototype a virtual museum mobile app - a digital platform that hosts various virtual tours for famous museums all over the world. My app will enable the users to pick whatever museum they like – art, culture, science, natural history, etc. - and start a fantastic virtual experience with only one click on the app.
II. RESEARCH THE PROBLEM
Your interest in a virtual museum app?
The highest amount you are willing to pay for a VR museum tour?
PRELIMINARY RESEARCH: USER SURVEY
Based on the above problem statement, I wrote my user survey research plan and designed a survey using Google Forms. I distributed the survey online and collected people's responses so as to know more about their interest in a virtual museum app.
What would be your goal when using a virtual museum app?
What features of the app would you find useful?
CONCEPT MODEL OF USERS NEEDS
Based on the above survey results and my interviews with several acquaintances, I drew a concept model to visualize the user needs in a clearer way. The user needs are fourfold:
1) to look for something entertaining to do during the quarantine life
2) to support those museums now in crisis due to pandemic losses
3) to educate kids or learn new knowledge
4) to try out new VR technologies
USER JOURNEY MAP BASED ON USER PERSONA
In order to further narrow down the scale of this project, I chose to focus on one individual user persona in the discovery stage of my design: frequent museum-goers who love art and who would like to find an alternative for experiencing art during their quarantine life. According to their needs and frustrations, I provided a visual representation of the process a persona goes through in order to accomplish their goal. Meanwhile, I also identified their emotions, thoughts, pain-points, and opportunities in each phase of the journey.
USER FLOWS
Before building out the app's design, another thing I did in the research validation stage was to hash out the step-by-step user flows using wireflows and screenflows. This approach helped me generate some preliminary ideas as to what the app’s users are trying to achieve, how they go about achieving it, and how effective they are in achieving their goals. I could also catch some broken features or missing components before going into too much detail of the interaction design.
III. PROTOTYPE THE SOLUTION
PAPER PROTOTYPE
Entering the prototyping stage, the first thing I did was to paper prototype the various interactions I aimed to achieve and then tested my design with real users. Paper prototypes are fast, flexible and easy to manipulate on the fly. With only basic toolsets including pen, paper, post-its and so on, I can create a few different versions of a design within minutes. I can even modify a paper prototype in real-time of a test session, which digital prototypes might not be suited for.
DIGITAL PROTOTYPE
After validating my interaction design using paper prototyping, I went on to complete the digital prototype using design software such as Figma, Invision Studio and Photoshop. The user flows covered in this prototype are: explore options --> add items to cart --> pay for items --> start the virtual tour.
Also, thanks to the screenflows I had completed earlier, I quickly figured out the app's color palette, which helped me maintain a consistent style in my visual design.
IV. TEST THE SOLUTION
USABILITY TESTING
Research method: remote moderated usability testing via Zoom (The participants shared their desktop screens while working on the tasks.)
Probing technique: concurrently think aloud while working on the tasks + survey questions + retrospective verbal probing in the debriefing interview
Participants: 5 potential target users of the Vuseum app. They are smartphone users who went to museums at least once a year before the pandemic and who are interested in downloading and trying a virtual tour inside a museum during the quarantine.
Key usability questions:
1.Would the users find the virtual tour interface's design appealing to them?
2.Are there any design inconsistencies within the user interface and content areas? (E.g. navigation errors, presentation errors, and control usage problems)
3.In the virtual tour part, would a 3D map be useful for guiding the user through their exploration?
4.What are the usability problem areas in the entire user journey?
5.What features or functions are missing from the user journey?
USABILITY TESTING RESULTS
What went well?
1. The app's overall satisfaction rating was high.
2. The app's visual design was appealing.
3. Users found the app's information architecture easy to navigate.
4. The virtual tour part was engaging and comprehensible.
5. The 3D map was immersive and effective.
6. The payment process was straightforward and easy.
What didn't go well?
1.The interaction trigger of the discover section on the homepage was not intuitive.
2. The grey VR device icon on the museum page confused some participants.
3. The wordings of several rated features on the review page were confusing to some participants.
4. Some participants had difficulty distinguishing between the "continue shopping" button and the "proceed to checkout" button on the payment page at the first sight.
5. The left-sided purple icons on the virtual museum interface were not clear enough against the background; the map icon did not seem intuitive to some users.
6. Users wanted to know their current location in the virtual tour.
ACTION ITEMS
V. CONCLUSION
CONCEPT VIDEO OF THE VUSEUM APP
REFLECTIONS & FUTURE IMPROVEMENTS
1. In the pre-design research stage of my future projects, I would like to make use of more user research methods (such as user survey, interviewing, field observation, etc.) to collect more useful information about the product and its potential market.
2. The user journey map is extremely helpful in prioritizing decisions throughout a product's lifecycle and identifying where I can fill gaps in unmet customer needs. In future projects, if time allows, I would like to come up with various types of user personas and then figure out their respective user journeys.
3. In the prototyping stage, I should have designed multiple versions of ideations and then decided on the optimal design plan by conducting more user research.
4. The usability testing sessions worked out quite well. For the next steps, I would like to conduct multiple rounds of iterative usability testing and then keep improving the digital prototype of the Vuseum app.
