Gamify Your Learning through this Website
Timeline: Dec 2020-Feb 2021
Project: Team
Responsibilities: Market research & analysis, User research (survey, testing), Wireframing, Prototyping, Animation
Context
The 4D portal is a one-stop website for all things 4D-related. The 4D framework is DBS’s main problem-solving framework and is short for, Discover, Define, Develop, and Deliver. DBS uses this framework to solve the biggest challenges as well as day-to-day issues it may have.
We are to create the ideal user experience of a design-thinking website for DBS. The website includes an overview of the 4D framework, a repository of tools, methods, and available training that people can reference, to help them in their day-to-day work.
Problem
DBS’s original 4D learning website faced low re-engagement and low awareness. Users were unsure of which tool or method to use to apply their work problems.
​
Statement Starter:
How might we create an engaging website that ensures users are clear on how to use the 4D framework and which method to use?
Research Insights
Through our research, we found out the importance of progression and leveling up in games. It gives a sense of accomplishment to the users and encourages them to come back and play. Not only that, the animation and graphics play a big part to grab attention.
Goal
To re-engage DBS staff to learn the 4D framework using game elements in the website.
Solution
Through speech bubble conversation, the mascot guides the user. The 4D island shows the progress in learning the methods through the graphics of the trees and the island growing with animals and flowers after they do the Quest. In Missions, users can set up teams with their colleagues or other staff to solve problems together. This is where they apply what they have learned in the 4D island.
Process
Design tools used:
​
-
Persona Profile
-
Journey Map
-
Survey
-
User Testing
-
Wireframing
-
Digital Prototype
Market Research
As a group, we personally tested gamified apps and also analyzed good website. We learnt how gaming elements keep users coming back to an app and how we could make learning exciting and fun.
Persona Profile
Banking Consultant
Benjamin is a young bird in DBS (25-35 years old), with 3 years of experience. He hopes that the 4D framework can help him to solve problems more creatively.
I have heard about the 4D framework but don’t know much. I am open to learning more about it if it will really help me in my everyday work life.
Sketches
User Feedback
To understand users' preferences, we did a survey to get a sense of the graphic style that they like. We also showed them a very rough wireframing using google slides and took in their suggestions for further improvement.
Low-fidelity prototype
First round of iteration
.png)
and more...
Second round of iteration
.png)
and more...
Before & After
Above are the main design changes from the mid-fidelity prototype to the final prototype.
Final Design
After taking in feedback from both clients and users and after many iterations, we have the high-res prototype.
What I did (more specifically)
I animated the clouds to move and unveil the 4D island in Adobe XD.
I added interactivity by doing the motion design in XD. When users hover over each part of the island, they can explore and read the description of each part.
I translated the idea into a working prototype.
Adding to the interface design, I animated the "bounciness" of the island and the effects when the elements appear.
Overall, my role was to do the prototype in XD, linking of screens, and color-picking.
Reflection Journal
What I Learned
💡Translating an idea into design
I learnt how to make animation and transitions using the tools in XD. It took a lot of figuring out as I was still new to XD but with many tries and perseverance, I was able to do the animations (zooming in) as I had imagined.
​
Looking back, it was actually very enjoyable to learn doing different animation effects in XD and it is super satisfying seeing the results.
Splitting roles based on strength and interest
I found that it was a really enriching project as we ended up focusing on an area where our strength lies (UI or UX). I thoroughly enjoyed the motion design aspect and doing the transition effects. However, I also want to explore the area of UX that requires more structural thinking, empathizing, and understanding the user.
What I Can Do Better in the Future
UI Design - Layout, colors
We did not have a defined style or direction for the UI, so it did not look cohesive and aesthetic. When I’m working on UI design, I can look at good UI websites, take inspiration, and create a style guide that is suitable for our target audience.
There could be more obvious distinctions between the 4 parts of the island and the progress bar could be larger.