EVENT DETAILS
-
The detailed view of events has the date, time and location first as those are priority information that the user needs to remember while planning for the orientation event.
-
There is parking and walking information provided to users as this might not be provided by map-based navigation.
-
Underneath each event being viewed, there are suggestions for similar events. This is similar to how app stores like Play Store recommend similar apps to users.
SEARCHING FOR EVENTS
-
The quick event search icon is present in the browsing screen for the users, similar to iOS home screen
-
The search results are shown in a list layout so that more events can fit in the screen in case user is searching for something generic rather than specific
IU Orientation
Showcase of my UI/UX and Visual Designing Skills
OVERVIEW
I looked at event management applications like Meetup, Eventbrite and designed a single purpose application for convocations at Indiana University.
It is an occasion where the students are overwhelmed with seeing new faces, and hence, this application allows them to get familiar with the type of events that they can expect during their first day to the university.
Duration
January 2019
Tools
Balsamiq Mockup 3, Adobe XD, Adobe Premiere Pro, Adobe After Effects
Skills
User Research, Competitive Analysis, Low-Fidelity Prototyping, High-Fidelity Prototyping, Video Editing
Role
UX Design, UX Research
INTRODUCTION
-
The design process began with the research on events and educational institution orientations.
-
Initial research revealed that the most important parameters needed in events are the location, date/timing, its hosts and the guest lists.
-
The people attending the event could be added to the application, but since new students’ accounts might not be set up before the orientation, sign in and accounts were not considered.
-
Next step was to analyze the tasks and create a flow of the application, which will help in figuring out the screens required to be designed.
Flowchart
LOW FIDELITY WIREFRAMES
-
A quick sketch of the 3 main functionalities and its flow was created to avoid unnecessary usability changes during the mockup phase.
-
The browsing screen was tried with multiple layouts - list, grid and cards to name a few.
-
After evaluating the pros and cons of each layout, a grid with horizontal scrolling lists of events was selected as it allowed to display more categories despite having individual thumbnails.
-
Next slide has a few of the final versions of the wireframes used as a reference for making mocks in high fidelity.
Few of the Wireframes
HIGH FIDELITY MOCKUPS
BROWSING EVENTS
-
On the browsing screen, every thumbnail is color-coded to ensure easy categorization of events at a glance while scrolling vertically and horizontally.
-
Additionally, a splash screen and a loading screen is added to the mockups. Splash screen gives the application a brand identity for the university, and loading screen helps to give a personalized feel to the application while the content gets loaded in the background.
-
The setup screen helps in reducing clutter on the browsing screen as undesired events are displayed at the bottom of the grid helping users focus on the events that they would be interested in.
Browsing Events mockups
Event Details mockups
Event Details mockups
APPENDIX
MOCKUPS