Project Introduction
Our client came to us with a basic wireframe for a social application with a twist. SayHullo was meant for users who want to connect with others but maintain the ability to remain anonymous. The user has the ability to create “Personas” which they could use to connect to different types of people. Business could be a Persona, Social another Persona, etc. The challenge was to design a clean, easy to navigate user interface - where the user can easily create, maintain, and connect using these different personas.
Task
User Interface and Design for an emerging social mobile application.
Process
The project started out with a discovery meeting, where the client explained their vision for the app. We then procedded to dive deeper into the wireframes that were provided - discussing what worked, what didn't, and what did but could be improved.
Once we decided on the UI and application flow, we moved on to design. We wanted a clean and visually appealing presence using full screen imagery, flat iconography, and a vibrant color pallate. Through various iterations and meetings to discuss, we decided upon a branding guideline for the app and started the process of applying it throughout.
Tools
Sketch UI, Photoshop, Illustrator, InVision
The Design
We decided to use background imagery for a large part of the app to maintain a social look.
Iconography was kept simple and flat. Blues and Aquas are set for the main color palette throughout.
Usability
We kept mobile functionality familiar using a standard IOS navigation bar at the bottom. Adding/editing items like Personas, Videos, Image, etc are accessible with a common CTA’s throughout.
Personas
Personas are easy to create, preview and edit. Keeping the functionality accessible, the user is not left “searching” for the actions they wish to complete. Each persona is assigned a color which is always visible throughout the application, so the user always knows which Persona they are actively in.
Connections
Connections are displayed by persona, which the user can easily switch between on Screen or by navigating to the Persona Screen. There is also an option to view connections for all personas.
Search
While searching connections, the user can easily see which personas each connection belongs to. Connections can belong to multiple personas.
Inbox
Each Persona can contain an Inbox, and the messages are separated between your connections and those who are reaching out to connect.
