Day 7 - Settings

Today’s challenge was to design a settings page. Somewhat vague. I decided to take my design from day 6 (profile page) and add a settings page to that!

Since the profile page already had a settings icon in the top right corner, I decided to have the settings page be an overlay and come in from the right. I’ve been wanting to test this out on a new project (I originally tried this on my flower app) and this was the perfect opportunity.

I also wanted the overlay to not span the entire width of the page to allow the user to click outside of it in order to close it.

Here is a look at the final design:

While the design itself is simple, this challenge presented me the opportunity to build and prototype a toggle button and work with components and overlays in Figma. It’s nice to work on the basics and build from there!

I have attached an updated version of the prototype below:

You will see that I have also added a coupon pop-up. This is something my mentor and I discussed adding to the flower e-commerce app. While I did play around with it on that app, I like how it turned out better on this one. Being able to see growth in myself from week to week in instances like this is decently motivating. Looking forward to the next design!