- Style tiles
- High fidelity screens
- Style guide
zooKKs operates on the unique idea that carpooling needs to be based on neighbors who have similar commuting patterns. They want to create a safe and easy way for people to find a carpool and not worry about scheduling or payments. Their app is meant to connect people together for something they have in common, as well as help the environment and limit the amount of cars on the road each day.
The two main competitors currently in Chicago are Uber and Lyft. We explored more carpooling apps as well as social media apps that had similar features. We noticed:
- carpooling apps had bright colors, interesting iconography, a casual feel and were very clean and organized.
- social media apps had a lot of color coding and visually delightful iconography.
- some gamification engaged the user and gave the app a little something extra.
As designers, our goal was to create elements of friendliness and security. The client shared the apps he likes and uses daily, which include similar elements—like Starbucks and Airbnb—but was very open to other elements in the design.
We had to establish the framework for how the design will portray the product. We had thought of these Design principles as a guide.
Once we had a visual, we began making style tiles. I chose one screen I felt represented a lot of what the app had to offer and began finding colors, icons and typography that would show very different representations of this app.
As we continued, we learned how to communicate our process and our client saw all the possibilities of how zooKKs will look. We helped him communicate his ideas to incorporate how he was visualizing it. He selected a fourth option with some minor changes that were added from the other styles. The 4th option was selected because:
- It went along with our design principles: safety, social, friendly, and professional
- The green color scheme was professional yet still trustworthy and inviting
- The fonts were thinner and had boxy buttons
- It would attract his target audience and it was very clean and simple
Final design style tile
We were given wireframes to base our designs off of from a UX team. I thoroughly studied their research and use cases and we connected with them to ask clarifying questions when necessary to understand the functionality and purpose of each interaction.
Competition for new apps in this market is difficult to make very fresh and new. We were inspired by some aspects from zooKKs’ competitors but also developed elements that were unique to the brand and its goals—convenience, safety and staying local.
High Fidelity Screens
For the high fidelity screens, it shows the sample user finding a carpool to join and riding to work with neighbors that travel the same route. They are able to look through current carpools, message the group and join.
After mocking up the final screens, we designed a style guide to allow the developers to know how to design each element in the screens. This is also a guide for future screens, as this product is getting ready to expand.
This project was a great experience because I learned how to communicate my ideas better since the client was not too sure how the UI portion of the project looks like. Communication was important to make sure we were all on the same page and that we can guide the client through the process and our decisions. Working closely with zooKKs as we went along the process was beneficial because he was able to add any of his insights and critiques for us to move forward with the best design for his product. My goal was to improve the first impression of the product. The colors that were used before did not show the friendly and social aspect that zooKKs wanted to portray. I wanted to create what the client was looking for and fit the design principles to thoroughly represent the product. We both agreed the final design style was the one that fit the best for the new look of the product. Working together with the UX team was also helpful because we were able to understand what needs to happen visually for the user to understand the functionality of the app.