A Mobile App
Fall 2015 Hack A Startup, Team with
Tianyu Gu, Justin Ahn, Alex Bainbridge, Jin Fang, Alina Yu, Shirley Zhou
My Role: Design the logo, branding of LiGo and design the user experience and user interface of the mobile app for Ligo.
Tools: Adobe Illustrator, Sketch
>> Project Overview
To design and build a mobile app called LiGo that allows college students to navigate through and filter events on campus and allows student organizations to post and advertise events. I was mainly responsible for designing the logo, branding, user experience and the user interface of LiGo.
>> Interaction Design (designing the mobile app)
>> Stakeholder Map
We as a team worked togther on analyzing the social/economic system LiGo lies in. We studied the "stakeholders" involved in this system, what their values are and how they interact with each other. I solely worked on the rendering of the system diagram.
>> User Interface Sequence Wireframing
Function comes from need and design comes from function. After the function we wanted LiGo to achieve and the service we want LiGo to provide were confirmed, I moved on and prototyped the flow of how users interact with LiGo and created the wireframes of the UI
>> User Interface
With a clear mind of how the interaction between users and the app should take place, I then created the user interface.
Users can sign up as either individual students or student organizations. Student organizations need to be authorized by the school officials, the Bridge at Carnegie Mellon for instance.
Each icon represents a different type of event. For instance, the purple one with a video game controller marks the type "entertainment" while the blue one with a pencil on it means "education". The combination of using a map and color-coded icon displays both the physical location and the basic info of a event in a single interface. Inside the menu, users are able to sort events by either type of events or starting time/date of events.
Once a sorting criteria is entered, it takes the user back to the map inteface with more detail information related to the event. By clicking on each single event, it takes the user to the detailed description interface where the user can click "Go" and "Save". By clicking "Go", a message would be sent to the host of the event so that the hosts can know how much people are coming even before the event starts.