The Project
OX Chat is a mobile/web application that allows Coaches to create/edit users, set permissions, and theme in order to easily collaborate daily with their players and staff. When I was hired an alpha version was in production for internal testing but the design and user flow had not yet been completed. My company wanted me to help evolve the product and tailor it in a way so that coaches could easily set it up and start communicating with their teams. This involved implementing new functionality and creating a new user interface.
Competitor Analysis
In order to better understand this application and find out where the product currently fit within the market.
I conducted a competitor analysis. I focused on applications with a similar demographic: small to mid-sized chat groups or private chat sessions with a need to share files and archive chat histories.
Along with the analysis, I included a detailed list of suggested product enhancements. This list included features that the top competitors had but our applicaiton was missing.
Content Audit
OX Chat is a mobile/web application that allows Coaches to create/edit users, set permissions, and theme in order to easily collaborate daily with their players and staff. When I was hired an alpha version was in production for internal testing but the design and user flow had not yet been completed. My company wanted me to help evolve the product and tailor it in a way so that coaches could easily set it up and start communicating with their teams. This involved implementing new functionality and creating a new user interface.
It was very important to have a clear picture of the product’s current content and structure. I conducted a full content inventory to asses what changes would be necessary to improve the information architecture and enhance the user experience.
Content Audit
Red Route Analysis
As the list of current and desired functionality grew, it became important to prioritize each item. To do this I completed a red route analysis. The red routes (items in the red squares) are the critical user tasks for the product and these together represent the minimum viable product (MVP).
During design and development red routes should always be prioritized, user-centric and remain obstacle-free.
Current User Tasks/Flows
User Flows
I created user flows for each red route task. This helped ensure that each flow was prioritized and obstacle-free. I made sure to include multiple access points, a clear start and finish and illustrated steps in sequential order.
In order to better understand this application and find out where the product currently fit within the market.
I conducted a competitor analysis. I focused on applications with a similar demographic: small to mid-sized chat groups or private chat sessions with a need to share files and archive chat histories.
Along with the analysis, I included a detailed list of suggested product enhancements. This list included features that the top competitors had but our applicaiton was missing.
Adding a new chat group represents a red-rout user task and should, therefore be readily accessible from any view of the chat application.
The call to action Create New Group button should be located in the left side navigation menu (fly out drawer for mobile) and in contrasting color to other page elements.
Suggested access points:
-
Easy Access button from side menu
-
Quick Create New Group Button at the top of single member chat
As a user I want to create a new group
White Board Wireframes
I created basic wireframes for the mobile app using a whiteboard and converting that whiteboard into an editable document using Office Lens. This was a quick and effective way of mapping out the new chat application structure and page layout while ideating with my team. If low-fidelity wireframes are required for the project I will also often use Balsamiq.
Initial Mockup And Visual Testing
I believe it is important to continually test your design throughout the creation process. In this case, I wanted to make sure I was on the right track before completing my high-fidelity mockups. My approach was to create a mock-up of the dashboard first and then test it with internal users. Using app.usabilla.com I created a visual survey that showed participants my design and asked them:
“How does this chat application dashboard make you feel? Please list your top three emotions."
Test Results
Clean, Simple, Dark, Fun, Exciting, Confused, Curious, Awesome, Disruptive
The majority of responses was positive and captured the desired mood perfectly. However, there were some negative responses such as “confused” and “dark”.
Based on these results, I modified the design by adding a day mode version, adding tooltips and improving the text readability.
Click Test
Another challenge I was faced with was to figure out the best placement for how to log out of the application. The stakeholder expected users to never have a reason to log out of the application but we weren’t sure where users would expect to log out if they needed to.
To help with this, I set up a click test. Recruited users were presented with the dashboard and were asked to click where they would expect to log out of the application.
The test results showed that users would mostly look in the user profile image drop down. I modified my design accordingly.
High-Fidelity Mockups
I created high-fidelity mockups using Photoshop, Illustrator, And Adobe XD.
Mobile
Clickable Prototype
Using Adobe XD I created a clickable, interactive prototype using my high-fidelity Mockups. This allowed me to continue testing out user flows as well as share with the development team the interactive design of the application which helped to give context to my mockup annotations.
The Results
This project made me appreciate the importance of understanding our users' mental model. Even if a design is technically faster, it may still feel harder to use if it doesn't behave as the user expects. I've become more adept at testing concepts using the right prototyping tool and at the right fidelity. For example, I've learned to use scrappy wireframes to isolate UX from UI testing and animations to show more complex interactions.
The company as a whole now uses OX Chat instead of slack. We have also deployed it into the ios and android app stores for all of our clients to use. With thousands of downloads, we have already received lots of positive feedback on the design and user experience. We also appreciate our constructive criticism and use it to continue building out new features and further improve the app.