networking made (super) easy
Confergo is a multi-device (iOS/Android/Web App) event app focused on helping people to network. I first worked on the app as a front-end developer, then as a UX designer on v2 and as lead UX on the third version of the app. This case study focuses on v3.
Our main focus was to empower the users to network during the conference and make the most of it.
Product review laying the groundwork
The first thing I did was to review the ux design of the app thoroughly and absorb all the client and user feedback. In a workshop with the client we listed and discussed all suggested improvements and new features. Because this was a new release of an existing app we've been working on for 2 years, we had a much better understanding of what the users needed and how they used the app during the event.
The designs below show the first and second version of dashboard.
The app we conceived in v2 was too complex, as reflected by its dashboard (above) that repeated global features which could already be accessed from anywhere in the app (favourites, schedule, notifications). We had to simplify the app to make it more usable and more intuitive.
Information architecture understanding & organising the data
I created task flows, which, along with the revised app maps, allowed us to fit the new features in the existing architecture. It also helped us identify the new screens and decision points needed for each feature.
Below, the task flow for 'request a meeting':
The next step was to design the wireframes for all the new and updated screens. I started with sketches and low-fidelity wireframes, refining them with an iteration process to get to the final designs (high-fidelity wireframes).
Finally, like for all the UX deliverables, I documented and annotated all the wireframes.
Interaction design guiding the user
I combined the wireframes and the screen flows to show every possible interaction (tap, slide, tap & hold, etc.) on each screen and where they would take the user. I also provided wireframes for the empty states of each section of the app (e.g. how does this screen look like when the user doesn't have any contact yet).
Here's an example of one of these screen flows:
Design & portability optimising for various platforms
One of the challenges of this project was to design a seamless experience accross multiple platforms (iOS, Android and web). As iOS and Android apps work slightly differently, I updated some of the wireframes to adapt and optimise the UX for Android devices. I did the same for the web app, changing some screens to accommodate the limitations of the web.
The app was also given a complete design overhaul that resulted in a simpler and cleaner look, which then resulted in a more user-friendly app.
Development implementing the design
As well as being a UX designer on the project, I led the development for the web app. I built the front-end of the app using HTML5/CSS3, leaving the JS and back-end to the development team.
Developped for Windows and BlackBerry users (or people not willing to install the native app), the web app had to be fully responsive of course. It was important to provide the best experience for these users so we had to try and make it as fast and as reactive as the native app as possible.
To achieve that we cut down some of the gestures and transitions in favor of speed and I made a point of using the best practices in front-end optimisation.