DUO
Helping couples find their community
Overview
DUO is a mobile platform for couples to find other couples to be friends with. It's a community of users that can find other couples in similar life stages and who also share similar hobbies.
Project
DUO Couples
Role
UX/UI Design, Team of 6
Duration
4 Weeks
Tools
Figma, Slack, Google Meets
The Process
Discovery
Ideation
Design
Dev Handoff
Prototype
Reflection
The Problem
DUO was created as an app for couples to build community, But it struggled right from the get-go. It needed a lot of help in getting the app up to industry standards from color, to design, to layout, and overall structure of the app.
The Solution
To design a well-rounded app that would be fun, engaging, and that couples would enjoy using. We kept the original color scheme the client requested and brought everything up to industry standards. We redid the landing page to be more intuitive, we also completely revamped the app, from the style, design, and overall structure of the original product, and made it more user-friendly.
Responsibility
The first thing we did was meet as a team through google meets to discuss the overall objective and plan for the project moving forward. After our initial meeting, we began to write out the client questions we wanted to address so that we can get a better idea of what is needed for the project.
Client Questions
As a team, we began to write some questions that needed to be asked before we can move forward with the project. These questions helped us provide valuable insight into what this app will eventually become. These questions included:
How would you define success for this product?
Are there features beyond your list from the call that you would like to see implemented in the app?
How would you describe the ideal landing page for your product? Outside of the target demographic, what do you think sets your application apart from others?
What are the adjectives you would use to describe the impression your product is trying to convey?
What challenges do you think users are currently experiencing?
Heuristic Evaluation
After getting feedback on the client's questions, our next step was to conduct a heuristic evaluation of the current product. The purpose of this evaluation was to help us in our design process to see if there were any usability flaws that needed to be addressed before moving forward. Doing this really helped us focus on the areas that needed the most help and establish a good starting point.
The Four major usability issues we encountered while conducting this evaluation were:
User control and freedom: There was no option to return to the homepage from the sign-in screen. On the "about you page" there were only certain options to choose from, so you were limited on what you could put. Having it this way will cause frustration and confusion for the user.
Consistency and Standards: CTA buttons, logos, and spacing did not meet the industry's accessibility standards. Having this would cause less engagement and a poor visual appearance.
Error Prevention: There were no symbols or notifications clarifying what information was needed to complete your next steps.
Help and documentation: There was a lack of FAQ/help section on the home page.
User Stories
After completing the initial heuristic evaluation, we began to put our thinking caps on and really tried to put ourselves in the shoes of the user. We began to develop user stories that helped us navigate what we felt were the most important areas of the project that needed to be implemented into the design. The user stories were then organized into the order of priority of (Must Have and Nice to Have)
User Flow
After completing the user stories and getting the client's approval we took the information we gathered and created a user flow to layout a structure based on how we thought the app should work. Doing this helped us set up the next phase in the design process.
Wireframes
After completing the user flows, it was time for us to begin the wireframing process. The team split up and divided up the responsibility of the wireframe process. We wanted to make sure the new app met industry standards. We gathered ideas from other competitive apps and kept things simple, engaging, and informative. Doing this helped us move forward in the design thinking process.
3 UI iterations
Now that the wireframes are completed and received client approval, The team was tasked with coming up with 3 UI Iterations of the same screens for us to present to the client. The client ultimately chose option 1 (Farthest from left) which I helped design. With the choice being option 1 we were now ready to move forward on the rest of the project.
After completing the 3 sample UI iterations we put together the style guide that we would use to complete the rest of the project.
UI Iterations
After completing the wireframing, and style guide and it was time to complete the final designs and get ready for handoff.
Prototype
After the final UI iterations and style guide were complete, I chose on my own to go one step further to create a prototype to see how well the app would function. Here is just a piece of the project.
Developer Handoff
After completing all the required elements of the project. It was time to prepare the project for handoff to the client. Before we handed the project over we first had to do some annotations to communicate the functionality of the design.
I learned so much from working with the others on this project. I learned some more tricks to the trade from some of my group members related to working with Figma. I realized that it's important to let your voice be heard if you feel it is needed to help improve the design efforts. I really enjoyed this project because it allowed me to focus on my creative abilities. It allowed me to grow and refine my visual design skills.