CUHK EatWhat

UX Design | Front-end Development | 2022 Summer - present

The Beginning of the story

I'm BadBiscuit, a psychology student from Mainland China at The Chinese University of Hong Kong. This is my first design work. I designed and coded everything entirely independently.

It is a story that began when I was a carefree freshman. At that time, my roommate was a CS student, and I wanted to learn something, so I looked at his book Python Crash Course and learned Python. You know, programming languages are highly practical things. If you only learn them without using them for something, you'll feel uncomfortable and unsatisfied. At that time, I wanted to make something with my knowledge.

In the subsequent period, I noticed an issue. There are over thirty restaurants in our school. In the "Tree Hole" of our school - an anonymous online forum mainly used by mainland students, people frequently post inquiring about the opening hours of restaurants. Just like what is mentioned in the image above (translated version), "Is any restaurant open today?" "Is restaurant xxx open today?"

Problems

In fact, our school's official website has a page listing all the restaurants' operating hours. However, there are three main issues:

Not many people know this page.
The operating hours of the restaurants are a dense block of text. It's hard to find the information of a restaurant or determine whether a restaurant is open.
The information on this page is not updated promptly, and some short-term changes in operating hours may not be reflected here.

Additionally, there are other issues, such as people not knowing where the restaurants are located.

Based on the issues above, I determined to design and develop a program to solve them.

Empathize & Define

The problems I observed and collected from the forum are as described above. Unfortunately, at that time, I was just an innocent and naive freshman, and I did not fully understand all aspects of the UX design process, thus missing some necessary steps. If it were me now, I would first interview some students to understand their user stories and create user personas, based on which I would then define the problems. Fortunately, the final result told me that I was quite lucky, or rather my observations brought me luck, as the program I created indeed met the user's needs.

Ideate

I wanted to design a program that can solve the following problems in the following ways:

List the operating hours of on-campus restaurants in a visually easily recognizable way.
Dynamically update the opening hours through a more efficient information feedback-processing mechanism.
Provide maps with real-life route guidance to facilitate finding restaurants.

Of course, since I am both the designer and the developer, some features are not immediately easy to implement after the design, so the entire design process follows the principle of progressive enhancement: first solve the core issues for users, and then gradually add features to improve.

Sitemap

There are three main pages: Home, Food map, and Announcements. Home page has a visualized restaurant list with a restaurant details popup, a randomizer, instructions, and a Contact us popup. Food map has real-life route guidance for users who want to find a restaurant.

Initial UI Design & Wireframe

One point to note is that this wireframe was actually added later, as initially, I did not know any design tools, and I designed and debugged by writing code directly while thinking. I did not leave any physical wireframes, and initially, I even created a digital wireframe in Microsoft PowerPoint 😂

Hi-Fi Prototype

Since I am both the designer and developer, a primary version was released for running core functions. The Hi-Fi prototype was built based on the wireframe after turns of collecting users' feedback, user research, and iteration.

Final Reflection

The above is my first design work. The initial motivation for doing it was simple - I wanted to make use of what I had learned, and I wanted to create something to help others. This is a good thing, but I did lack a lot of necessary knowledge. Looking back on this process after undergoing professional learning, I can see how naive I was. Fortunately, the result was good. It is user-friendly and has accumulated 32,000+ users to date. Word of mouth about this program among new students continues to help more people.

It also has many flaws such as color schemes and functionality. Additionally, as I serve as both the designer and developer, many times I haven't had the time or the capability to implement everything I wanted to. Nevertheless, it was a spontaneous and complete design process, and it is my very first work that I hold in high regard. I hope to create even more valuable things in the future.

Use WeChat to scan and try it!

Page updated

Google Sites

Report abuse