UI Design // UX + UI
Role: UI Designer
Vancity Showcase is an idea for an app that will allow users to search for events, news, and the latest happenings in Vancouver, while integrating social aspects like Friend lists and sending event invitations. I designed the app UI, making high fidelity prototypes of its most important functions such as a personalized news feed, a sophisticated multi input search filter, and a profile which displays recommendations and favourite lists for the user. The idea was originally created for one of New Media’s courses, Project Management, where we developed websites in groups under an Agile Scrum methodology, but everything here is my own personal work.
Reasons for UI Design
Currently there is a lack of well defined tools that allow people to search for events that are happening in Vancouver. The two main methods are Facebook and Daily Hive. However, Facebook events isn’t the most optimized for searching specific events, lacking proper search categories, filters, and prioritizing events with high publicity (allowing niche, smaller events to fall through the cracks). In my experience, I was able to find most of the events I currently attend through Facebook via my friends’ profiles. Daily Hive, like Georgia Straight, is more of an online publication than a proper application. Its lists and recommendations have made it extremely popular, but it is not optimized for a mobile environment. Vancity Showcase takes the best of both Facebook events and Daily Hive, and combines them into a single, compact app.
Primary and Secondary Audiences
- Vancouver locals and residents
- Foodies and other social people who like to be kept in the loop
- Event organizers
- Tourists and travellers; tourist groups
- Promoters (ie. for festivals, clubs, etc.)
- Professionals seeking to network
- Companies to promote their own events or business
To better get an idea of my target audience, I created a persona of a typical user of Vancity Showcase. In this persona, I have outlined the usual channels she gets her information from as well as events she would be likely to attend.
Low Fidelity Wireframes
Using Adobe XD, I created wireframes for all the screens that I would be developing high fidelity prototypes for. I used several free UI kits on Behance for my icons and other visual elements.