Landing Page
Efren
UX designer
Duo
Helping Couples find their Network.
Overview
When I first think of making friends, I freeze up because I do not know what to talk about. During these digital times, it seems hard to find a new group of friends to connect with. Due sets itself apart from other apps because of the exploration the users can do.
The Problem
Due was already a published website and app. It was available for users in the Bay area. The app was not fully developed and had many issues. The app that was built did not come close to winning the competition over other apps.
The Solution
As a team, we came together to make Duo meet the accessibility standards. This gave Duo a fighting chance to win the competition. Our team created and expanded their mobile application.
Duration
4 Weeks
Process
Discovery
Ideate
Design
Handoff
A/B Testing
My Role
UX/UI Designer (Team of 6)
Tools
Figma
Google Suit
Slack
Zoom
Teams
1. Discovery
1.0 Team Kick off call
We had a team call and together we discussed the goals, expectations, and timeline. Our team lead was able to break up the project and give us an equal amount of work. He as well established deadlines that helped us meet them.
1.1 A Deeper Look
After looking at Duo's original home page, we made questions as a team to ask the client. I wanted to pinpoint what their goal was with the app and landing page.
1.2 Heuristic Evaluation
The team evaluated the entire Duo website and was able to identify problems the user can face. This evaluation helped the team have a better understanding of what the final design should look like.
1.3 Competitive Analysis
The team pulled screenshots from different apps to help us grab some ideas. With these in mind, we were able to start our drafts. Due needed to be updated to the regular swipe left and right ability. We should not be reinventing the wheel when something actually works.
We all downloaded an app and used it to see how we interact.
I took the lead on the tinder app and started to see how Duo can be better
Meet up was another great app to compare findings to make Duo a user-friendly app.
2. Ideation
2.0 User Stories
With our research, we were able to start creating our user stories. We were able to have a better understanding of what the client desired. The user stories help guide us to be consistent in the important features. We were able to group them into certain sections to determine what was a must, should, and could.
2.1 User Flows
We created three essential red routes that were the most important to the app because users would use these paths frequently. User flows help me see how users can achieve their intended goals.
3. Design
3.0 Low-Fidelity Wireframes
The team started to build low-fidelity wireframes to see how everything will be laid out. This helped us by having a better idea of how we want certain things to be on the screen. Due to a short time frame, we skipped the sketching and jumped right into low-fidelity wireframes.
3.1 UI Inspirations
Before moving forward we need to understand what the client wanted in the design. We created a mood board to see what the client would like. We wanted the colors to show the opposite of a typical dating app.
3.2 Hi Fidelity
With the idea of what to incorporate, we created 3 versions. We wanted the client to have options and be able to have different perspectives.
Noski and I chose a different color from what the client wanted. We went for blue and purple to resemble both genders, which can help it stand out from the competition. This was based in the Bay area where the culture differs from other cities.
3.3 Style Guide
A style guide was created to make sure the team will use the same typography, iconography, grid, and colors. This helped us be consistent across all screens.
4. Final Design
4.0 The Final
This was the final design that was chosen by the client because they did not want to change the colors. This is the design that they wanted because it made sense. The colors are easy on the eyes and the pictures are welcoming.
5. Handoff + Reflection
5.0 Dev Handoff
After receiving the thumbs up on the high-fidelity screens, the process for the handoff began. Annotations were added to make it easier for the developer to construct the app and landing page. By using the Figma plugin measure to help make sure the client can adjust our design.
5.2 Looking Forward
This project was an experience for me and something that I will not forget. Looking forward I will be voicing my opinions more. I did not voice my opinion as much because I had full trust that the team lead was on top of the design. Looking back at it no one has the answer to everything. A weakness of mine is trying to pitch an idea to a team lead.
5.3 Reflection
Working as a team was an experience for me. We all had different ideas that we wanted for this project. During creation, we all made different creations to only choose one. This was a great way to be able to work in a team and be able to work on your own and get feedback from your team. Google is my best friend forever when trying to learn something new on Figma.
Drop me a message
Let's share ideas & discuss ways to collaborate!