Another approach to Meu Nextel application
Before I start to write this post, I’d like to make clear that I’m not a Nextel user, and decided to start this after hearing a friend complaint. His complaint was about the navigation flow, and how they were not using native interface and experience to build the app. I have zero experience with frameworks like Xamarin, or Sencha, but despite the fact I can do some HTML, CSS, and js coding, I always tend to use what the OS’s have to offer.
So I asked this friend to send some screenshots of the application. This is what he sent me:
It seems he forgot a few screens, but that’s fine. I’m sure I’ll have to assume a few things to change the experience and interface, so how a feature works should be no problem. There’s no need for all the screens because I’m not going that deep with this trial.
What we have
After login in, the user is presented with a top bar where there are 2 menus — or at least, two buttons that remind me menu buttons — with a dashboard screen, with the user name and its phone number, on-going invoice information with a green leaf and a summary of the actual data and minute percentage usage. There is also pagination which shows the data and minute information separately, with the real information, in minutes and gigabytes. Data consumption has presented both ways with a “+” button, letting you buy data and minutes packages.
Ok, let’s start tapping around. First, that green leaf.
It opens a modal informing the user can go “green” by avoiding his billing of being impress and sending it by email instead. So you activate it by turning the switch on and inserting your email in a text field. In the resume, it’s a billing feature.
The menu button presents a bunch of other features. Second billing imprint, Billing by email, Extra Internet, Automatic debit, Anti-theft, Change maturity date, Stores, Recharge, Plans, Doubts, Coverage, Internet Configurations. Ok, lots of information here. I’m not going too deep into each feature, but to structure it in a way that makes sense. What I did next was taking all that information and grouping them by relationship.
My line of thought
Each consumer has three line options: Pre-Paid, Control, and then, let's call it, Pay-as-you-use (i don't know if there's a name for that in English). I'll present myself as a user, with a Pay-as-you-use line, with a 5GB Familiar Plan. In this plan, I can distribute the number of minutes and data between members of my family.
So I wrote all the options and, based on the available features, grouped them in 4 main "pillars" that would be the default for every user, regardless of its line type and plan: My Nextel, Customer Service, Stores, and Configurations. This way, the screens can morph based on what the user possesses without compromising the user interface, merging it into a unique experience.
Wireframe
Based on that, I created the first wireframe screen. Look, I'm basically ignoring the registration/login for now, and focusing on the experience of the user after that process. My intention here is to organize what the app offers.
The final layout
I created just two screens based on that wireframe: The profile and consume screen. The result you can check below. I am still working on that as a case study for my portfolio, so as soon as I finish, I'll update this post with the URL.
Since this is my first post, I’d love to hear your thoughts on this. From the terrible English, to the UX process and UI as well.
