LinkedIn Email Me
Shopify ecommerce stores

Retention.com

Head of Design
Style Guide: Rebrand

Maximize untapped revenue for your e-commerce store.

Retention.com integrates with the world’s leading marketing automation platforms to maximize audience growth, reclaim abandonment cart revenue, and re-engage lapsed audiences through industry leading data integration systems.

Learn more about the company

email

collection

contacts

collection

add to cart

abandonment

viewed

product
Objective:

TThe primary objective of this app revamp project was to elevate the user experience by addressing pain points, improving functionality, and implementing a visually striking design. The app's existing interface had become outdated and lacked a cohesive visual language, which called for a comprehensive redesign to meet modern standards and align with the brand's identity.

Modernizing the App
A User-Friendly Revamp

User Interview

I conducted user interviews to gather valuable insights and feedback, informing the design process and ensuring user-centric solutions.

User Flow

I carefully designed user-friendly pathways, optimizing interactions at every step for a seamless and enjoyable experience.

Visual Design

I revitalized the project's outdated appearance by infusing it with a fresh and modern design, significantly improving its visual appeal.

UX Design

I enhanced the project's UX by incorporating user interview feedback, resulting in a more intuitive experience.

Prototype

I created a clickable prototype, enabling clients to provide feedback and iterate on the design for further improvements.

Usability Testing

I utilized the prototype to conduct usability testing, gathering valuable insights to meet user expectations.

process
Original App Pages:
A Comprehensive App Revamp Project

(old) App Design

Outdated Interface:

The old app had an outdated and unappealing user interface that did not align with modern design standards. It lacked visual hierarchy, consistency, and a cohesive visual language.

Visual Inconsistencies:

The app lacked visual consistency, with different sections having varied color schemes, typography, and iconography. This inconsistency created a disjointed and unprofessional look and feel.

Poor Usability:

Users faced difficulties navigating through the app due to complex menus, unintuitive layouts, and inconsistent navigation patterns. The information architecture was confusing, making it challenging for users to find the desired features and content.

Graph Data Frustration:

The old app presented graph data in a confusing manner, hindering users' ability to understand and interpret the information effectively. Enhancing the visualization of graph data was crucial to provide a clear and intuitive representation, enabling users to derive meaningful insights with ease.

Main call to action:

The main call to action 'Test My Script' was buried under multiple tabs, causing difficulties for users to find and engage with it. By combining the integration options with the url test section, the user experience was significantly improved, and friction was reduced.

User-centered design process

01
User
Research and Discovery Phase
03
Mockups
and Prototyping
02
Usability
Testing
04
Iterative Design
and Refinement
Unveiling Insights
Key Questions Explored in Interviews
Frequency of Use

How often do you currently use the app's dashboard—daily, weekly, or monthly?

Can you describe the typical tasks or activities you perform on the dashboard during your usage?

User Goals

What specific goals or tasks bring you to the dashboard?

Are there particular features or information you regularly seek on the dashboard?

Content Relevance

What type of information is most valuable to you on the dashboard?

Are there any specific data points or metrics that you feel are currently missing?

User Journey

Can you walk me through the typical flow or steps you take when interacting with the current dashboard?

Are there any pain points or challenges you encounter during your interaction with the dashboard?

Customization Needs

How important is customization on the dashboard for your workflow?

Are there specific elements or sections you would like to be able to customize?

Competitor Comparison

Are there other apps or dashboards you use that you find particularly well-designed?

What aspects do you like about them?

Improvement Suggestions

If you could change or improve one thing about the current dashboard, what would it be?

Are there any additional features or functionalities you wish the dashboard had?

Data Export Functionality

How frequently do you find the need to export data from the dashboard?

Are there specific data export features or functionalities you would like to see improved or added to enhance your experience?

Customers' goals

"I aim to export a weekly dashboard summary, allowing me to easily share a concise overview of my store's performance metrics, including sales and revenue. By streamlining my data analysis process, I seek to gain valuable insights that will inform my business decisions."
Jeremy Collins
Shopify Store Owner
"I want to determine if Retention's product is generating sufficient revenue to be profitable and cover expenses. Additionally, I have a desire to track the effectiveness of my marketing initiatives and evaluate the return on investment (ROI) for various advertising channels."
Sarah Thompson
Shopify Store Owner
"I want to export a weekly dashboard summary to obtain a concise and easily shareable overview of my store's performance metrics, including sales and revenue. By streamlining my data analysis process, I aim to gain valuable insights that will empower me to make informed business decisions."
Emma Collins
Shopify Store Owne
"I am seeking a dashboard that offers clear visibility on the best-selling product in my store. My objective is to easily identify the top-performing item, allowing me to allocate resources effectively and make informed decisions to drive sales and maximize profitability. By having this information readily available, I aim to optimize my product offerings and stay ahead of the competition."
Mark Johnson
Shopify Store Owner
Seeks a dashboard that prominently displays the best-selling product in his store. His goal is to quickly identify the top-performing item to optimize his product strategy and drive revenue growth.
Mark Johnson
Creative director
thoughts and insights
Takeaway from interviews
1
Revenue Generated

Is this product generating enough revenue to be profitable and cover expenses? The client aims to evaluate if the product generates enough revenue to be profitable and cover expenses, allowing them to make informed decisions to optimize profitability.

2
ROI

By analyzing the ROI, clients can identify which channels deliver the highest value and allocate their resources accordingly. This approach enables clients to make informed decisions regarding their advertising strategies, focusing on the most effective channels.

3
Custom date picker

Would provide clients with the flexibility to select specific date ranges for analyzing and tracking their store's performance metrics, facilitating more precise data-driven decision-making.

4
Exporting Summary

Exporting a weekly dashboard summary provides a concise and shareable overview of store performance metrics, enabling informed decision-making.

5
Clear Descriptions

Users express confusion regarding certain names and desire descriptions to understand the meaning of each flow name. They seek clarity and information that would help them navigate and comprehend the purpose of each flow effectively.

6
Graph Toggle

Users struggled to utilize graph data to its full potential as they attempted to toggle between different options. However, the lack of indication that the graph was clickable resulted in their inability to explore different views and extract valuable insights from the data.

Dashboard Redesign

Revamping the dashboard interface to enhance usability, optimize data visualization,
and improve user engagement for an intuitive and efficient user experience.
Highlights of changes

The goal was to elevate user satisfaction and create a more engaging experience.

  • Added neon color backgrounds to each total to create visual emphasis and make revenue figures stand out for easy recognition.
  • Implemented an email summary export button, enabling users to generate and receive a concise summary of the dashboard for a specific time period via email.
  • Introduced info icons that provide additional information and descriptions when hovered over, enhancing user understanding and providing context for each section of the interface.
  • Implemented visual enhancements by adding underlines to graph options ('meta', 'acquired contacts') to clearly indicate that users can click and toggle between them and change the graph view accordingly. Additionally, color coding was introduced to provide further visual cues, improving the user experience and facilitating seamless navigation through different graph views.
  • Expanded the data visualization capabilities by introducing a cohort graph specifically designed for orders. The cohort graph now displays essential metrics such as the monetary value of orders, unique orders, and total orders. This addition provides a comprehensive and visually engaging representation of order patterns and trends over time, allowing users to gain valuable insights into customer behavior and the overall performance of the business.
  • Enhanced the user experience by incorporating a landing page info feature, which enables clients to view the specific landing page that users were on when they made a purchase. The landing page info displays the top five results, providing immediate insights.Additionally, a convenient "view more" button is available, allowing clients to access the trends page and explore the complete list of URLs for a comprehensive analysis of user behavior and conversion patterns.
the results

Revamped App Design:
High-Fidelity Visual Concepts

Conclusion:

RRevamping this app was a rewarding journey that allowed me to showcase my skills as a product designer. By leveraging user-centric design principles, conducting thorough research, and utilizing iterative prototyping, I successfully transformed the app's interface into a visually appealing, intuitive, and delightful experience. This project highlights my ability to blend aesthetics with usability while considering the target audience's needs and preferences.

Impact and Results

The App Revamp project successfully transformed the existing app into a visually appealing and user-friendly platform. Through an iterative design process and continuous collaboration with stakeholders, we achieved the following outcomes:

Enhanced User Experience

The app revamp project successfully enhanced the user experience through extensive research, resulting in a redesigned interface, simplified navigation, and intuitive features that provided a seamless and engaging user journey, ultimately increasing user satisfaction.

Improved App Performance

The project team prioritized app performance and stability by addressing performance issues, reducing loading times, and resolving bugs and crashes, resulting in an app that exhibited improved responsiveness, smoother animations, and overall reliability. Users benefited from faster app launches, quicker task completion, and an enhanced browsing experience.

New Features and Functionality

The app revamp project successfully introduced new features and functionality, selected based on user needs and market trends, including advanced search, personalized recommendations, social sharing, in-app messaging, and third-party integrations, resulting in increased user engagement and satisfaction among both new and existing users.

Prev project
Flexspring
Promet Source
Next project