As part of our course's final deliverables, my team and I want to encourage more assistance for exchange students/visitors to better understand the laws in Hong Kong, to avoid misunderstanding of laws in their country and Hong Kong.
I was the only designer on the team with 2 business operations, 2 tech developers, and 2 business analysts. I was responsible for working on the product design as well as the UI/UX of the website. Here are some key highlights of this project:
Implement ideas and research to input into our process. I was able to apply our meeting about design systems and processes, to identify our project needs, make ideation, create a prototype/solution, and create a final product.
Idea executed in a short period. We are grateful that our tech development team can execute the making of a quiz and hangman game in such a short period. This shows our great collaboration between design and tech developers.
Collaboration across students from different faculties. This is a collaboration between Law, Fintech, and Design students at HKU. I am glad that each of us was able to learn from each other’s expertise. Everyone took their part and contributed to making this website into something great.
I hosted a brainstorming session with the team to uncover problems that need to be dealt with for users. It was revealed that:
There was an incident involving jaywalking and the exchange student was unaware of the laws and got pulled over and fined by the police.
Exchange students/travellers wanted to know more laws about certain places, but do not know where to begin
Exchange students/travellers will become more aware of the laws if given the knowledge to them before their trip here.
Product vision & solution
After these findings, we decided to identify the website goals:
Address the specific needs of incoming international and exchange students by providing relevant and up-to-date legal information. Focus on the differences in local laws to help students navigate their new environment effectively.
Conduct thorough research on local laws and collaborate with legal experts to ensure the accuracy of information. Develop an intuitive and visually appealing platform/channel that is accessible across various devices and easy to navigate.
Develop a user-friendly and engaging platform/channel that provides accurate and concise legal information about the local laws of individual countries to incoming international and exchange students.
Before designing the website, the business development team and I did market research for potential competitors in Hong Kong such as Student Legal Service (SLS) by HKU, Hong Kong Legal Information Institute (HKLII), Hong Kong Government Legal Aid Department. After gathering research, we then did a SWOT analysis based on our idea, and try to differentiate ourselves from the competitors, and determined our User base and engagement.
To differentiate ExpLaw HK from established social media platforms, emphasize the specific value proposition of providing accurate and concise legal information for incoming international and exchange students. Ensure that the platform's interface, user experience, and content presentation align with their needs and preferences. By specifically targeting incoming international and exchange students, ExpLaw HK can provide tailored legal information that addresses their unique challenges and concerns. This targeted approach can differentiate ExpLaw HK from general-purpose social media platforms.
The website encompasses legal information from five categories relevant to our target audience and, through the use of two games, leads users to learn about the law innovatively and engagingly. Despite this, the information generated is accurate and concise, to not overwhelm the user, whilst getting the necessary information and points across.
After setting up our goals, our product vision got together quickly with the following functionalities.
Our goal. Users can define environmental goals e.g. to save electricity, conserve water, reduce waste.
Laws and games. The website encompasses legal information from five categories relevant to our target audience and, through the use of two games.
Straight-forward and impactful. Despite this, the information generated is accurate and concise, to not overwhelm the user, whilst getting the necessary information and points across.
This allow users to enjoy and being carefree during their trip in Hong Kong, while reading and understanding the laws.
In order to fully make a functional website and games for the techd development team to make the games and quiz possible, I mocked up a prototype on Figma based off the sketches created by me. Here are the pages listed during the sketch:
Landing page
Learn more
Internships
LGBTQ rights
Bodily rights
Miscellaneous
Police powers
Hangman
Quiz
About us
Designs
Before creating the prototype and the UI for the website, I have created a design system based on what the pages and the overall website look like. I opted for a more simplistic navy blue look, with slight pop art showing the vibrance of Hong Kong.
Landing Page
This showcases the overall content of the website in summary, and a button to get started to learn.
Learn more
It allows users to choose the topic to learn first, which different pages contain specific catagorized laws to refer to.
Hangman & quiz
These two games are coded by our tech development team, for testing users' knowledge referring to the laws provided on our page. The Q&A questions fed into the system are made by us.
After prototyping, I used Framer to implement our website. The website is created manually instead of using the Figma plugin, as animations are slightly different than the prototyped MVP. It is accessible online, on desktops, tablets as well as phones.
Our team was able to finish the website, implement most of the UI intended from the prototype, and deliver a presentation at the end of the semester. We are glad this project was recognized by our professor Brian Tang.
I believe this project is always crucial in bringing exchange students and local students together. With half of our team being exchange students, this is a great project that gained insight from actual users, as well as people who study in different faculties.
1
Design thinking and preparation bring great designs.
With short period of time, without our design thinking workshops, it would be impossible for us to carry out this design in a month only during lecture time. We are thankful that we have hosted those sessions.
2
Collaboration with possible users.
After finishing the webiste, we should receive more feedback from actual exchange/visitors to try this app for gaining constructive feedback.
3
Importance of user experience.
User experience is definitely the post important part of design, with better research and user personas, it defintely builds much more to a sucessful project.
