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, contacted me to design a web and iOS app for a social video platform. I was also responsible for creating a management system called Focus to allow Vision Partners to upload and control their video content.

In addition to this, I was responsible for developing the front-end code to reflect my design work in a usable, interactive and accessible way, ready to be handed over to WordPress developers within the organisation.

I created a design system to contain all necessary styles, components and patterns essential for driving the visual design and user experience for 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 gain Vision Partner confidence and allow for onboarding, we needed something readily available to allow this to happen, so I designed and built a fully responsive Alpha version of the service in a short time frame.

We were then able to showcase Vision Partner video content and allow the ability to register and choose a membership package.

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

Designing for iOS

Once we delivered Alpha, we started planning and designing a mobile app, initially for iOS, intending to look at Android later down the line.

I worked closely with Adrennial’s in-house UX Designer through regular meetings and online collaboration. We created user flows and low-fidelity wireframes essential for designing the iOS app.

I created interactive prototypes that we tested with people around the world. These testing sessions provided valuable insights, which helped shape design decisions.

I also had regular meetings with Adrennial’s iOS developer to ensure that what I was designing was feasible in the time frames we had.

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

Again working closely with Adrennial’s in-house UX Designer, we spent time researching their existing system and gathering user feedback and pain points of the system.

We got the go-ahead to redesign Focus, from scratch, rather than attempting to improve what they already had, which wasn’t working very well for their users.

Working with wireframes and user flows, I was able to redesign everything needed to complete the project successfully.

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

I designed and built Adrennial’s Design System. These were the foundations essential for each of the products I created.

A Design System is essentially a single source of truth for items like colours, typography, and iconography. Without a Design System in place, there is no consistency, and things can quickly become disjointed and costly in the long run.

I started with basic but essential foundations and gradually added new components when required, ensuring these were scaleable, accessible and fit for purpose.

Scaleable, accessible code built from scratch for Adrennial

Collaborative working

I worked with some great people along the way. We had regular morning catch-ups, retros, planning meetings and a pleasant delivery workflow.

I worked alongside a Product Owner, Delivery Manager, UX Designer, iOS Developer and some WordPress developers.

The results

I delivered a fully responsive website that is registering Vision Partners. In addition to this, I designed the iOS app and Vision Partner management system Focus, along with a Design System.

Adrennial were then able to obtain sufficient funding from the US to take their adventure to new and exciting heights.