site maker

vivovii > Web application (adaptation of mobile app)



With the mobile application deployed and operational, the next phase of the company's product development was to have a web-based application that mimics the mobile app so that users can have access from any computer as long as they are able to connect to the Internet.


The main objective for this project is to build and design the web application in 3 months of time so that it would be in sync with the mobile application. 


Lead designer

Please note that some images had been blurred or altered due to Non-Disclosure Agreement.

Readapting to web environment

app store image

With the existing client facing mobile application, there was a lot of reconsiderations that was needed to be done to ensure the seamless connection between mobile and web.

An example of the factors that I had to heavily consider was the browser back, forward button and refresh buttons. These buttons in the mobile environment could be disabled, hidden or removed, but it cannot be done on web browsers. Since these buttons cannot be customized or removed from the web, the web flow will need to be changed. 

Rethinking about the flow

The left image below is the flow of the mobile application that I had referenced as a starting point of the web application flow. In comparison, the web application flow is much more comprehensive than the mobile flow, see image on the right. 

To communicate the difference in the flow, I had used the UX flow to document all the differences and details between the mobile app and web app. The engineering team will then take note and analyze if it is feasible to complete the project in the given time frame. If not, the engineer and I will sit down and discuss alternative solutions. 

Mobile flow
web flow

Web app released, what's next?

As part of the project plan, we have broken down web app to be developed in different stages focusing on the release of the main core functionalities and content. After the initial release, the latter releases are feature focused. Since the project plan had been broken down, at the end of each phase, the engineering team and I would reconnect and have a thorough run through of what was developed. During this session, I would ensure that the implementation of the product is aligned with my design deliverables as well as making sure that all the business requirements and objectives are met. Changes that were needed to made were documented and applied so that we could move onto QA testing before deployment.

Sample screenshots of the mobile application. Courtesy of Ralph Cabrera

Final web design

web app image 1
web app image 2