Project Brief


A student orientation App for Art Center freshman

Konekt is an App concept made for Art Center freshman orientation. It is a group project assigned to interaction design students in Art Center at their first term to experience the process of UX UI design.  We designed Konekt to make the orientation experience ever better and more accessible. It also onboarded student to the digital resources and touched more pain points for Art Center student to act not only as an orientation tool but a digtal helper in Art Center. 


The demo of key flows within the app

My Responsibilities


The first group project

KONEKT is a group class project for Interaction 1 by Maggie Hendrie.  

Group Members
The Jose 
The Anna
The Bryan
The me

It is not my first full App design process with macro and micro scale of UX execution, but it is sure to be the most fun and energy consuming one.  I was leading the team to push the interaction concept, visual design, prototyping and also the presentation along the 7weeks. 


The best ever team I got in Art Center

The Challenges


Design the welcome from Art Center with "strangers"

The design assignmet intended to introduce UX and UI design process with a simple but interesting problem: inhance the orrientation which we just took at that time. But at the end of the project I realized that the biggest challenge had nothing to do with the orientation.

It is how to work with three other people and devliver a consistent experience as a team. 

All the time we spent together to excute certain things, all the communications about the concept, all the itterations we put into the process. They were all the things you have to do to get everybody on the same page, same level of ownership, and same quality of output.
This was super hard at the beginning. But we nailed it.

The Process


Here is what we see freshman orientation. An orientation is serials of onboarding experience that prepares you for the upcoming learning. It will armour you with campus knowledge, inform you with the policy, and get you to know a lot of talented people that just like you.  
The way Art Center perform orientation is put students to a lot of sessions and do tours based on a schedule. This calender and time interface is what came out of my mind the moment I heard the challenge. 

 "This is exactly what I want for the orientation. I want to know what I am doing with a glance." 

Although this out of instinct idea is a lit bit personal, it turned out that the final product( which is designed for 400 students coming from more than 30 countries )did not shift from this idea too much.
After 20 general interviews, we found some patterns in our interviewees. Although the demographic of incoming students has a high level of diversity, the needs and wants for orientation fall into some same directions. 

We dived into three people who are slightly different in terms of education experience and local life experience.  From here we developed our insights and UX vision.

Three personas that guided the design

Research result slides

The Process


Interaction Design

At interaction design phase, we brought three key features out of our ideations and created information architeture and wireframe flows based on it. The three features are:
1. QR reader,  add friends and events snap-finger fast
2. Personalized to-do list that fits all kinds of students
3. Group chat, a space to enhance community communication

Ideation slides

Information architecture

Wireframe with flow. Credit: Bryan Oh

First round of prototyping

The Process


Visual Design

The visual design process is more about polishing the visual representation of the product and put the Art Center brand into the product. We went through three major iterations, the final interface achieved good usability and visual aesthetic at the same time. Motions within the interface is designed withom this period as well. I used Principle to experiment the motion and try to provide meaningful and delightful experience.

The first visual concept. Credit: Bryan Oh. Everything is too small in this interface. The color theme reminds people of luxury and decoration. All the doing-to-much design elements in it will grab attention away from focusing on the function and content.

The second visual concept by me. We chose the color theme: orrange from this theme. Clean and clear type, straght foward visual hierarchy is adopted latter from this concept as well.

The first polished interface. 

First round of principle prototype

Behind the principle prototype

The Process


In the next round of visual design ,we developed all the screens within flows and tied them into a high fidelity prototype. We changed some layout and put more effort into design guidelines. There was so many screens to make at the end of this class for the final presentation, we had to split the work. Design guidelines and sticker sheet of component were made by me to help other team member produce high quality screens. We also made a brand attampt to close the mouth of the QR reader doubter. 


72 screens were made for the final presentations. 

Meggie always doubted the QR code. "Don't be too attached to a technique, focus on the user." 
The initial idea is using QR code to accelerate friending and adding event, but we found people extremely unfamiliar with QR code. So we made QR code as the entrance of the orientation App on the admission paper and combined the school brand with it. 

Key screens from the third round of visual design

Second round of principle prototype

The Reflection


Lessons learned from the team work

Lesson1: How do we communicate?

Bryon uses Line, I use Wechat most, Jose uses Snapchat and messages, Anna uses messenger. How do we even communicate?  

Eventually we use chose Wechat for the following reason:
a. Least distraction
b.Compatibility of file transfer
c.Stability of communication dialogue.

It turned out that Wechat is not enough, we have to use dropbox for public assets. 
I am planing to move to ASANA , a collaboration tool concentrates on the agile development. It has the three advantage above and also store public file conveniently. 


Lesson2: Set collaboration environment, leave extra space for change

Set date for team work, talk through work that has to be done before the team time, make sure the how should finish what is visible and clear all the time. 
Although our team work closely together, but due to a loose way of deliverable management, we always delay work to the last minute, leaving no space for accident.
Collaboration is a structural work: time management, public file management, collaboration and critique, etc, they all needed to be thought about before and during the process. 
In KONEKT, we reached a point where there are just so much files, navigate ourselves to certain file was a disaster. If we consider maintaining a good file structure along the way, things would be better for ever one.


When we showed Meggie the prototype at week 6, we were apparently not ready for the mid term demonstration. The content and detail on the screen required much more effort to make sense. 
"I don't understand." The feedback from Meggie was super negative to the team at that time. Every one in the group knew we got great stuff, we just need time to put everything together. After a moment of feeling super down, Jose said to us: "Guys let's be dead honest, do you still think gamification worth doing." Gamification is a feature Bryan spent hours on for the product. 
We used to take gamification as badges and rewards, but never went deep into the design of game rules. Since everybody wanted to behave clever pretending they know how to execute the "GAMIFICATION" ,we didn't really talk through the gamification part. At the this dead honest point, we all knew if we don't put more effort into the content and detail execution, our stuff is still going to suck. No more time for the Gamification design.
We sat down together and talked through the to-do list and decided to put aside the Gamification. 
Week 7 was extreme  for us, we spent a lot of time talking and collaborating in 227. I felt if this trust and honesty exist from week 1, there would be much more time for us to sleep and higher quality design would be generated.
Be honest, have trust for you team.

The Result


They who experienced and held orientation, love it

We believe we have made what we aimed for possible , and received positive feedback from orientation students, orientation leaders and the faculty.

"Seriously, you guys should build it right now so the next incoming term can have a much better orientation."
--2016 fall Product Design Orientation Leader Luc