Next Case Study:

Visibook

Finding the best group messaging app
  • Concept Development
  • Workflows
  • Wireframes
  • Visual Design
  • Product Release

Project Summary

I worked with one other designer and two developers to build a group messaging app called Hashtag over the course of a few weeks. Much like Slack took over the world of office communication, we thought there was a similar gap in social group messaging apps. There were several messaging apps out there but we felt there was a missed opportunity in some very key areas for sharing and communicating as a group. We developed the concept, designed, prototyped, and then released a working MVP into the Apple App Store.

The Problem

iMessage and text messaging seemed to be the primary source of communication for groups, in our experience. Facebook Messenger was used on occasion when there was a particular event to communicate around. There were several missing features we saw across multiple apps. We started to discuss and brainstorm solutions on whiteboards and with sketches.

Some initial whiteboarding and concept development

Use Cases

After whiteboarding for a while we found there were several use cases we wanted to address. At the time text messaging was very limited for groups, users could not be added or removed to a thread after it was created, it was difficult to share content with users who did not have iMessage, and sharing content was very limited. For example, when posting an article in iMessage it is only displayed as a link. One use case, for example, was for those users who you aren't ready to be facebook friends with the people they are talking to, or it's not necessary to have their contact information forever. For example, a student taking a class in school and they need updates from the teacher but not after the class ends, or they need to talk to everyone involved in a group project.

Classroom scenario

Userflows

After focusing in on the certain user cases we wanted to address in our MVP, we started to get the flows down to solving each use case. We started with whiteboarding but eventually moved to Sketch to flush them out in more detail. Building the thing on our own gave us a lot of freedom, but it also meant we were going to have to really prioritize the features and think simply. So we paired the features and flows down to the most essential ones possible.

Early userflow concept

Wireframes

After getting the flows down, we started to get into some higher fidelity wireframes. Our priority was to get this out the door and into user's hands so we spent very little time on visuals and aesthetics for this go around. We did spend some time making sure the experience was clear and approachable.

Higher fidelity wireframes and flows

MVP into the App Store

While working on the wireframes we also worked on building the app in Xcode. This was a great experience to have the designers and developers all working on the same thing, at the same time. It allowed us to move very quickly and answer questions on both the engineering and design side with greater efficiency.

Screenshot of the Hashtag MVP in the App Store

Visual Design

Now that we had the App out and were testing it, we wanted to go back in an clean up some flows, some interactions, but most of all to develop a visual style that differentiated our app from other messaging apps. We wanted to try something new, something we hadn't really seen in mobile app design. After talking, and searching for inspiration we were drawn to the bold and simple designs of some European and Japanese graphic design styles.

Moodboard of some of the inspiration for the visual direction

We then moved onto finding our own visual style, and transforming our current wireframes to fit within that. Working with developers and wanting to get everything right, down to the pixel we used Sketch to mockup the screens.

Screenshot of visual design explorations in Sketch

One area of particular concern was the posting of content (images, movies, gifs, etc.) and articles. We wanted it to be as visually appealing as possible, no matter what the piece of media was. So we spent a good amount of time making sure it was what we wanted.

Variations for displaying articles in conversation

Once we landed somewhere we agreed on, we tried to account for every instance, for example we wanted all articles to look great regardless of different types, or lack of meta tags from articles.

Final result for article posting

We were very happy with the final result of the visual design and the usability of the mobile app and will hopefully release the newer version soon.

Screens of final result

The Logo

We also needed a logo to complete the visual design experience, we worked on several iterations over a few days to get exactly what we wanted.

Logo design process

Below is the final result of the logo on the launch/login screen of the app, which matched our visual style and conveyed enough about what the app was about.

Login screen with logo

Desktop Version

We also had a desktop version of the app that was released as an MVP as well. It was a very similar app in terms of flow and functionality, but needed to be more focused for desktop usability.

Desktop version of hashtag

After releasing it we also worked on improving the visual design for it as well. We wanted it to feel familiar to the mobile app, but yet its own personality.

Visual design iterations for desktop application

As things got farther along with our visual design explorations, things started to get more flushed out.

More visual design iterations for desktop application

Conclusion

I had a great time working with the team on this project, it really showed the value of working with a 1:1 ratio of designers to developers. Building something from the ground up, with limited resources really forces you to evaluate the things you need most, and to solve problems as simply as possible.