I designed a dating app based on a Daily UI challenge prompt focused on creating a messaging page.
I focused on creating the essential pages that go into a dating app, and refined my designs as I continued working on the design process.
First Things First
I didn't start this project with the intention of creating an entire app.
I originally started working on this because I received a DailyUI prompt in my inbox that suggested I design a messaging page. I thought it would be fun; I mean, I look at messaging screens every day, how hard could it be?
More challenging than I had anticipated, to be honest. I laid out the structure of how the message bubbles would look, but realized that I had to incorporate more white space between each text bubble and perfect the width of each bubble to make sure there wouldn't be too many words on each line.
After I completed the messaging page design, I realized something...
My goal: to develop this into an entire project with multiple pages and interactions.
The App Design Process
I was eager to develop this project further, so I listed pages that would be relevant to a dating app, such as the "You Matched!" page. Then I sketched out wireframes of the page structure to get the basic building blocks down.
After I designed each page, I indicated what multiple user journeys would look like.
Iterations
I decided to leave the first drafts of my designs alone for a few days. When I revisited the designs again with fresh eyes, I made some changes to the layout and copy.
I
Key Takeaways & Outcomes:
-I learned that something as simple as a messaging page could excite me enough to develop it into a full project.
-It's important to check that color combinations contrast enough to meet color accessibility requirements to make sure all users can easily use an app. Here, the different hues of purple that overlap in buttons and text on menu page meet the Level-AA requirements Web Content Accessibility Guidelines (WCGA), hailing in at a 3.29:1 ratio, which passes because it's above 3:1.
- While I achieved my goal of creating a dating app with multiple pages and interactions, I came across a few obstacles such as creating the prototypes with realistic user flows. Thankfully with time and patience I was able to achieve this by understanding what users may be clicking on throughout their time on the app.
-There's always more that can be tweaked and more pages that can be added. The more you step away from a project and return to it, the easier it is to see flaws and ways that they can be improved.
-More pages comes more responsibility, and I learned that organization is vital in order to create a smooth process. I got a bit lost in directing the flow of each page, but the challenge was invigorating and it's something I'd like to continue working on.
-With years of experience in graphic design, I've seen countless projects develop, change, and take their own form until completion. It's nothing new to me necessarily, but this process has reminded me that documentation of each step is necessary in order to see how the project grows and flows.
-Based on this experience, I think it will be important to write about the purpose of the project and of each page so I can have a strong understanding of how each page interacts with others before I even dive into the design.
View high-fidelity prototype below:
https://www.figma.com/proto/13TjDM3OTzEtO2YmzQdDFj/Dating-App-Creation?page-id=0%3A1&node-id=101%3A4&viewport=152%2C820%2C0.14&scaling=scale-down&starting-point-node-id=101%3A4
https://www.figma.com/proto/13TjDM3OTzEtO2YmzQdDFj/Dating-App-Creation?page-id=0%3A1&node-id=101%3A4&viewport=152%2C820%2C0.14&scaling=scale-down&starting-point-node-id=101%3A4
Image Credit:
- Image of "Beth" by Matt Antonioli on Unsplash: https://unsplash.com/photos/uvbMz9dB0DQ
- Image of "Taylor" by Brooke Cagle on Unsplash: https://unsplash.com/photos/dGK3ynaDNCI
- Image of "Jamie" by Anastasia Vityukova (@Anastasiavitph) on Unsplash: https://unsplash.com/photos/IzhYOr1zxg0
- Image of "Kaya" by Joel Mott (@Joelmott) on Unsplash: https://unsplash.com/photos/LaK153ghdig
- Image of "Aimi" by Noémi Macavei-Katócz (@noemieke) on Unsplash: https://unsplash.com/photos/or6mrFMVmHM
- Image of "Cameron" by Caitlin Venerussi (@caity_ven) https://unsplash.com/photos/odyBrpfeKQg
- Image of girl with red hair by Lua Coralina (@Luacoralina) on Unsplash: https://unsplash.com/photos/YtbKT_E-UgU
- Image of the girl in red by Jernej Graj on Unsplash: https://unsplash.com/photos/GY5gWDimEyg