Ecommerce Phone Store


Client: TPO

The Brief
 TPO mobile, a mobile phone network based in the UK, were soon to be launching in the US market. The requirement was for a full customer website to enable purchasing of plans and account management. 
I was tasked as part of the Store production and agile development team to research, create user flows and wireframe prototypes as well as UI designs for the launch of the TPO Mobile store in the US. 

Research
I started off by understanding the business objective and alongside the Product Director and developers, I began to map the path to follow in terms of how our service would function. I subsequently spent 2 weeks in the US office working side by side with the team out there to understand and learn how users in the US shop for plans in order to understand the major differences from a user experience perspective  but also from a technical point of view. Once I had a good understanding of process to follow I began to look at other US Telco companies to see how they pass users through from picking a plan all the way through to account sign up.
Store_Research

User journey flowcharts
The process of picking a phone plan and signing up in the US is different to that in the UK. Taking the information learned from the research phase I was able to put together various user journey flowcharts for the more complex areas of the site e.g. sign up / plan selection / sim activation. Once these were created I presented these to the production team in order for everyone involved in the project to understand the steps from a UX perspective but also allow them to start understanding the technical requirements. Simultaniously these flowcharts were presented to stakeholders, US team members and 3rd party service providers* 

*These services provide the account activation as well as phone data segments of the site and are critical to allowing an active customer on the TPO network – so having them onboard and in agreement with the flows was critical to the process.

Store_Flows

Wireframe prototypes
Taking the signed off user journey flowcharts I began to work on the wireframe prototypes for the pages that would become the store site. Working alongside our US Head of Acquisition and key stakeholders and from our sales and customer care teams I worked on various versions of the store layouts and presenting to everyone involved at regular stages to ensure everyone was in the loop. These were presented by myself using UXPIN taking participants through the journeys allowing them to see how the processes work and enable them to feedback until we had signed off model to being both the development phase but also the UI design phase. Throughout this phase members of the development team were regularly included for their input and particular attention with our Lead Front End Developer to ensure my ideas worked from a responsive point of view – we worked closely throughout this phase to ensure a smooth process later in the project.
Store_Wireframe

UI designs
From the wireframes I began to work on the UI designs for each of the pages required, as part of my time in the US had been spent working with the TPO’s Creative Director and our appointed US brand agency on our new brand and subsequent marketing and design guidelines I was already familiar with the styles and approach I would take. Keeping the creative brief set by directors as “Clean, easy to use and on brand” on-board I began creating the UI concepts in photoshop. Again as with previous steps, various project participants were included to ensure a smooth project process. Various versions we’re created for internal launch through to soft launch and beta launch and finally live launch. All designs were presented using Invision as a way of enabling everyone on both sides to see the designs as close to a live site as possible.
Store_UI

Launch & end result
The store launched its 2nd cell phone user type as required on April 20th this year and has continued to grow in customer plan subscribers since. Constant reviews alongside sales, SEO and customer services teams allow me to adjust any part of the site we feel suitable when needed.
Store_Live

Review and analysis
Once the store site was launched I was heavily involved in the daily reviews of data from an acquisition side but also from a UX perspective, this enabled me to make sure that every part of the process for all of the store site elements was working as best as it could. Using tools such as Google Analytics, Kissmetrics and CrazyEgg I was able to gain insights into how the site was being used and make modifications when needed.
Store_Analytics

UA-4639441-1