Project Detail
Role
UX, UI, Visual Design
Scope
Timeline: 4 Week
Team: UX/UI Designer, Mentor
Tools: Figma, Photoshop,
Google Forms, UsabilityHub
Deliverables
User inteview
Persona
Journey map
Competitive Analysis
Storyboard
Userflow
Paper Prototype
wireframes
prototype
usability test
mockup
Overview
Inner Circle is a mobile application that allows its users to keep contact information up to date easily and organize their contacts into a meaningful grouping called “Circle.”
Problem
Keeping contact information up to date can be a hassle. There isn’t an easy way of knowing if a phone number or an address is still current. As someone who just got a new phone number or address, the process of giving your updated information to your contacts is equally troublesome.
Solution
Inner Circle will allow the user to verify if the contact information is correct by providing them with a simple Request Update feature.
Anytime the user updates their information, the people within their contact will be automatically notified of such changes.
The contacts can be organized into meaningful groups called “Circle.”
My Process
User Interview / Survey
User interviews and surveys were conducted to validated the assumptions made about the users. The research findings help define the target audience and their frustrations and goals.
Competitive Analysis
According to USPS, as of July 2020, over 15 million people submitted requests to change the address. This shows that there are indeed a lot of people moving even during the middle of a pandemic. People need an easy way to share their new contact information.
Evaluating some products currently on the market, I found that while products like Google Contacts and mobile applications like Address Book allows users to store contact information, updates are not automatically synced.
Social media applications like Facebook and Instagram allow users to update and sync their information with other users. However, users aren't inclined to share their personal information on such platforms.
Target Audience
Using qualitative and quantitative data collected from user surveys, user and client interviews, the target audience was defined to help the team understand who the products' users will be and drive decision-making when evaluating the solutions.
User Persona
Based on research, the persona was created to represent the key audience and serve as a reference point. This helps keeps the team focused on the problems needed to be solved.
Goals:
Be as efficient as possible.
Have a simple process of gathering contact information.
Getting accurate information about her contacts.
Making sure she doesn’t forget to include anyone she wanted to invite.
Frustrations:
Don’t know if her contact information is up to date.
Don’t have a convenient way of organizing her contacts.
Don’t have an easy way to request information from her contacts.
Mistee U.
Age: 29
Job Title: Artist
Flowchart: Add new contact
This userflow shows the process the user takes when finding and adding a new contact into the app.
Flowchart: Request update
This userflow shows the process the user takes when finding and adding a new contact into the app.
Storyboard
During the design sprint, storyboards are sketched out to show how the user will engage the product.
In this scenario, Mistee U. is planning her wedding. She needs to gather up-to-date mailing addresses from the people on her guest list. Mistee uses the Request Update feature in the Inner Circle app to help her to complete her task.
Lightning Demo
Lightning Demo is an exercise used to draw inspiration from existing products. Notable features that are unique or proven to be successful are taken into consideration and are build upon during the idea exploration phase of the design process.
Twitter and Instagram were used in this demo. The simple UI elements, swiping menu, floating action button, carousel, and infinite scrolling were noted.
Crazy 8's
The crazy 8's is a quick and iterative exercise that pushes for divergent thinking. It is excellent for coming up with ideas as it forces the designer to make rapid decisions and be more explorative. It was us in this example to explore the layout and design concepts for the home page and profile page.
Wireframe Sketch
Starting the wireframes from sketches is less resource-intensive and allows for quick revisions. The low fidelity of these artifacts makes it easy for the designer to discard inadequate solutions as little resources have been invested.
Digital Wireframes
Using Figma, low fidelity wireframes were drawn to display the layout and information architecture of the prototype.
Paper Prototype
I created a prototype from paper to quickly test some of the interactions, such as the circle carousel and the user profile overlay.
Paper prototype is excellent as they are very accessible and requires minimal resource.
Clickable Prototype
A prototype was created with features that fulfill the user stories to satisfy the requirements of the MVP.
The user can organize their contacts into grouping call circles.
The user can request their contacts to verify that their contact information is up to date.
The Notification tab provides the users with updates from their contact and upcoming special occasions like birthdays and anniversaries.
The user can use the search feature to find and add new contacts into their circles.
The prototype was also designed with accessibility in mind by complying with the Universal Design principles.
Usability Test Result
A usability test was conducted to test the solutions.
5 User interviews were conducted remotely through Zoom. Each session lasted between 20-30 minutes. The participants were asked to perform 13 tasks designed to test the flows and information architecture of the prototype.
The table below shows the test result. The tasks are in the left-most column, follow by the participant's success rate and notable observations. "Yes" in green means the participant was able to complete the task. "But" in yellow represent conditional observations. "No" in red implies the participant was not able to complete the task.
What Worked?
From the usability interview, I learned that:
All participants understood what the app was designed to do. They were able to identify at least one product goal requirement without contextual explanations.
All participants completed at least 92% of the tasks.
60% of participants completed all the tasks.
All participants found the app helpful.
What Didn't Work?
One particular area of the prototype was difficult for all participants to understand. This was the Circle Member button.
The participants had trouble understanding what this button was meant to be.
They did not recognize it as a call to action button.
Once opened, the participants had trouble figuring how to close the circle member page.
High Fidelity Mockup
I begin turning the prototype screens into a high-fidelity mockup by first creating an interface inventory.
Using the client's design criteria, I created a branding style guide that best reflects the image of the app. This, along with the inspirations I've gathered from existing products, assisted in remixing the screens you see here.
High Fidelity Prototype
A limited prototype was created to test the visual design of the mockup.
Demo the prototype
What's Next?
The prototype was revised based on the learning from the usability testing. The recommendation would be to test the changes made to validate the solutions introduced in the revision.
A user testing participant asked, "What if I don't want to share certain information with certain people within my contact list?" While this was not one of the goals of this design sprint, it should be considered for future plans. The user must have control over who they share their more sensitive information with.
Other basic app functionalities like logins and settings also require attention. From here, additional features such as having a messaging system or a way for users to indicate that they are online or available to hang out may be considered to increase user engagement and ultimately product viability.
Conclusion
This project taught me that using a methodical design process helps make complex problems solvable and can lead to well-designed products.
While a single designer can take on tough challenges, the design sprint is most effective when done collaboratively.
