VOXI App Design & Redesign
MY ROLE
UI Redesign
Workflow planning​
PROJECT
Personal project
TIMELINE
One week (2023)
OVERVIEW
I was a user of VOXI when I was studying in the UK. However, I considered that VOXI's product design could have done better. I combined some feedback from other VOXI users around me and identified several areas for improvement. To enhance the user experience, I optimised the service by transitioning from a web-based interface to a dedicated app interface. The two main goals of this redesign are improving the experience of online customer support and the app visual design. At the end of this page, I put several key redesigned functions' prototype showing a clearer picture of the user flow and the visual design.
PROJECT BACKGROUND
About VOXI ...
​
VOXI is a virtual telecommunications service provider in the United Kingdom. It is a subsidiary of Vodafone, the largest telecommunications company in Europe.
Defying Problems ...
​
-
Compared to other telecommunications companies, VOXI is the only one that doesn't have a dedicated app for usage. VOXI only suggest users add a shortcut to their home screen through Safari, acting as an app substitute.
-
The browser's tab bar occupies a significant amount of visual space, limiting the available screen area.
-
There are two sets of navigation bars (bottom one and side sliding menu), which can confuse users when trying to find specific functions.
â–²
Two navigation bars. The functions in the bottom navigation bar may not be the most frequent use by users.
?
?
â–²
The side menu cannot be closed by clicking outside.
â–²
The side menu is different in My Account and Home page, which is quite confusing for users.
â–²
The VOXI logo is blocked by the browser's tab bar.
-
On the desktop version, accessing online customer support requires navigating through multiple levels of clicks. Although the mobile version has a clearer path, the interface doesn't align well with mobile usage habits. Also, the web version raises users' concerns about whether contacting customer support would start over if the webpage jumps or refreshes.
â–²
The large banner at the top occupies a large amount of space. Users cannot view the full chatbox window when they just navigated to the page.
â–²
Both the chatbox and the outer webpage can scroll, making it difficult for users to scroll the desired page as intended.
?
?
?
?
?
GOALS
Designing the app interface to avoid the reduced visual space caused by browser
1
Increase the accessibility and usability of online customer support
2
Actions
-
Enhance the visual design
-
Integrate the navigation bar
-
Shorten the path to reach online customer support
-
Adjust the chatbox to make it user-friendly
Ideate
A. Information structure
The default page when opening the app will be 'My plan', users can find out details about their current plan. I renamed the 'Plan' to 'Extras', and added the phone selling into this function. This will be like a online store for VOXI on app. In addition, I combined two navigation bars into one on the bottom with four most frequent-use functions. I moved 'Help' to the navigation bar and put 'Chat to us' under 'Help' as I considered they are same category. As for the functions in previous navigation bar, like 'VOXI Drops' and 'Refer to friends', I moved them under 'More' because of the low frequency of use.
â–² VOXI app information structure
B. Wireframe
UI Design & Prototype
A. Design kit
B. UI Design
1. My Plan
New Design:
​
-
Three sections: Current plan, Ads and Next plan
-
Add greeting words before user name, closing the distance between customers
-
Extras shows the functions that users has bought. Users can see more details by pressing on the extras.
-
Add Ads section for VOXI promotion. The ads are removable to avoid the negative feeling causing by unremovable ads.
-
Add Next plan section for users as a reminder. Users are also able to switch on/off recurring the plan.
2. Navigation Bar
BEFORE:
-
Two sets of navigation Bars (bottom one and side sliding menu)
-
The sidebar is different in My Account and Home page.
-
The VOXI logo is blocked by browsers tab bar
AFTER:
-
Integrated two navigation bars to one in the bottom.
-
Combined 'Phones' and 'Plans' into 'Extras': A online store in app
-
Switched main functions of the navigation bar: Added 'Help' and moved previous 'VOXI Drop' and 'Refer' to 'More'.
3. FAQs
BEFORE:
-
The top banner squeezes one-third of visual space to users.
AFTER:
-
Remove the top banner for more visual space
-
Add 'Chat to us' with linear stroke to make users easier to find and distinguish from FAQs.
4. Chat with us
BEFORE:
-
The large banner at the top occupies a large amount of space. Users cannot view the full chatbox window when they just navigated to the page.
-
Both the chatbox and the outer webpage can scroll, making it difficult for users to scroll the desired page as intended.
AFTER:
-
The redesigned layout resembles a messaging app, providing a spacious interface without distracting information.
-
Introduced a photo upload feature to enhance communication efficiency between users and customer support.
-
Removed the font size and notification sound settings, These functions are able to adjust in their system preferences.
-
Enhanced the user conversation box with different colour, making the interface less monotonous.
-
Adjust the corner radius of the conversation box to reduce its stiffness and create a more visually appealing look.
5. NEW FUNCTION: Chat History
After closing a conversation, users can access their past conversation history with customer support. This feature addresses a previous issue where a customer support agent would request the user to input a code, but the conversation was closed before the user could copy the code. This resulted in the need for the user to contact another customer support again, leading to a poor user experience. Therefore, by adding the chat history feature, users can have access to their previous conversations, and reducing the the work load of repetitive tasks for customer support agents at the same time.
The flow is shown as follows: (Prototype will be presented in next section)
â–² The unread message will show a red dot as a reminder
Click 'Close the chat'
(Chat ended)
Click 'Back'
(Chat still active)
1
2
â–² The Active chat will show the number of unread message, and the previous chat will be archived
â–² Users can check previous chats in archived if they need
C. Prototype
Login
Activate SIM
The login and SIM activation processes will remain consistent with the original web version. I made a few enhancements for improved clarity:
​
-
Added a gradient border around the selected plan in the Activate SIM section to highlight the chosen option.
-
Introduced a progress bar to provide users with a clear understanding of the overall process and the current step they are on.
-
Modified the promotional offers icon to make it more attention-grabbing.
My Plan
Chat to us
Purchase Phone
-
The carousel is able to switch automatically so VOXI could place the latest promotions.
-
Two filters are provided to make searching easier
-
When selecting the phone colour, the stroke and colour name will be shown.
-
The following steps will be the same as choosing plan in activate SIM, so I didn't put in the prototype.
Takeaways
Due to the limited access to research data, this self-project is insufficient in in-depth user research and competitor analysis. The data relied on feedback from users around me and my own experiences to drive the redesign. However, through this project, I realized that the inconvenience I faced as a user could potentially be shared by others. Optimizing the user flow can start from addressing these seemingly minor issues and making improvements.
Additionally, I discovered that interface visual design plays a crucial role in user satisfaction. The positive feedback received after implementing the design adjustments validated that the visual effects were more pleasing, and the new design felt more vibrant compared to the previous version. Throughout the redesign process, I made sure to preserve the brand's identity, avoiding any significant deviation that might create confusion or resistance among users regarding brand identity. I hope that VOXI will consider making relevant changes in the future to provide users with an even better experience.