Design an app for a real-estate company. The user wants to set up a series of notifications for new listings that meet their criteria. They should be able to view any current notifications they have set, set up a new one, and delete or modify an existing notification.

To get a clear view on what journey the user would take, and what screens I had to design I started by sketching a general user flow without too much detail. Afterwards I translated those sketches to a digital file using MockFlow. During the rest of the design phase I’d make decisions that could affect the final flow diagram.

Because Toplister is a fictional company I had to design a brand identity as well. This wasn’t the focus of the project but I figured I had to atleast design a logo, brand colors and typography to get a coherent UI design at the end.

To define the colors I was going to use in the design I started by looking at competitor real estate sites and saw that they use a lot of red white and blue. I figured I'd keep the blue to invoke a feeling of security and calmness, and added orange as an accent to communicate some freshness and set the design apart from the rest. I played around with the values and saturation of the colors to create the accents.
I used Illustrator to design a minimal logo which consisted of a T and a roof, which seemed appropriate.
For the typography I chose the font Hind to give the design a professional but approachable look. I displayed the colors and typography along with the log, buttons and text form to see it all in action.

When I got a good understanding of the user’s flow through my app and website I could begin on sketching the screens. I started by creating quick sketches to validate my ideas about the layout. When I was satisfied with my ideas I translated the sketches into low fidelity wireframes using figma. At this stage I refrained from using color to make sure the information architecture and hierarchy were up to standards.

Now that I had a good understanding of what elements I would be using in my design I could start designing them. I aimed for the designs of the element to be consistent with the brand identity and the earlier designed buttons or text fields, so no element would fall out of place and stand out. I updated my style guide to keep as a reference for the next step. All the icons you see are designed by thenounproject.com

Now all the building blocks were created it was time to start building the house! Because a lot of the elements were designed, it didn’t take long to go from all the elements to the final screen designs. I started by adding the colors into my low fidelity wireframes. Afterwards I could insert the elements from my style, realign them using a 8px grid and the designs were as good as done.

With all the screens designed it was time to prototype. I decided to create a medium fidelity prototype for the mobile app to see the designed screens in action. I created this prototype in Figma.

Since this course was focused more on UI design than it was on UX design, it wasn’t mandatory to test my designs. I decided to do this anyway in a small and casual form. I tested the app with 3 users. I had the users perform 3 small tasks, and let them fool around with the app afterwards while I took notes.

Tasks

After the sessions I summarized my notes into 4 points for improvement:

I improved these points and finished my prototype, and the course. The illustration for the map, houses and profile picture I used vectors from Vecteezy.

The aim of this project was to master the UI design fundamentals. I would say I am well on my way. I’ve learned a lot during this course, but here are the three things that stood by me the most:

Atomic design
I was used to designing from the outside in. I made a rough sketch, and created more detailed designs along the way. By designing the elements first and then building the design I feel like I work way more proficient, and it comes in handy when I use the same elements on different designs. I’m planning to learn more about this ‘atomic design’.

Designing with a grid
I already was a bit familiar with using a grid while designing, but this was mainly for print. I learned a lot about using standard webdesign grids, such as a 12-column grid, or a 8px grid.

Design systems
Using design systems to display my UI work is something I knew existed, but during this course I got really familiar with building one. In this course I have been studying Material Designs by Google, but I am curious about other systems, so I will definitely check them out.

Bonus:
‍Refresh the design principles
Because of my experience as a graphic designer, basic design principles, like repetition, balance etc.) weren’t new to me, but it was very useful to refresh my memory of the design principles and to use them more mindful.

Would you like to talk about this project, or any of your projects? Send me a message and let’s talk!