{"id":275,"date":"2022-11-28T08:17:11","date_gmt":"2022-11-28T16:17:11","guid":{"rendered":"https:\/\/tiaogilvie.ca\/?p=275"},"modified":"2023-06-07T12:32:29","modified_gmt":"2023-06-07T19:32:29","slug":"freedom-mobile","status":"publish","type":"post","link":"https:\/\/tiaogilvie.ca\/?p=275","title":{"rendered":"Freedom Mobile"},"content":{"rendered":"\n<div class=\"wide-image-block\" id=\"hero\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"612\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/freedom-hero.png\" alt=\"\" class=\"wp-image-628\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/freedom-hero.png 1440w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/freedom-hero-300x128.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/freedom-hero-1024x435.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/freedom-hero-768x326.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading advgb-dyn-d55d20fd\" id=\"client-fad407c3-efed-4c0b-83ed-1c53ba4b17b3\">Overview<\/h3>\n\n\n\n<p>Freedom Mobile is a wireless telecommunications provider in Canada. It is the 4th largest provider in Canada.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading advgb-dyn-3de295b0\">Role<\/h4>\n\n\n\n<p>UI Designer<\/p>\n\n\n\n<h4 class=\"wp-block-heading advgb-dyn-b4e0f222\">Tools<\/h4>\n\n\n\n<p>Figma<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-8406a2c6\">Problem Analysis<\/h3>\n\n\n\n<p>Some of the issues I found are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Confusing flow<\/li>\n\n\n\n<li>Main sections are dropdown lists which results in continuous scrolling<\/li>\n\n\n\n<li>The grey colour for the background makes the app dull<\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-b061d992\">My Solution<\/h3>\n\n\n\n<p>The idea behind the redesign of this application is to make the user feel like they are using a mobile app and not just a website on a mobile phone. A lot of the screens for the mobile app are in fact webpages inside the app.<br>Additionally, I wanted the app to feel lightweight which is why I used the light blue colour as the background and also white.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-22893053\">Current Design vs My UI Redesign<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1036\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1.png\" alt=\"\" class=\"wp-image-622\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1-300x162.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1-1024x553.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1-768x414.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/1-1536x829.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The idea behind the redesign of the splash screen is to make it easier on the eyes and place more emphasis on the logo mark.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1036\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2.png\" alt=\"\" class=\"wp-image-623\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2-300x162.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2-1024x553.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2-768x414.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/2-1536x829.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>For the Home screen, I have decided to give the user a glimpse of some of the information that may be important to them. This is in contrast to the original design where users can access all the information from the dropdown sections of the home screen. I also created a bottom nav in order for users to have easy access to the app\u2019s main features.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The logo was removed in order to create some breathing room for the Profile and Notification icon.<\/li>\n\n\n\n<li>The profile section was moved to the top navbar as this is where most users expect it to be.<\/li>\n\n\n\n<li>The notification section was also moved to the top nav because this is also the expected location for users.<\/li>\n\n\n\n<li>Adding this personalised greeting here makes the user feel a bit more homey and gives the user a sense of ownership.<\/li>\n\n\n\n<li>I have placed some emphasis on the \u201cMy Balance\u201d section by recreating it as a card and highlighting it with the orange colour of the brand.<\/li>\n\n\n\n<li>I also renamed the the Top Up Now button to \u201cPay Bill Now\u201d because the balance is for the user\u2019s bill<\/li>\n\n\n\n<li>This shows what Postpaid plan the user has.<\/li>\n\n\n\n<li>The remaining data for their plan<\/li>\n\n\n\n<li>The amount of text sent during the current bill cycle<\/li>\n\n\n\n<li>The amount of call minutes used during the current bill cycle<\/li>\n\n\n\n<li>Home icon is active so it become a filled yellow icon. Otherwise, it is blue outlined.<\/li>\n\n\n\n<li>Bill Icon for the billing screen<\/li>\n\n\n\n<li>Usage icon for the usage screen<\/li>\n\n\n\n<li>Subscription icon &#8211; this section was renamed from Plans &amp; Add-Ons because it may the original name may confuse the user if they are looking for the section to purchase a plan or add on.<\/li>\n\n\n\n<li>Settings &#8211; not in the original design<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1036\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3.png\" alt=\"\" class=\"wp-image-624\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3-300x162.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3-1024x553.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3-768x414.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/3-1536x829.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>For the Billing Screen, I took the information that was in the billing section of the home screen from the original design and placed them on a separate screen for the new design.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The Payment details section is visible when the user selects \u201cSee Bill Details\u201d button in the \u201cMy Balance\u201d card. I used a drawer instead of a dialog\/pop up because this is more cleaner.<\/li>\n\n\n\n<li>The My Balance card was brought over from the home screen\/balance section in the original design and into the Billing screen here in the new design. This is because the balance is for the user\u2019s bill. It is also showing the next billing date.<\/li>\n\n\n\n<li>I used a breadcrumb here because the app can be big and it may help users to easily backtrack if the need to.<\/li>\n\n\n\n<li>This leads to Payment History for the user<\/li>\n\n\n\n<li>This navigates to Manage autopay so users can update or remove autopay.<\/li>\n\n\n\n<li>Instead of listing out these two links, I have put them iin one section which is the FAQ (Frequently asked questions) section<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4-300x200.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4-1024x683.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4-768x512.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/4-1536x1024.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>For the Data card in the redesign, I combined the data section and the summary usage section of the original design. This is to reduce some redundant information and possible confusion.<\/li>\n\n\n\n<li>The talk card is similar to the original design however, instead of the user having to look at the top of the card then the bottom of the card to figure out what this number is for, I have placed the network and unit together.<\/li>\n\n\n\n<li>The Text card is same as the idea behind the Talk card.<\/li>\n\n\n\n<li>User\u2019s usage history<\/li>\n\n\n\n<li>Instead of the user seeing the note details right away (old design), they now have to click the info icon to get that information.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1036\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5.png\" alt=\"\" class=\"wp-image-626\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5-300x162.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5-1024x553.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5-768x414.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/5-1536x829.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<p>The idea behind the subscription section is to show the user what plans and other products they have subscribe to.In other words, the postpaid plan they have and any active add-ons or one-time passes.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>User\u2019s postpaid plan<\/li>\n\n\n\n<li>User\u2019s active add-on name and the activation date.<\/li>\n\n\n\n<li>Button to manage passes<\/li>\n\n\n\n<li>Active Subscription icon<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1036\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6.png\" alt=\"\" class=\"wp-image-627\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6-300x162.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6-1024x553.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6-768x414.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/6-1536x829.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>For the redesign, the user has to click the info icon in order to see the details of the feature. In the new design it is shown as a drawer instead of a dropdown<\/li>\n\n\n\n<li>Instead of the enable button, I have used the toggle which easily allows the user to turn on or off a feature.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading advgb-dyn-ff7a85ae\">UI Kit<\/h3>\n\n\n\n<div class=\"wide-image-block\">\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1608\" src=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile.png\" alt=\"\" class=\"wp-image-629\" srcset=\"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile.png 1920w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile-300x251.png 300w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile-1024x858.png 1024w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile-768x643.png 768w, https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/06\/ui-kit-freedom-mobile-1536x1286.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Overview Freedom Mobile is a wireless telecommunications provider in Canada. It is the 4th largest provider in Canada. Role UI Designer Tools Figma Problem Analysis Some of the issues I found are as follows: My Solution The idea behind the redesign of this application is to make the user feel like they are using a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":495,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[15],"tags":[],"class_list":["post-275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design-study"],"author_meta":{"display_name":"tiaogilvie","author_link":"https:\/\/tiaogilvie.ca\/?author=1"},"featured_img":"https:\/\/tiaogilvie.ca\/wp-content\/uploads\/2023\/05\/freedom-300x260.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/tiaogilvie.ca\/?cat=15\" class=\"advgb-post-tax-term\">UI Design Study<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">UI Design Study<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 3 years ago"},"absolute_dates":{"created":"Posted on 28 November 2022","modified":"Updated on 7 June 2023"},"absolute_dates_time":{"created":"Posted on 28 November 2022 8:17 am","modified":"Updated on 7 June 2023 12:32 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=275"}],"version-history":[{"count":12,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/posts\/275\/revisions\/631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=\/wp\/v2\/media\/495"}],"wp:attachment":[{"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiaogilvie.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}