Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright licence: CC BY-NC-SA 3.0
Callver is a Capstone Project that I worked on while taking a UX/UI Diploma Course at BrainStation. It's an iOS app made in response to the world pandemic experienced by millennials, caused by loneliness. Through this project, I hoped to create an app that will help people have more meaningful interactions and further relief their frustrations when planning an event.
Roles: UX Researcher, Design Strategist & UX | UI Designer
Timeline: 10 weeks
Project Type: Academic - Capstone Project
Tool Used: Sketch, Figma, InVision
In this project, 5 stages of the design thinking method (developed by The Hasso Plattner Institute of Design at Stanford) were implemented to help solve users' problems. It provided a structure to better understanding the users and explore potential solutions.
Since March 2020, the world has encountered distress and most people have been in quarantine and social distancing to keep safe from the COVID-19. Because of this, many people are feeling lonely, mostly due to the lack of human interaction.
Covid forced us to reflect and pointing to things that matter the most and people we hold dear. We still need interaction to create meaningful connections, which takes time to build. It presents an opportunity for people to maintain their connections by offering them a digital solution that alleviates their frustrations when it comes to planning activities with their friends and family.
In a 2017 survey, the Vancouver Foundation found that nearly a third of people aged 18-24 in that city said that they felt lonely. While research has established that digital communication can enhance existing friendships over the long-term, a continuing concern among some is that youth are less “connected” than they were in the past or that increasing digital communication contributes to stunted socio-emotional or empathic growth.
Ipsos report claimed that as many as 63 percent of Millennials (between ages 18-35) are at “high risk” for mental health issues compared to only 41 percent of Canadians. According to The Millennial Mosaic, Technology provides the illusion of companionship without the demands of relationships.
Social distancing and isolation have made an impact on people’s mental health leading to a lack of connections and an increase in digital communication. I will know this to be true when I see the following feedback from the market: There is a need to organize and plan activities in the social community, but users don't have the right resources that fit their needs.
I conducted one on one interviews to define the problem space. Remote interviews were with 5 people who were between the ages of 18-35. According to Ipsos Report, they're prone to experience high-risk for mental health problems. I wanted to learn their attitudes towards video calling and texting.
I learned that majority of the people from the interviews felt sad if video calling and texting were the only way for them to communicate. People emphasized the importance of in-person communication, types of activities, plans, and scheduling.
Persona- The Light Bulb Moment
Based on the pain points, goals, motivations, and direct quotes from the interviews, I set up a primary persona name Anna. I referred to the persona throughout the entire design process. Initially, when I created the persona, I thought the pain points, goals, and opportunities were a summary of the entire interview. Later I realize it's an outline from the direct quotes under each common theme.
I mapped out the users’ steps to see how I could simplify their journey and pain points. To have a better understanding of what users are seeing, thinking, and feeling throughout their journey when planning an event. It also identified the key moments to create a solution to ease their frustrations.
Market & Competitor Analysis
According to HubSpot’s Blog, Facebook Messenger has experienced a 50% growth rate in 2014. Integrated within Facebook and also as a stand-alone app, it’s a tool that is experiencing phenomenal growth.
This online messenger app on mobile phones has a feature to integrate with a user’s phone contact list and allows users to message their contacts. Employees in small to mid-sized companies can easily communicate with coworkers rather than sending out emails for quick correspondence. According to Tech Deck, with one of the largest user bases of all apps at 700 million, and is owned by Facebook, this is an App to watch and be familiar with.
Facebook has integrated its Messenger instant messaging platform with Instagram’s Direct Messages, allowing users to have a unified messaging platform. Apart from allowing users to message people on a single platform, the company has brought multiple features including disappearing messages, selfie stickers, reactions, chat colors, and more to Instagram.
The project’s goal is to create a meaningful connection between people who are feeling lonely and help them maintain connections in order to improve their mental health.
After extensive research and refinement of my “how might we” question, I found out that people do value in-person interaction when asked how they would feel if texting and video calling would be the only way to communicate.
The digital solution would be a network-based application to facilitate people’s in-person interaction and help them maintain a connection through recommended activities and optimized schedules.
I created user stories and epics to explore potential functionality that would ease Anna's pain points.
I created 30 user stories and these stories were then grouped into epics. Ten user stories created within the chosen epic. From the interviewing findings plans and schedules selected as the core epic to focus on.
It was time to translate my findings into a solution. I created a task flow for plans and schedules from the user stories. This task flow sets the initial foundation for me to understand which screens to create for Callver. Since the aim of the app is to optimize and sync users' schedules, the task flow didn't include system decisions as they didn't deem necessary.
I started with Crazy 8's sketches to brainstorm some of the benefits. The knowledge I gained from my users and their goals played a role in my sketches. In the beginning, I tried to fit as many benefits as possible based on what the users wanted from the interviews. Later on, I decided to focus more on schedule, and activity due to recurring themes from the interviews. The first sketch helped me move forward to refine my second sketch.
The sketches were then translated into grayscale wireframes. At the beginning of my design process, I created wireframes for testing purposes. I start the design process with low-fidelity wireframes. This is how I iterate through many design options quickly. I used Sketch software to design my greyscale wireframes. Then they were used for testing. Three iterations of grayscale wireframes were made, with the third and final grayscale iteration shown below.
Before getting into high-fidelity prototyping, I started with listing keywords, phrases, and metaphors to created a mood board on InVision to get a sense and feel of the app. The adjectives would help me collect imagery that would portray the feeling of the app. The colors would then be extracted from the images.
The feel of the app would be fun and upbeat with bright colors with a touch of warm neutral tones to balance. So a rich yellow paired with some cozy neutrals would convey a calming, and welcoming effect.
Adobe Fonts and Google Fonts were used to ideate various fonts. Keeping the brand in mind, I want to reflect the feeling of upbeat, warm, and approachable. After looking through an extensive amount of typefaces within various families from Futura, Gibson to Lato, I finally settled on Proxima Nova. It achieved the brand by giving the feeling of friendliness, modernity, and fun. I used Bold, Medium, and Regular with sizes varying from 12 px to 32 px.
After listing various keywords, Callver was decided as the brand name. The name was a play on words from culver which was another term for pigeon or in this case, a pigeon carrier. "Cul" is replaced with the word "call" which I thought would be fitting for a messaging app.
A speech balloon added around the icon to emphasize that it’s a messaging app. Since the app got its name from culver, a bird-like icon seemed appropriate. Below are some of the concepts and several revisions of the app icon. The logos were assembled on Figma. The final Callver icon below would adhere more to the system standards on iOS as shown.
The third iteration of the greyscale wireframe was translated to a digital prototype for user testing. Oh! The prototype to the right wants you to play with it!
Before the final product, I did a few rounds of testings in order to reveal possible usability problems. After the grayscale wireframes and prototype were completed, it was tested on 5 users each round and a total of 10 to start.
While all users were able to complete the tasks, most struggled and were confused with the design of the app. Users didn't know where to find their friends' schedules and took some time to find the modal menu. They also felt the tasks flow were disjointed. Two rounds of user tests were conducted and changes were made with each iteration based on the feedback that was given.
The target persona, Anna, downloaded the Callver application, where she connects with her friend Wendy. She has not seen her friend in a while and wants to meet up for coffee. She decided to set a date for December 11th at 4 pm.
Even though all users had completed the tasks, I learned from this first round of testing that some features were confusing to them. They wanted the scheduling to be combined with the activity selection process. They felt it was redundant having to go back to the menu again. They thought the plus icon was mainly for attachments rather than a navigation menu and felt that having a calendar icon visible would be more convenient. One felt the activity icon on the main chats screen belong in the settings feature so that she can set her activity. These changes need to be made to avoid usability issues when translating to the second iteration in Sketch.
Design Changes After Round 1
Click on Image To Enlarge
The second round of user testing was insightful and helpful. Even though all users were able to complete the tasks, there were still some adjustments that needed to be made. They also gave a positive review of the simplicity of the app and thought it would be helpful for students to make plans.
They felt the placement of the icons was not ideal and thought the calendar icon should be placed next to the intended owner. In this case, the calendar icon needed to be next to Wendy’s name to have a clear indication that it is her calendar.
The majority of the users wanted to have the option to input their alternate times and activities rather than solely having only Wendy’s. I learned a lot from this round of user testing. Changes and details were implemented to improve the usability on the third iteration of the prototype.
Design Changes After Round 2
Click on Image To Enlarge
Final Hi-fidelity Design
Design is a continuous iteration. Once I tested out all the usability mistakes, I started designing the greyscale prototype with color and images on Sketch. Later on, I decided to use Figma for the horizontal carousel feature. It was also an opportunity to learn another tool.
I continued to iterate and test to get to this final version. Users are able to navigate local shops once the activity is selected. Having that feature available would also help support local businesses.
Play with the prototype on the left! It's interactive!
Responsive Web Design
The product landing page was to be designed along with a mobile viewport. A content flow diagram was created in the process to show desktop transitioning into mobile. Initial paper sketches were produced to developed into grayscale and finally, a high-fidelity version was to be constructed.
I decided on a very simple visual look, using a lot of open space and key emphasis on the brand color. Having just enough information to have users wanting to learn more about the app. The website is divided into sections, showing the benefits of the product along with mobile mockups and finally a horizontal carousel at the end for a few users' testimonial reviews.
The Desktop Version
Click on Web Prototype Below!
Click on Mobile Prototype
Providing better planning, Callver promotes a healthy lifestyle by having people spend more quality time together. It aims to minimize loneliness through in-person social interaction by understanding people’s needs and experiences while improving their connections with their friends and family.
Callver’s main competitive advantage as a messaging application is having a calendar feature, recommended activities, and business reviews all in one place providing flexibility and conveniences. It will also provide unbiased reviews from real customers on businesses so that newcomers can select the activities that best suit them. The app will also use paid ads online to drive traffic to the landing page for potential users to download the app.
Callver will provide businesses with both paid and free advertising products. It also utilizes its website and mobile app to deliver targeted search advertising to a broader audience. When it comes to small and local businesses, A trusted platform that provides:
exposure and visibility to local businesses
Opportunity to engage with a large audience (Increase traffic)
Reviews to promote businesses
Opportunity to increase their revenue
Local business data
Analytical tools to monitor traffic
Key Performance Indicator
Regular reporting and analysis of mobile app KPIs and how the app is progressing will help improve its performance and therefore generate more revenue. Below are some of the indicators measuring the general performance of the app:
Conversion Rate - How many visitors signed up?
Task Success Rate - How many users created and completed a profile?
Time on Task - How long did it take for users to create their accounts?
Net Promotor Score - How likely will users recommend the app to a friend?
Return on Investment - How many customers gained by optimizing the signup process?
Loneliness is not something that is to rid of, and it's natural to want to feel connected to another. It is normal for people to go through waves of emotions but at least Callver can offer a way for people to interact.
With that said, my next steps would be to continue to ideate and install new features and tasks flow. For example, a poll voting system, a "my calendar", and other exciting ways to make people's planning process easier.
If given the opportunity, I would reach out to developers and have their input on feasibility. I would ask about their process and how they would like the handoff delivered.
What I Learned
Time management was one of the obstacles in this program. It was difficult since I was learning the material at the same time along with tight deadlines and multiple projects on the go. I learned to section out my schedule accordingly by dividing up projects into daily tasks. Using a timer for each task, I was able to be more efficient. Taking some time to journal after each project is a great way to reflect and see the bigger picture.