We divided into groups of 2 to create our designs
About the Project
My Role: UI Designer
Project Duration: May - June 2022
The Product: Getting out of the house and finding places to go on a date with your loved one can be difficult to do. The Date Nite app makes date nights simpler. The app offers a range of places and activities for couples and singles to spend quality time together.
The Problem
The Creator/Developer of the app wanted a redesign of the user interface
The Original UI
Oct. '20
Launched
100+
downloads
4.5★
6 reviews
The Project
The Team
A fellow designer reached out looking for help to complete this project. I joined and was able to work with 3 other designers to design a new interface for this app.
The designs you'll see here today are the ideas and creations of my partner and me.
Explore, Favorites, Date Plan, Settings, Search
Objective
The owner of the app wanted us to focus on 5 pages to redesign for this project.
The Explore page: Users will be able to discover locations for dates.
The Favorites page: Where users will be able to see the locations they saved.
The Date Plan page: The user will be able to create a date plan that they will be able to share with their date.
The Setting page: Here the user will be able to make any basic changes to the app (i.e. light/dark mode, terms and privacy, and find help).
The Search page: Users will be able to search for locations near them.
Discovery
Here I sketched some ideas I had that would improve the interface of the app
Paper Wireframes
I usually start the design process with paper wireframes. Drafting iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Paper wireframe objective:
The main purpose of these sketches is for brainstorming ideas.
Understand how the user will create a date plan.
Create an easy flow for the users.
We decided instead of a search page, that it would be faster for the user to search straight from the explore page.
We really spent time on our sketches and communicated with each other about what we thought would be best for the user, so a lot of our original sketches are in the final finish.
Lo-fi wireframe of Explore page
Lo-fi Wireframes
At the beginning of our design process, we created wireframes using Figma.
Objective:
Design important wireframe pages first then fill in the gaps with needed frames.
Make the explore page inviting to the user by providing recommendations and nearby places that people are currently raving about.
Redesign the Date Plane page, so that it has a use and not just another page to look at location information
Redesign the favorites, so users can group like locations into a category.
Refining the Design
Style Guide
We decided to use Poppins as our font for a clean design. The colors were chosen by the owner of the app, who wanted these colors in the final design.
Hi-fi of the Explore page
High-fidelity wireframes
Once we figured out the direction we wanted to go in, we started designing the final screens in Figma.
After submitting our designs. The owner selected what they liked from each design. We then worked to make both separate designs work as one.
IOS
Platform
18
Screens
Light
Visual Style
App Update Coming Soon
What have you learned from this project?
Redesigning Date Nite was such a positive learning experience. Starting from ideation to high-fidelity prototypes taught me so much about the fast-paced design process. When there isn't money to do user testing, you have to put yourself in the user's position. "What are the steps I would take when planning a date?" We are a group of four designers, so everyone will have different opinions. Having a concrete understanding of how users think, and feel is essential to making the right design decisions along the way. It was key to identifying potential features and improvements without spending much time on the design. The biggest takeaway from this project is that everything that I design might not get developed, and that is okay.