About the Project
I joined Disney Parks and Resorts Online(Digital) as an Interaction/UX Design Intern for 6 month. I spent majority of my time working on this project.
It’s a cross-platform redesign covering app, web and mobile web. Refining the UI animation while we iterate through mockups is the most intriguing thing for me.
The project is currently under NDA.
Role and Responsibilities
This is a team project with UX and UI designers while we keep stakeholders in a close loop.
My responsibilities:
Prototyping, Motion/Animation studies and Wireframing.
PROCESS
- Brainstorming & idea solidifying:
We initially got a vague idea from our business stakeholder and they haven’t really flesh it out yet. So we’re exploring ideas with our business partner at this phase. - Wireframing concepts:
Based on our existing knowledge and user scenario, we came up with 3 different concepts. Two of them are based on two most common mental models while the other is more flexible to future business requirements and changes. - Mobile app prototyping phase 1:
Have the utilizing reusable components idea in mind, we start Axure prototyping on concept 2 and made each component reusable and value dynamic and adjustable. - Prototyping phase 2:
After we finished concept 2, we applied those components to the rest of the concepts and made a total of 6 usability test-ready axure prototypes with authentic motion. - Usability test:
There were 2 series of 2-day on-site usability test. All the hard work on making the prototype as flexible and adjustable as possible paid off as we were refining concepts with issues found on the first day for the 2nd day test. We finally found the modified concept 2 as our direction to go. - Core component visual design:
As we finally got what users’ mental models are. There’s still one component that is visually/mentally cluttered so we partnered with UI designers, iterated several times and eventually got it. - Apply concept 2 to Web and mobile web.
This reveals a whole new challenge for us since we’re tasked to apply not only the concept but also the interaction pattern as well as new visual appearance from mobile app to web and mobile web. We explored 3 different versions for 3 degrees of transformation and agreed on the hybrid version. - Web motion study:
On this hybrid version, we introduced a new way of interacting and proceeding with product selection/checkout flow that relies heavily on the motion/animation. So we partnered with UI designers, iterate on several interactive mockups to fine-tune the animation hierarchy, how it feels, the timing, the easing etc. Several issues are revealed and solved during this process. - Tech hand off:
We made a set of interactive mockups with animation specs along with docs and redline to them to really give them a comprehensive understanding of our expectation on the final production.