Setting UI
Fun on every Touch
The Product :
Setting App Ui that make user customize there phone settings very easily and quickly .
Duration :
September 2021 to November 2021
Tools Used :
Pen & Paper
Sketch
Marvel
Principle
- Understanding The Challenge -
Summary :
The core of the challenge was "to mange the time as much as possible ", which is surrounded by a number of tasks. For example, finding options in different pages , changing the color of all phone as per the mood. I did not want to jump right into ideating concepts based on assumptions. Instead, I wanted to understand as much of the color & design planning experience as I could in this limited amount of time to make sure my concept was effective and valuable to users.
The Gole :
As a UX designer & UX researcher , I played all the roles required for this project eg-Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs. My Goal was to design an Setting app UI for end users that allows users to easily customize phone settings in just few seconds .
- Research -
Interview :
Style is such a subjective field that almost everyone has their own definition. I decided to first talk to 5 people in my network. In the recruitment, I tried to have people different in age and profession for better generalizability.
Also, I created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was working adults who don't have time to go in-depth of phone setting to customize.
This user group confirmed initial assumptions about smart phone customers, but research also revealed that time was not the only factor limiting users from customization. Other user problems included obligations , interaction , or accessibility that make it difficult to customize setting for comfort use of smartphone .
Persona Development:
I quickly coded the responses from the interviews and found that customizing phone considered the central task because it took place almost everyday and the process involved the most pain points, which will be discussed in a later section.
In the fast world almost everyone wants that do anything as much as possible. Everyone wants the single touch solution of any problem.
The communication with the partipants helped me create the following two personas.
Problem statement: EMMY is a student who need setting UI where she can quickly customize her phone’s volume, display and internet settings because she want to present her project demo via her phone to the teacher without any disturbance in phone.
Pain Points :
During the persona creation and discussion with the end users i noted some pain points of the users that they are facing everyday .
Time
Working adults are too busy to spend time for customize phone settings.
Accessibility
All smartphone settings UI are not equipped with quick assistive technologies .
AI
Without option icons in settings app UI are often difficult to understand to opt quickly wright option.
Process
There is no search baar to find option , if option is not listed in main page.
User Journey Map :
Mapping Emma's user journey revealed how helpful to have access to a quick responsive setting app UI.
![Google UX Design Certificate - Persona [Template].jpg](https://static.wixstatic.com/media/d2d3b4_7cec328b4e3e44a1be6bd7ca68be31e4~mv2.jpg/v1/fill/w_599,h_337,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Persona%20%5BTemplate%5D.jpg)
My next step was to tell a story of how my personas were currently carrying out the tasks. My main strategy here was to
Sketching w/ Pen & Paper :
Paper Wireframe :
Taking the time to draft iteration each of the screen of the app on the paper ensured that the element that made it to digital wireframe would be well-suited to address users pain points . For the main screen, I prioritized a quick and easy customizable process to help users save time.
Main Page
Other network setting
SIM Options
SIM Details
Bluetooth Options
Wi-Fi options
High-Fidelity Design :-
In this phase, my emphasis was put on visual consistency and how my interface and interaction could serve the core functionalities. Also, I challenged myself a little bit by using iPhone X as the device.
Airplane Mode On
Profile
Easy navigation way a key users need to address in the designs in addition to equipping the app to work with assistive technologies.
As the initial design phase continued ,
I made sure to base screen designs on feedback and findings from the user research.
Used icons to help make navigation easier.
- Design -
Entering the design phase, I kept in mind everything I had collected so far - personas, their pain points, and the new flows. I started visualizing stuff by roughly sketching out concepts.
I was able to obtain some heuristic feedback from my peers before starting high-fidelity design.
- Prototype -
- Evolution -
Usability study :-
After the prototype was finished, I went through a set of usability tests. One detail of the initial prototype was complained about multiple times.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Mockup :-
Using the completed set of digital mockups, I created a hi-fidelity prototype. The primary user flow I connected was building and customizing settings, so the prototype could be used in a usability study.
Early designs allowed for some customization,
but after the usability studies,
I added back options to make easy navigate though the pages. I also revised the design so users see the transition effect while clicking the option.
When deciding the visual style of the app, I kept in mind that should be inspirational insead of leading. It should support the content.
With mostly black and white, combined with a little bit of accent color, the UI does not overshadow the colors of the icons themselves while still reminding the user of mood and style.
- Visual Design -
