Audit and Architecture

Turkcell wanted to combine a number of their sites that were separate. We began by conducting a site-audit of all their properties that they wanted to integrate. Using their business requirements we worked out which content and functionality needed to stay. I then used post-it notes to sketch out different options for the architecture.

Concept Sketches

Early site-map using post-it notes.

Adding Detail to the IA

Once a rough architecture had been defined, I produced a formal sitemap. This involved ensuring all content and functionality had been mapped from existing sites. I then assigned templates to each page. This helped in scoping and then continued to evolve through the project.

Sitemap

Sitemap. Pages are colour-coded according to template.

Wireframing

To work quickly through the large number of designs needed, we conducted regular client workshops. We would work through sections, get feedback and iterate before the next day.

Concept Sketches

Wireframe – Phone Category page (desktop).

screen name

Wireframe – My Account page (mobile).

Wireframe – My Bills page (mobile).

Modular Design

We created a component library that had both UX and visual versions. This meant that we could produce modular designs quickly and efficiently. It also meant that the visual team did not need to design every screen.

Concept Sketches

Component library – UX version.

Concept Sketches

Component library – visual version.

Finished Designs

Richard Baxter and Simone Cucchi produced the visual designs for the site.

Concept Sketches

Devices category page – final visual design.

A Personalised Experience

When a user signs in, the header area displays a mini-dashboard. This allows a user to see their remaining allowances and other key data from any page on the site.

browser image
Concept Sketches

Mini-dashboard.

Transparency of Information

Throughout the site infographics are used to make users’ data more understandable and transparent. On the My Bills page, for example, we highlight where users exceeded their allowance.

Concept Sketches
Remaining allowance animation

My Bills page (desktop and mobile). Credit to Richard Baxter and Simone Cucchi.