Mobile App UI/UX Design

Connecting Vocationally Skilled Professionals
Mobile App UI / UX Design
Sector
Networking, Employment
Tasks
  • Revamping the outdated user interface
  • Updating features and functionality
  • Improving user flow and experience
App Screenshots

Problems

When Punit contacted me regarding designing their app, they already had a functional version online on Google Play. The main problem they had was that the UI looked very outdated and the user flow needed a lot of improvement. Additionally, they had several new features such as related videos and messaging that they planned to include in the new rollout.

Goals

  • Improve the look and feel of the user interface in order to make it more appealing to a younger, modern audience.
  • Increase user signup and retention rates by streamlining the user flow.
  • Enable users to easily showcase their skills, discover and network with other users with a similar skillset.
  • Allow employers to easily post jobs and find skilled candidates for their businesses.
  • Cross promote content based on the user's general behavior pattern.
  • Implement bilingual functionality while leaving room for adding more languages in the future.

Target Audience

The main audience for this app could be broadly identified as young to middle aged people of both genders in India, who are expecting to broaden their professional network. The audience can further be divided into two main groups:

  • Skilled people who are currently searching for employment suitable for their skillset (will be referred to as “employees” from now on).
  • Small to medium sized business owners who are searching for skilled personnel for their institutes (will be referred to as “employers”).
There can be other users who simply want to increase and improve their professional network by connecting with people with similar interests and skills.

User Research

The team at Kaushal Circle had already done extensive user research by the time I got involved in the project and had an in-depth understanding about the users and their needs. Several user personas were prepared, for each different type of user, to make sure we could cover as much of the user base as possible.

I’m including them below after editing them to an easy to digest, visual format.

Employees

User Persona

 

User Persona

Employers

User Persona

 

User Persona

User Journey Mapping

In order to give the user the best experience, it was important to map out the user journey for each different type of user. This enabled us to identify key touchpoints where we need to consider the user interactions as well as user pain points where we need to make the experience as smooth as possible.

 

I’m including a visual representation of the journey for one user (from the Employee category) for a better understanding of the thought process behind this step.

User Jorney
User Jorney

Tap here to view full image

User Flow

The two types of users have many shared functions, while each has some specific functions that the other group don’t require. This was one of the major points I had to keep in mind when designing the UI/UX for the app.

 

Different types of users need different functionalities which will overlap and therefore need to be integrated seamlessly.

User Jorney

Wireframes

While the basic designs already existed, I wanted to get a fresh start and start with a new batch of wireframes. This involved breaking down the screens to their basic functionality while paying attention to useability. While in the end, some screens ended up with almost the same layout as the existing UI, I was able to make significant improvements on others, making this a worthwhile step.

 

Wireframes can still be useful even when you’re redesigning an existing UI.

App Wireframes

Mockups and User Testing

At the mockup stage, I wanted to explore multiple possible styles and run it by the team and test users. But I knew I wouldn’t be able to give them an accurate idea with low-fidelity mockups. On the other hand, it would’ve been a waste of time to create high- fidelity mockups for all the screens at this stage. The solution was to create a few key screens as high-fidelity mockups.

 

Mockups can be used to decide between different UI styles early in the process.

App Testing

 

Between these two UI styles, #1 was the clear winner

Prototyping

Once the primary design style was decided, I went ahead and built some rapid prototypes using high fidelity screens. This enabled the team to test out how the user flow works and identify any issues in the flow that I’ve created so far.

 

Some of the main issues identified are listed below. Note that this is not an exhaustive list. Most of these issues were easy enough to solve without much trouble. Some of them required more creative solutions, as I highlight in the second list.

App Prototyping
The Problems
  • The sign up process was too long (4-5 screens) and this discouraged most users to continue forward.
  • Users need to select the language before or during sign up, as most users would have little to no knowledge of English.
  • The separation of the two types of users should not be rigid, considering most of their functions overlap.
  • Should be better cross promotion between posted content, based on the likes, shares and hashtags.
  • Users (employer) need the ability to view jobs which they have posted themselves.
  • Users (both types) need the ability to easily access the videos they have posted.
The Solutions
  • Instead of presenting the user with all of the forms at sign up, break it into small chunks and gather the information when it becomes relevant.
  • Add a screen at the very beginning for the user to select the language they are most comfortable with.
  • Instead of asking the user whether they are an employer or employee at the very beginning, move it towards the end of the process after the user has filled in their details. Additional screens will then be presented only if they select yes for the employer option.
  • Present the user with a list of similar videos once they like a video.
  • Add an additional tab to the jobs page, if the user is an employer.
  • Divide the profile page into two tabs: Details and Videos. All videos the user uploads will be available under the latter.

UI Design

 

UI Colors
UI Images
UI Elements

Delivarables

After completion of all of the above stages, it was time to go ahead with the final designs. I’ve included a selection of the final screens below.

 

Outcome

Project was successfully completed within the timeframe. The client was extremely satisfied with the design, as were the members of the test audiences. It’s yet to be seen how the app is received by the broader user base, but so far the feedback has been positive.

 

Involving the client in the entire process always bring a positive outcome.

A Word From the Client

I’d highly recommend Kosala not only because of the great designs but also the value he adds as a team member in thinking through the overall product. He is a great team player and an awesome human being. We loved collaborating with Kosala multiple times in our product development journey so far and would continue to partner with him in the future as well.

Client
Punit Manek
View Other Projects
Plan Your Perfect Day Trip
Day Trips
Mobile App UI/UX Design
Selected Project
Revolusionising How Introductions Are Made
Introze
Mobile App UI/UX Design
Selected Project