Adva Mobile - App and Web

landing page layout landing page layout code

Work Process: from Brief to Rapid Prototype and Designs



Step 1 - Brief: requirements, technical capabilities, limitations and Vision.

I usually start any project by meeting the product Manager, CEO, Senior Designer, client... I try to understand the current requirements of the project, the limitations and the Vision, including Human Resources, Budget, Technical Capabilities, and Limitations.

It is essential to try to understand what kind of technology the client has available, because any system will be built on top of it, unless the client wishes to upgrade.

Another point is to work within the brand guidelines, and gather the maximum information about them, especially if the company doesn't have a brand guideline document such as a living brand from Invision.

Persona(s) and potential customers.

If I create a brief, I try to gather the maximum information about the company or project requirements. One of the most important things as a UX Designer is to try to understand if the company has any understanding of their buyer persona(s) or potential customers. These questions give me an idea of the scope of the research I have to perform.

Adva Mobile specified the potential customer as independent music artists and their fans and potentially record industries associated with them. There was no budget for further research.

Adva Mobile platform facilitates engagement between Artists and Fans, giving the Artists the capability to create their fan page and app mobile, score fans, segment fans by score and gather information about who is following them. These services would be compliant with GDPR Compliance Requirements and by following Marketing best practices.

mobile view landing page

Step 2 - Always work from an MVP, Minimum Viable Product first, using lean strategies.

Although I like to use wireframes and extensive research before I create a layout, I must accept that the budget and time it is not always available. In this case, I like to use Sketch to create high-resolution prototypes and Layouts, and I usually code the essential elements on the web pages to test typography or contrast. Although Sketch is a great software, it is always important to check your layouts on the platforms they will be sitting on, such as web and mobile, to then iterate and iterate again.

The client wanted to have a redesign from a sample app prototype, and they requested a simple landing page design.

From my initial MVP of the App in Sketch that gave an idea of the look we were going for, I used Brackets to code a page with Bootstrap.

By Creating a skeleton of the landing I was able to test elements such as buttons, typography, location of the items and graphical weight.

Bootstrap is an excellent way of creating fast MVPs, and in my personal opinion, any UX Designer should be able to code basic features and have an interest in keeping with the technology. Understand first to Design after!

landing page

Step 3 - Creative Active. I like to give options to the client using intelligent solutions.

Finally, you reach what I call "creative, active" phase. It's the phase where you have gathered all the elements, and you fully concentrate on creating ideas. When I have low budget and time constraints, I go for variations of one layout, as an effective way to generate multiple ideas from a single concept. I use colour, hue, and shape as starting points. For projects like these centralised elements are better since they are mobile-ready. The only challenge for centralised text is that with long paragraphs, the look might become unbalanced.

In this phase, you have to be, however, courageous.

This is the phase where real creativity takes place, after all the requirements have been understood, and the playground delimited. So you have to give wings to concepts and imagination in the way of leading the brand forward and maximise its potential.

View MVP - Dark View MVP - Mint