UI Challenge 007: Settings
My next challenge came in the form of creating settings – for anything – and I decided to stay on the travel female user profile path that I had started in my previous challenge.
Settings are key to any type of connection app – be it for dating, networking or for finding friends. It’s important to allow the user to make their own decisions about what they do and do not want to share, the types of notifications they will receive, and being that it was a hypothetical female traveler app giving users the ability to change their location as they were on the go was very important.
My mission: To design settings for a product. The settings could be related to security or privacy or a game. The decision was up to me, as long as I defined what the settings were for and their important aspects.
The user(s): Similar to my last challenge, the user for these settings is millennial female travelers who are utilizing a connection app in order to find and connect with likeminded female travelers.
The problem: Female travelers wish they had the confidence and power to manage their online profile in a way that would encourage genuine connections and limit the amount of personal data and information they knowingly share.
My solution: To design an all-encompassing settings menu page – within an app – that allows users to manage the content they see, security and their user account.
Brainstorming Sketch
Being an avid social media user I am well aware of the types of settings common to these types of networking and connection apps – and I knew I needed to integrate some of the features most users are currently aware of and used to.
As I began to put pencil to paper I had a short list of “must” features to include in my settings design:
Language preference
Dark and light mode preference
Travel mode – e.g. the ability to change location more frequently if a digital nomad
Notification preferences
Help center
Icons to indicate the various setting options
Mid-Fidelity Wireframe
After narrowing down these features through sketching I went into Figma to create an initial mid-fidelity wireframe, setting from a UI library and design system I created.
It is key to note, that if this was a product I was working through for a case study – which could very well be the case in the future – I would also include a brand logo at the bottom of the screen, along with the app version number and copyright information.
High-Fidelity Solution
For the high-fidelity wireframe I stuck to the turquoise branding colors present in the user profile design, as well as the same font, imagery and iconography, resulting in the following final solution.
