ShopBack Home Screen

1. Kick off – E-commerce App Teardowns

• Gathered references of interesting mobile app features in China and South East Asia

• Went through with stakeholders as discussion prompts to surface long term goals

In future, the design will have to cater for horizontal expansion to more business verticals

We will also go deeper into verticals such as going into SKUs

2. Information architecture – How to sort things?

• Problem statement: How might we unify ShopBack features to encourage cross-adoption?

• Mapped out current structures to understand how things are organised, and what the potential difficulties will be

• Currently the app organises content (deals, merchants etc) by business units. For cross-adoption, we will need to restructure the system.

Recommendation: Organising content by topics / verticals will be good for cross-adoption because it more accurately reflects users’ mental models

3. Navigation & Structure – Proposal

• Created prototype to visualise the navigation

• Mapped out screens to show the different paths users can take

Recommendation: Provide a curated path for users who are browsing

Curated path can be done through Categories or Thematic content

More specialised content within a category will yield better performance for all BUs, because it’s aligned with user interests

4. Tree test – Are we in the right direction?

• Users were asked to complete 6 tasks inside a designed navigation tree

• To validate the idea of using product category verticals as the primary sorting method for online deals, products and offline merchants.

There’s evidence to suggest a topic-based approach to organising content is intuitive to users

When looking for something, most users don’t think about whether it’s online or offline

5. Design workshop

• Organised design workshop with product and graphic designers to come up with concepts for the ideal ShopBack experience

• Concentrated on visual and interaction design

Consensus: Personalisation plays a huge part in created an ideal experience

6. Design explorations

• Entry points – Explored the idea of photography-focussed cards that serve as alternative entry points to banners

• Page templates – Instead of manually creating powerscreens, we should have a few fixed templates for use cases such as campaigns

7. Product principles

• Proposed the long term approach for how content should be managed

• Introduced product principles for shortcuts and bottom navigation

8. External validation with users

• Tested two concepts with users to see how engaged they were towards the content

• We went through two rounds to make sure

• Total 13 users from ShopBack Insiders (a group of 100 users who’ve opted into testing new features)

More users preferred the more information-dense design

Flash deals and food-related deals were particularly engaging.

Personal preference of stores and items surfaced heavily influenced engagement

9. Internal validation with stakeholders

• Conducted workshop to refresh on project goals

• Shared concepts and test results with stakeholders

• Internal validation with stakeholders to evaluate designs against project goals

• Alignment on content requirements for home screen

10. Final design

• Focus on visual design and branding

• Spec out designs for engineering

• Explored different header designs

Bonus: Badges explorations

• We’re currently exploring concepts to keep users engaged with ShopBack

• Ranking is based on how much they spend (see the formula)