Conceptual App Design for Premium freelance marketplace

Imagining how a mobile app for Contra would look like with their premium brand design.

ROLE

UI Designer

TEAM

Ajay Pawriya

WHEN

2022

Conceptual App Design for Premium freelance marketplace

Imagining how a mobile app for Contra would look like with their premium brand design.

ROLE

UI Designer

TEAM

Ajay Pawriya

WHEN

2022

Conceptual App Design for Premium freelance marketplace

Imagining how a mobile app for Contra would look like with their premium brand design.

ROLE

UI Designer

TEAM

Ajay Pawriya

WHEN

2022

Overview

I am a fan of Contra and its mission. I took onto their product in the early stages itself. It not only offers 0% Commission freelancing platform but also a community of extremely talented designers.

The only thing missing was a Mobile app

It's a Passion project I took as a Product Designer. They already have a website in place and a very beautiful one indeed (Kudos to the Product team on that 👏).

I wanted every page to reflect the Premium vibrant vibe that is in Contra's Brand.

Goal

I had been a part of their community for quite some time then and severely wanted an app. It was kinda hard to open a website all the time to check up on your projects or opportunities. Also, the notifications got lost sometimes.

Primary goals and requirement

The primary goal was to come up with a conceptual design for the app that not only caters to existing features but also the features that users are requesting for.

NOTE: Contra already has a beautiful brand style guide, so I didn't try to revamp it. The design was mainly focused on Information Architecture and understanding the problems users were facing.

Process

Identifying the problems

Not having a mobile app is not a problem. It's the cons that it brings with it.

  1. More friction for repititive users to access the product

  2. No notifications for me to keep track of the opportunities that I have applied to or existing client communications

  3. An easy way to share my contra profile

  4. A prominent easy to access help & support feature

There's so much to do. So much to add. I needed a strategy for the placement of features in the app.

Comes into picture, "Information Architecture brainstorming". To back this up, I tried to look at what features are the mot important ones and which ones are complimentary. I also did a small survey to just to validate the statement from others

Contra APP Information Architecture

Wireframes

Now that I had a good structure for the app, I went to do some wireframes for it.

Paper Sketches

To have more creative ideas and not be limited by tools. I first did rough sketches on paper to help me brainstorm and get few obvious ideas out of my head.

Rough paper sketches

Digital Wireframes

Whimsical is my tool of choice for digital wireframing. Having my wireframes in a digital format gives me an understanding of visual estate that I have to work in.

Rough paper sketches

Rudimentary Components and Styles

Wireframes gave me a good enough idea of what elements are repeating and can be made into components while doing high-fidelity designing.

  • Buttons

  • Tabs

  • Navbar

  • Chips etc

The magic is in the details. I always ensure that once I start designing high-fidelity, I always keep making components and styles for the same.

Components

Rudimentary design system components

Icons

All the icons were imported form Contra's official website

Color Themes

Final High-fidelity Designs

Now to the final deal. The high-fidelity designs.

My main motive was to bring the Premium vibrant vibe in the app as they have it on their website.

Welcome screen had enough estate for me to go creative and try out new things.

I see Contra having a brand that feels alive. I like to think one major factor is the motion they add in it.

So, I designed a welcome screen that ot only feels premium but also has scope for animation.

The shapes can move in to the viewport and the vertical parallax scroll would feel incredibly soft and smooth.

Conclusion

Overall it was a fun side project to work on. I designed the product in a way that it leaves a lot of room for motion design.

In future, more customisations can be made based on the new features that Contra might release.

Figma file for the designs

Contains Research, Timeline and Assets for the project.

Fancy a chat?

Contact me

Slide into my DMs

My resume

Fancy a chat?

Contact me

Slide into my DMs

My resume

Fancy a chat?

Contact me

Slide into my DMs

My resume