Indigo Android App Redesign
Project Brief
The following case study features a redesign of the Indigo app for Android.
It was a 2-day collaborative project I worked on with Chris Nguyen, Maria Rotella and Mahalia Thomas.
We chose the app as we felt the current solution doesn’t represent the Indigo brand well, nor does it reflect the company’s desktop website or in-store shopping experience.
We worked together to perform a heuristic evaluation of the current app, conduct user tests, identify opportunities for improvement based on our findings. We each then worked individually to create our own updated design solutions.
Software Used
- Sketch
- Photoshop
- InVision
- Craft Freehand
Collaborative Review
The first step we took was to each download the app and conduct a usability test.
The task flow that we chose was of a user navigating to a book page via one of the promotional categories.
We worked collaboratively using the Craft Freehand plugin for Sketch and InVision. This enabled us to quickly identify and share features of the app that we saw presented opportunities for improvement.
Deeper Research
After this initial analysis we conducted a heuristic evaluation of our chosen user flow within the app. We also conducted user interviews to gain additional insight into the performance of the app.
The pages we performed the research and evaluation on were the:
- Home screen.
- Category page variants.
- Book page.
As illustrated in the image below, our heuristic evaluation and user interviews uncovered further usability issues and ample opportunities for improvement:
"Is this broken?"
- User feedback
Key Design Opportunities
As the project came with a limited timeframe we decided to narrow down our scope and concentrate on what we found to be the key design opportunities uncovered during our research phase.
1) More prominent display of products.
The current app features only a few small images of books on it’s home screen and many of the categories navigated to from this screen contain text lists devoid of product photos.
This means that many uses have to dig a few clicks deep into the site before seeing an image of a book or other product.
2) Improve the affordance of actionable/interactive elements.
During our heuristic evaluation we came across instances of confusing or unclear affordance relating to several actionable elements of the app.
Key examples of this are the 'shop by department’ button on the home screen, and the Plum Points and ratings stars on the product pages.
3) Update the visual hierarchy of product pages.
The visual layout of the app’s product pages came up as a pain point throughout our user interviews.
The text hierarchy has room for improvement and there are many clashing highlight colours vying for the users attention.
4) Update colour scheme to match Indigo website.
With ‘Indigo’ and ‘Plum’ all being focal words in the brand lexicon, purples feature prominently on the desktop website.
These purples are missing from the mobile app and there is a visual disconnect between the app and website because of this.
5) Update the appearance of category pages.
As seen in images on this page there are several variants of category pages throughout the app. Some category pages are just text lists, some feature small images and some are hybrids (not shown).
In the instance of our chosen task flow, two pages are used when not really necessary. This leads to extra clicks and frustrations for the user.
Inspiration Gathering
For our inspiration gathering we looked to the Indigo desktop website for our main source of inspiration as we felt it important, from a brand perspective, that the app reflect this.
We couldn’t find an Indigo brand design style guide online, but we did come across a branding case study from the studio behind the Plum Points design.
We also looked at Reco, a book recommendation app, and Amazon for some competitive analysis.
Lo-Fi Wireframes
After gathering design inspiration, we began sketching out low-fidelity, analog wireframes as a team.
This was the last stage in our collaboration; after this we each worked on our own design solutions.
Hi-Fi Wireframes
The final step of the project was to create high-fidelity wireframes. This was accomplished by incorporating image assets taken directly from the current Indigo desktop website.
Explore the Redesign
1) Home Screen
- Branding updated to match that of desktop website.
- Products have been displayed more prominently.
- Screen has been opened up to allow scrolling and give content space to breathe.
- Affordance of the Shop by Department feature has been improved by using the same purple Indigo uses on it’s desktop website for clickable objects.
- Colour scheme updated to match desktop website.
2) Category Page
- Again, put products centre stage.
- Expanded the three subcategories to showcase the products within and save the user an additional click just to see what’s inside.
- Introduced a carousel format to allow browsing of the items within each subcategory.
3) Product Page
- Star rating are interactive and grouped with user reviews.
- Colour scheme updated to match the desktop website product page.
- Product image, rating, reviews and price all grouped together above the fold.
- Text hierarchy has been improved to reduce cognitive load on user.
What We Learned
1) Performing evaluative research as a team provides valuable insight into the different ways people view and interact with devices and applications.
2) Design can look easy, but it takes a team effort.
3) Everyone views problems and solutions through a different lens, so exploring them together opens us up to new possibilities and ways of thinking.
4) It is important to remember that design teams have deadlines and constraints. It is very easy to judge someone else’s work without knowing the full frame of reference and contexts for their output.
5) Our redesign just touched the surface; without knowing the research, data and testing that went into this work we simply don’t know the bigger picture behind the Indigo teams design decisions.
