vijay chekuri ux designer

PHONE@ website Redesign

People can Buy Prestine / Refurbished iPhones and able to Trade-in their old mobile phones. This website is under development(Backe-end) stage. This is a complete re-design.

Scroll Down
vijay chekuri ux designer

My Role

Research, Concept, Ideation, Wireframing, Prototyping, UX/UI, Front-end Development.

Duration

40 days.

Launch : 2019

Team Size

02.

1 (me) + 1 (Backend Developer)

Tools Used

vijay chekuri ux designer
In-Progress

1. Overview

PHONE@ is going to compete with the main iPhone sellers in the UK. This is a complete front-end redesign.

Functionality improvement is one of the core reqirement for this project due to a lot of competitors.

My role was to be the Full stack designer and Front-end developer for the redesigned site, implementing a User-Centered Design approach to the project.

2. Problems

  • Odd deisgn
  • Poor typography
  • Wrong Color selection
  • Limited Functionality
  • Filters
  • No Promotions / Banners
  • Less / Confusing information
  • Confusing user flow

3. Goals

This is an e-Commerce website so we wanted it make it simple to use without filtering products like any other website. This webiste is actually handle two main things which are buying any mobile and selling only iPhones.

  • Simplifying user journey
  • Smart shopping exprience.
  • Shouldn't go back to choose another product.
  • More informative / Less scrolling
  • Best Pricing
  • Sign-in / sign-up option
  • Address / payment options
  • Free Post label download facility

4. Competitor Research (#1 Trade-in)

In order to achieve such a goal, it was absolutely necessary to gain the information about where the old solution was failing and what business results should the new design bring.I lead and execute our on-site intercept surveys, extensive competitor / industry parallel analysis, broad and focused journey-mapping, and group requirement-gathering sessions.

I started off by looking at other websites to get an idea of their services and how we could differentiate ourselves. Often designs were tested as either paper mock-ups or clickable prototypes (using Axure or InVision), therefore we was able to test well before development was due.

vijay chekuri ux designer

4. Competitor Research (#2 Selling )

vijay chekuri ux designer

5. Old website Homepage

Looking at the old homepage below, it’s clear that the goal was to fit everything above the fold. I suspect that it may have been a business or marketing requirement at the time. It must have been tricky as there are quite a few elements to fit on the page.

Because everything is above the fold, however, the page is quite busy and cluttered, making it difficult for users to find what they’re looking for. We used insights from analytics and user feedback on the old Qantas homepage to help inform the new design..

ms-final

6. Information Gathering

Focusing on this target audience will help us provide a product that differentiates itself from competitors. I interviewed a few people and created some personas.I sketched out a few quick concepts for the homepage and then got straight into SketchApp.Since we needed to work with existing website elements, we decided to break things up into modules, prioritise them and sketch out ideas for each one and how they might be laid out on the page. I also came up with ideas for some simple new elements to improve the page.

When I sketch a new interface, I often like to draw components on paper and then cut them out and stick them onto a larger sheet of paper .

ms-final

7. User Flow Testing

We have tested the user flow few times and this is the final user flow for this website. This is better than the old website and user can run through the website very easily.

ms-final

8. Initial wireframing

Paper sketching makes it easier to move things around and change certain parts of the interface without needing to re-sketch the rest of it repeatedly.

ms-final

9. Med-Fed / Loading style wireframing

Once we were able to see all the pain points with the website, I was able to map both the severity and the (assumed) difficulty fix. When combining this with the previous persona work, this process would also help to drive development prioritisation as new features are being deployed monthly.These days, I’m finding that more and more people (including designers) are trivialising the importance of visual design. I hear statements like; “just make it look pretty” and “colour in the wireframes” all the time and I think they demonstrate an ignorance towards what visual design actually is. Sure, some elements of visual design are purely decorative, but if a design is done well, every visual detail will have a logical reason behind it that improves the usability of the product. Many of the products we use nowadays are basically a bunch of pixels that we see and interact with on a screen, so the visuals make up a large part of the product. I’ve seen many examples of how purely visual design changes to a product can dramatically improve its usability and desirability.

ms-final

10. Main Part (Shop Page)

Once we were happy with the new design above, we A/B tested it against the old one on a small portion of our user base.This is one of the main part of the website. No filters to select a product as you can see in the following images.

ms-final

11. Comparision

i did compare the old & new website. I did improve the every part of the website and did user testing at every step.Once we were happy with the basic concept, I moved into Sketch App to add some fidelity to the design so that I could create a clickable prototype.I built a quick prototype in HTML (screenshot seen above), which gave me the flexibility I needed to create the required layout. We tested out the prototype with all kinds of people, iterating on the designs based on feedback from each session.

ms-final

The Result

The new design of the web is clear, has modern graphic elements, and provides a simple solution of regular use cases. The structure and the content are understandable and consistent and acheived all the goals with flying colors.

In-Progress