.png)
Leading our team in the first 3D interactive project
Tool
Figma
Keynote
Notion
Excel
Company
Cathaylife
Role
Project manager,
UX designer
Duration
2023 - 7 months
Challenge
This was our team's first 3D interactive project. It was challenging since we had no examples to follow for the design, building, or planning. As a new member, my main job was giving the team enough time and help. This was hard without having things we could copy.
Outcome
The outcome of this project consists of the RWD website development for the client.
About the project
Cathaylife organized a competition inviting multiple teams to present their ideas for their corporate sustainability website revamp.
I am pleased to inform you that our idea and design won the competition, and we have been given the opportunity to bring our design to life through this project.
Strategy
Real
Friendly
Information flow is friendly to different stakeholders and users
Highlight the client's CS efforts
Display our innovation and creative power both to the client and ourselves
Innovative
Outcome preview and features highlight
1. Interactive 3Dplayground
Design a 3D playground to enhance the inactivation between users.
Strategy & Ideation
1. Know our users
For our strategic planning, we care about the users of this website which includes both the general public in large numbers and internal employees. Compared to judges or reviewers, what these broader user groups need is more concise, substantial content.
Identify the scope
-
Kick-off meeting
-
Time Roadmap
Design & Development
-
Features of website
-
Project stories
Strategy & Ideation
-
Know our users & trend
-
Site map
-
Wireframing idea
3. Main user flow goal
Providing multiple entrances for different types of users aims to keep them exploring the website. This encourages users to stay longer, as they are more likely to find what they were looking for.
5. Defining ingredients and structure
Building the low-fidelity wireframe to check the content and layout with the team.
.png)
Identify the scope
“Before offering comprehensive, sustainable information, how might we provide users with an accessible, easily understandable experience that leaves a positive impression?”
1. Kick-off meeting
Narrow down the scope: Building the site map to have discussions with stakeholders on the product scope and which features should be built first, also helps to check if the hierarchy of the menu items makes sense and if the parts are grouped properly and are easy to navigate through.
Collaboration: to know the workflow between with client, such as how long the sign-off for the visual and the feature internal.
4. Site map
Building the site map to have discussions with stakeholders on which features should be built first, also helps to check if the hierarchy of the menu items makes sense and if the parts are grouped properly and are easy to navigate through.
2. Time Roadmap
To align the delivery stage meets expectations and is appropriate for our development team.
Design a Cathay Sustainable World
In the interaction concept, we came up with the idea of a Cathay sustainable world in which users can walk around the Cathay tree and explore and learn about different topics. The four topic marks are related to climate, health, empowerment, and governance. The walking character also indicates the high influence walking campaign in Cathaylife.
1. Features of website
To communicate the final designs with stakeholders and developers, UI mockups were built in Figma. It helped to convey the flow of several features.
2. How our team collaborate
-
Early interactive development testing to confirm viability
-
Hold regular catch-up meetings to make sure every team member's problems are solved.
Design & Development
Explore other works
A selection of UX and UI projects.
.png)
2. Display consistency in both bilingual interface
Aim for an inclusive interface that tolerates bilingual preferences.
3. Easy to find the information for every user
Everyone can easily engage on CS with neat and simple content; investors and professional assessors can also quickly direct to comprehensive report.
.png)
3. Project story-Timeline for team
Lacking large and 3D project experience, our team was unsure how to coordinate detailed tasks. To kickstart progress, I collaborated with the main designer to map out design stages on paper first.
After testing this approach for several weeks, and finding the cadence for both internal collaboration and client cooperation, I digitized this timeline. Although the initial paper-heavy approach was wasteful, having such a visually clear method was tremendously helpful given the ambiguous circumstances.
2. Know CS trends
In analyzing corporate sustainability efforts, I looked at brands in the same industry as our client as well as some prominent international companies. I found that most companies prioritize lofty slogans over concrete actions on their sustainability websites. The information is generally presented through dense blocks of text that are difficult to digest. As a result, it is challenging for users and stakeholders to quickly grasp each company's actual contributions to sustainability.
Takeaways
-
Built up a regular catch-up culture which allows me can gather team members to follow up on the project issues and quickly help everyone come up with the solutions to make the project go well.
-
Think in multiple situations when in the early phase of design: Also consider future updating situations such as updating content, extension pages, and displaying seasonal content.