Design System Exercise

School events discovery for students

7 days
Mobile device
Target user
Students and new comers
    Design an experience for students to discover orientation events and craft a visual system to accommodate different types of events: sports, music, visual arts, social groups, and volunteering events. Provide high-fidelity mocks for searching, browsing, and viewing the details for these different events.

The Problems

  • For new students don’t know the way to make friends quickly and join events as they interested in
  • The messy interface results in many students spend lots of time searching, browsing and view diverse orientation events
  • Some students cannot come to some interesting event due to their other schedules conflicted

The Solutions

  • An intuitive application for students finding events in an easy and quick way
  • Discovering and searching events by categories, such as sports, music, visual art, volunteering and social
  • Helping the unable to be attended students can also experience the events and know what’s happening in the real time by Live

User Pain Point

  • The wide range of events are always showing in a broad disorder every day
  • Sometimes my schedule is conflict with many events that I’m interested in
  • The flow for basic searching is always complicated to use

Information Architecture

After making sure the main problems’ target, I start to build this IA to help me clarify the useful and necessary features is gonna serve for my app.



After a series of rough sketches, to figure out user flows and overall layout, I start with wireframe first. My wireframe helps me to make sure the information hierarchy works in a right way.

1. The live-card is design to hlep some students who are too busy to attend in their interested events. Getting the fresh things happening in a different but practical way.

2. Showing the most popular events to help students finding event easier. To saving space of the screen, and avoid over-slidehi down, feel free to swipe cards to know more about popular.

3. The sequence of events are showing by date. To know today’s upcoming events easier.

4. The floating search button will always wait in here to solve most of the searching needs.

5. The filter card will pop up after tabing the searching button. ↑ And students can search events by the keywords, categories and dates. So that the home screen will showing as we want later.

6. To catch students’ attention, the event detail page shows the event big images or posters first, and the “join” button replace of the seaching floating button also attracts us to join it quickly.

7. Feel free to contact with event’s organizer and asking what you’re interests or anticipated for the event in the below comments.

Illustrating Categories

School events are sorted by Sports, Music, Visual art, Social group and Volunteering. To make the visual style and system looks more intuitive and relaxable, I create some illustrations to suit for this product’s basically users – students!

UI Viusals

1-1. Browsing (Mutiple Categories)

  • All of today’s events are easy to access in this page
  • The mutiple categories searching results is showing here
  • The students who are unable to come to some or other events can get the recent happening of that by live-recording
  • The floating searching button is waiting for give you help
  • The only one floating searching button at the bottom of the page allows users to reach easily and conveniently.

1-2. Browsing (Individual Category)

  • There are all of the individual category interface possibilities. Different situations of lives also need to be considered.
  • These illustrations as statistic showing in the top of the interface, which create an activity atmosphere

2. Searching Events

  • The quick pop up card is showing from bottom to meet our searching needs.
  • It can be distinguished by typing keyword, selecting category and selecting specific date and time.
Category Filtering

To provide convenience for different students’ searching experiences. That would be a better way when students consider different categories of events in the same timeline, which means we don’t need to repeat searching and browsing this or that to wasting our time!

Visual Iteration

Firstly, I was trying to create illustrations for each category using bold theme color to organize them.

3. Event Detail

  • There is an attractive and appealling page attracting people to join the event
  • Easy to connect with event organizer
  • To increase the event’s activeness, feel free to write comments and reviews as we want

UI Kit

Since this application is for students. I picked Red-Orange as mainly color to serve for its visual system. This color embleming young people and our vitality in school life. In the meanwhile, I created a series of illustrations works vividly for these five category, the sports, music, visual arts and so on.

Here are some mockups showing off the UIs. I hope you like it!

Thank you for scrolling to here!