To gain a better understanding of the problem space, secondary research was conducted. I found that digital presences were less meaningful than face-to-face interactions, although it was easier to make connections online. In addition, a large online network consists of many people you don’t interact with, making face-to-face interactions even more critical.
After gathering secondary research, I conducted User Interviews with 5 users. I chose this testing method to gather qualitative information, and to figure out the "why" behind users' actions and their thoughts surrounding virtual networks.
Key Findings:
To analyze interview responses, I began synthesizing research to understand and share my research findings. I explored methods to synthesize my research through creating personas, empathy mapping, and journey mapping.
I created a customer journey map to see how a user's experience meets their expectations, empathize with users, and find areas of improvement for designs.
Two user types were identified, and two fictional personas were created to reflect both user types.
I began the design phase after visualizing a solution based on research during the discovery phase. I created a sitemap to visualize the different app screens and get a general idea of the screens that would be put in the app. I integrated pages based on networking and meeting new connections, which are the main functions of Circle.
Next, I created a user flow for the red routes, or the user flows that will be used the most frequently and are critical to the apps’ success. This helped me gain a general understanding of which screens would be used the most, and which ones to focus on first in creating the MVP.
I created sketches to bring my project ideas to life. These screens allowed me to communicate my ideas and get feedback about them more easily with users and stakeholders.
After the sketches were created and ready for feedback, I created wireframes to organize my project ideas and present a low fidelity deliverable. In addition, I also included wireframes for edge cases, or rare but potential cases that users may face in their flow. The edge cases are described in the red text below.
Usability testing was conducted to get real-time feedback from users right after wireframes were ready to get feedback as early in the process as possible. This allowed me to incorporate and iterate further for high fidelity mockups, and gather additional insight from users.
Through the feedback from guerrilla usability testing, I was able to iterate my design based on my findings as I transitioned to digital wireframes. I created the design to be a user friendly interface that encouraged a social network, and an easy way to find and build connections. I incorporated features that would be engaging for users to encourage them to network more, such as a “connect” and “favorite” button.
In my first round of iterations, I made several changes to reflect user pain points and needs. The descriptions below in red text highlight some of the first-round iterations that I incorporated into my mockups to improve accessibility for users.
After another round of testing, I iterated further through Sketch to address user concerns and integrated key findings while transitioning into high-fidelity mockups. Here's a look at my final high fidelity screens for Circle, which went through rounds of testing and iterating.
Before finalizing the high fidelity mockups, designs went through multiple rounds of testing with participants. With the feedback from testing, I found that users would like a larger profile picture, would like more consistent buttons, and had difficulties understanding the search page. Because of this, I iterated the search screens before transitioning them to prototypes.
The task of favoriting an event was challenging for all participants. The main finding from testing was that the “Events” page button was really confusing for users. The “Events” page contains events that have previously been liked/saved by users. However, users would try to search for new events with that button. This may be fixed by changing the “Events” page button into something for “Likes”, “Favorites”, or “Saved”.
• Participants tried to favorite events by clicking on the “events” button
• To actually favorite an event, you must go to the “search for events” page in order to search for and favorite an event
• Solution: change the “events” button to “favorites”
After creating sketches, wireframes, wireflows, and mockups, I designed a high fidelity prototype to create an interactive representation of the final product.
I used inVision to create clickable prototypes by first importing my Sketch files to inVision Studio. I added interactions to create a flow between pages to represent how the app will function.
My clickable prototype can be viewed by clicking the link below:
inVision Hi-Fi Prototype for Circle
Through testing, I received feedback on the overall usability of the app. I made iterations on the search page to make the user experience more enjoyable. Users also faced a lot of difficulty in the original “Events” page, and there was a disconnect in which events were available and which events were favored. With that feedback from several users, I iterated the final designs to reflect the feedback, improving overall usability for users.
Through the testing conducted, possible next steps for iterations would be to integrate a map feature to discover how far each person is from you. It could make users more encouraged to meet up if they are within a close proximity. A reward system featuring points or badges would also help with the gratification process to encourage more users to attend more networking events. This could have a positive impact on the number of events that users choose to attend.
Through performing the end-to-end design cycle for this app, from project ideation to delivering a prototype, I learned about the importance of testing and iterating. Even when designs don't feel perfect yet, it's always important to get an initial design out first so that you can start getting feedback sooner rather than later. In addition, I learned that your design can always be improved. Through many rounds of testing and iterating, many beneficial changes were made to the interface, contributing to significant improvement for Circle's overall UI/UX Design.
To view my design artifacts for this project, click the link below to view my Google Drive documents for Circle:Design Artifacts for Circle
If you like what you see and want to work together, let's get in touch!
uiuxtiff@gmail.com