Web Development, UI/UX Design, Prototype

Stars4U

Stars4U is an innovative digital platform envisioned to revolutionize the traditional greetings and gift card markets by offering environmentally friendly alternatives while ensuring scalability to accommodate a large user base.

Dashboard

Challenge

Our primary concern for the app was ensuring our behind-the-scenes software could handle the sheer mass of users Investor Brands is going to experience. The challenge lies in developing software that can handle a massive influx of users while maintaining affordability and robustness, requiring careful optimization of resources and technologies.

Outcome

Web application was meticulously designed and developed to ensure efficiency and responsiveness across various devices and browsers. The app features visually appealing and informative charts that enhance the user experience and provide valuable insights into avatar data. Additionally, careful consideration was given to user interface design to ensure intuitive navigation and accessibility.

Role

Full Stack Developer &
UI/UX Designer

Case study

Stars4U was first imagined by Investor Brands founder, Simon Brown, when he realised the cumulative cost, financially and environmentally, of the many greetings cards he bought every month. There were around 834 million physical greetings cards purchased in 2020. We’d bet nearly every one of them was thrown away within a week. Simply put, the greetings and gift card markets are outdated, environmentally unfriendly, and ripe for disruption.

Technologies

VueJSTailWindSassChartJSViteBitbucketPHPLaravelPestFigmaIllustrator

Research

During the research phase, I sought to understand the frustrations our clients go through everyday and what information impacts their business the most.


After a few sessions with my team and talking to our clients we come up with these insights:

  • 1. Clients normally have more than one company with multiple Business Units
    • 2. Clients want full company analysis both with single or multiple unit analysis:
    • - Company analysis is done only on one company at a time
    • - Units are treated as filters which will bring clients more flexibility
    • 3. Clients want to see:
    • - Unit Comparison by time
    • - Revenue Unit Comparison
    • - Income line chart
    • - Top items
    • - Sales filtered by category
    • - Staff sales overview
    • - Loyalty report
    • - Warehouse status
    • - Receipt overview
    • - Revenues and expenses
    • 4. Sale Reports:
    • - Time
    • - Sector
    • - Staff
    • - Payment method
    • - Sale

User Experience


Mobile Application

Onboarding

Onboarding screen is allowing users to easily access their personalized accounts or create new ones. With a user-friendly interface and robust security measures, users can confidently manage their profiles, preferences, and past purchases, ensuring a smooth and secure experience every time they visit.

Onboarding Mobile
Mobile Application

Tour of the app

After registration, the mobile app offers a brief tour, acquainting users with its features and ensuring a smooth onboarding experience.

Tour page
Mobile Application

Home page

The home page displays most popular avatars by messages or celebrities, with bottom navigation for app exploration. Users can also quickly search for specific avatars or content using the top search bar.

Home page
Mobile Application

Avatar page

On the avatar page, users are provided with a visually immersive experience as they explore a full-screen preview of the avatar video, allowing for a detailed examination of its features and quality.

Avatar page
Mobile Application

Avatar page 2

Users can select from a range of messages and styles, catering to various preferences and occasions, ensuring there's something for everyone to express themselves uniquely.

Avatar page 2
Mobile Application

Cart page

Users can effortlessly add the avatar to their cart page and customize it to their preference with ease. Upon payment, they are directed to a congratulatory page where they can view images of the avatars purchased and leave reviews to share their experience.

Cart page
Mobile Application

Payment page

Users have the flexibility to add, edit, or remove payment methods for future use, ensuring convenience and security in managing their payment preferences.

Payment page
Mobile Application

Profile page

On the profile page, users can easily view their following, as well as manage their active and inactive avatars with convenience.

Profile page

Agency Experience


WEB APPLICATION

Onboarding

Agencies can easily set up accounts with minimal information and the option to sign in via Facebook or Google for added convenience.

Onboarding
WEB APPLICATION

Dashboard

The agency dashboard provides a snapshot of financial information, charts for avatar revenue and sharing statistics, and a table listing all avatars for easy management, alongside a side menu for navigation.

Dashboard
WEB APPLICATION

Avatar page

On the avatar page, agencies can access detailed financial information and sharing data for specific avatars, allowing for informed decision-making and strategic planning.

Avatar Reports
WEB APPLICATION

Reports

Reports page offers agencies access to comprehensive analytics for all avatars, including social media performance, monthly revenue breakdowns, and interactive charts for comparing avatar metrics.

Reports
WEB APPLICATION

Settings page

Settings page provides customizable options for managing account preferences, while the payments section allows for easy management of payment methods and access to payment history.

Settings