A global video app showcasing creators from around the world

Involvement

  • UX
  • UR
  • Interaction Design
  • iOS Design
  • Design System
  • Prototyping
  • Development
  • Accessibility
Client
Adrennial
Industry
Digital Entertainment
Year
2022

Overview

Adrennial, an Australian company, approached us to design a web and iOS app for a social video platform. We were also tasked with creating a management system called Focus, enabling Vision Partners to upload and manage their video content.

Additionally, we developed the front-end code to bring our design to life in a usable, interactive, and accessible manner, ensuring it was ready for handover to the WordPress developers within the organisation.

To support this, we created a comprehensive design system that included all necessary styles, components, and patterns essential for driving the visual design and user experience across all their products.

Landing page design for Adrennial’s alpha release
Vision Partners landing page design for Adrennial

Interaction design for primary navigation

A collection of designs illustrating how the primary navigation would work on small devices, also including a signed-out and signed-in state to include more functionality and options.

  1. Fig. 1 - User profile on a small device
  2. Fig. 2 - Explore navigation expanded
  3. Fig. 3 - Navigation expanded for signed out user
  4. Fig. 4 - Navigation expanded for signed in user

The very beginning

To instil confidence in Vision Partners and facilitate onboarding, we recognised the need for an easily accessible solution. As a result, we designed and built a fully responsive Alpha version of the service within a short timeframe.

This allowed us to showcase Vision Partner video content and enabled users to register and select a membership package.

Page design for a three step registration process for an Adrennial account

Designing for iOS

Once we delivered the Alpha version, we began planning and designing a mobile app, starting with iOS and intending to explore Android later on.

Our team collaborated closely with Adrennial’s in-house UX Designer through regular meetings and online sessions. We developed user flows and low-fidelity wireframes that were essential for designing the iOS app.

We also created interactive prototypes that were tested with users from around the world. These testing sessions provided valuable insights that helped inform our design decisions.

Additionally, we held regular meetings with Adrennial’s iOS developer to ensure that our designs were feasible within the given timeframes.

Collection of iOS designs for dark mode

Design visuals for the onboarding journey and how some of the service looks and work specifically for dark mode users.

  1. Fig. 1 - Sign in for Adrennial
  2. Fig. 2 - Onboarding for Adrennial
  3. Fig. 3 - Interest selection for Adrennial
  4. Fig. 4 - List view of feed for Adrennial
  5. Fig. 5 - Grid view of feed for Adrennial
  6. Fig. 6 - Single post view for Adrennial
  7. Fig. 7 - Someone else’s profile view for Adrennial
  8. Fig. 8 - Own profile view for Adrennial
  9. Fig. 9 - Profile image crop for Adrennial

Collection of iOS designs for light mode

Design visuals for the onboarding journey and how some of the service looks and work specifically for light mode users.

  1. Fig. 1 - Sign in for Adrennial
  2. Fig. 2 - Onboarding for Adrennial
  3. Fig. 3 - Interest selection for Adrennial
  4. Fig. 4 - List view of feed for Adrennial
  5. Fig. 5 - Grid view of feed for Adrennial
  6. Fig. 6 - Single post view for Adrennial
  7. Fig. 7 - Someone else’s profile view for Adrennial
  8. Fig. 8 - Own profile view for Adrennial
  9. Fig. 9 - Profile image crop for Adrennial

Focus redesign from scratch

Once again collaborating closely with Adrennial’s in-house UX Designer, we dedicated time to researching their existing system and gathering user feedback to identify pain points.

We received the go-ahead to redesign Focus from the ground up rather than merely attempting to improve the existing system, which had not effectively served their users.

Utilising wireframes and user flows, we redesigned all necessary elements to ensure the project’s successful completion.

Design System components and patterns for Adrennial’s Focus application
Component design guidance of interactive states and variations
Adrennial’s Focus dashboard utilising design system components

A single source of truth

We designed and built Adrennial’s Design System, which served as the foundation for each of the products we created.

A Design System is essentially a single source of truth for elements such as colours, typography, and iconography. Without a Design System in place, consistency is lost, leading to disjointed experiences and potentially costly consequences in the long run.

We began with basic yet essential foundations and gradually added new components as needed, ensuring they were scalable, accessible, and fit for purpose.

Scaleable, accessible code built from scratch for Adrennial

Collaborative working

We collaborated with a fantastic team throughout the project, holding regular morning catch-ups, retrospectives, planning meetings, and maintaining a smooth delivery workflow.

Our team included a Product Owner, Delivery Manager, UX Designer, iOS Developer, and several WordPress developers, all contributing to the project’s success.

The results

We delivered a fully responsive website for registering Vision Partners, alongside the design of the iOS app and the Vision Partner management system, Focus, as well as a comprehensive Design System.

With these developments in place, Adrennial secured sufficient funding from the US to elevate their venture to new and exciting heights.