VIVIA AI – Startup Web Design

Designing a startup company website from scratch by applying UX design principles

Intro

Between January to July 2019, I tried to launch a start-up, VIVIA AI, that provide a SaaS service of automatic and intelligent image processing and enhancement powered by Machine Learning. It is a service that is close to Dropbox + Adobe LightRoom + Apple Photo, with a vision to seamlessly and effortlessly enjoy the photo importing-editting-viewing-managing experience. Users simply need to drag their RAW/JPEG files to the program which reads, extracts the local Lightroom database and the program would learn from users' taste and preferences - all of this happens on the cloud, making it possible for all users on any platform to use the service.

As the founder (Chief-Everything-Officer), I mainly focused on the ideation stage, MVP demonstration, UX design and research, defining engineering requirements, and, of course, business development (writing BPs, making oversea calls to dozens of investors & VCs, networking, recruitment...). In this article, I demonstrate how I designed a start-up website for early-stage seed users and investors with UX design principles applied.

Project Overview

As our start-up was at a rather early stage, we did not have a fully functional MVP for demonstration. Thus, we wanted to have a website so that we can attract the first batch of users for their feedback on the first alpha/beta prototype. Also, we were reaching out to hundreds of VCs and angel investors to get a seeding round of financial support. Besides these two types of audience, we also aimed to have a certain broadcast of our upcoming activities to potential users and, also importantly, talents and assets we could get.

I created the structure design of the site -- it is simple, informational, and intentional to our interested stakeholders. I applied some UX design principles to increase the viewing traffic and hit the target users.

My Role

I was the UI/UX designer in a small team of three, collaborating with two others part-time co-founders in charge of business development, marketing, and online media presence. I designed the app prototypes for iPad and desktop (Window/Mac/Linux), and also the website. Due to the limited time, for this website I had to produce the maximum amount of work in a short period of time (2 - 3 days) as we had a lot of other work to do (i.e. the product). I had to design and bootstrap the website from scratch, which is impossible without TheSaaS. I designed the overall information flow of this site with a clear and effective structure making it simple to browse through different sections back and forth.

Design Objectives


At the very early stage of a start-up, we knew that it would be neither possible nor necessary to create a full website for the general population. Instead, we aimed to attract three groups of audience.

Show everyone what this company is and what we do

This is the basically the primary goal of every corporate site, although many of the sites failed to accomplish this. New users who are unfamiliar with the company are not very patient to browse through the entire site and figure out the million-dollar questions: What? Who? and How? Therefore, we need to leverage the limited space and organize the elements.

Gathering the first seed users

The front page is just like a flyer to our seed users. After glancing at the first They will decide whether they would be willing to spend a few extra minutes to read through the site and know more about the product. Thus, I designed concise and catchy slogans alongside a cover picture or video to exhibit the concept, functionality and design of our product.

Getting attention and interest from investors & VCs

Many VCs requested a URL for our project. For a start-up, besides a solid BP and white paper, the link of the website is also of critical importance. A website, as a live presentation or pitch deck, is one of the first steps that investors take to buy into our mission. Through this site, we attempt to convince them to believe in the problem we are solving, the business value we are creating the strategy we are taking and the capability of achieving it.

Alternative Text

Procedure

Wireframes & Rough Sketches


Wireframing is an important step in a visual design process on screen. It helps me draft and define the information hierarchy of my design concept. I can proceed to plan the layout and style based on how I want my audience to process the information. This stage is considered as low-fidelity prototyping for me because it takes a short time to plan, design, execute and repeat -- all with a low cost. I might have several different ideas simultaneously, and I do not know which one I would like to select until I start prototyping. It takes no extra resources -- simply just a pen, a highlighter, and some paper. Rough sketches and paper prototypes are all I need at this stage for my high-level ideas and assumptions.

PROCEDURE

Mid-fidelity Prototypes


After the low-fidelity prototyping stage, I want to get initial feedback from stakeholders and co-workers and then refine my thinking.
I use tools like Axure or Balsamiq to determine what information will be presented and what structure/layout is appropriate. This is the mid-fidelity prototyping stage. It requires more details, time and resources while developing prototypes that are close to the final deliverables. I created digital wireframes that are more structured and clearer than hand sketches.

Alternative Text
Alternative Text

PROCEDURE

High-fidelity Mockups


High-fidelity prototypes are the last step of ideation, following the first two adove-mentioned stages. Typically, I create a few mockups as visual representation of the final deliverables, and examine the potential flaws. For a small project like this, one or two mockups are enough to get the idea and collect feedback from collaborators. Although mockups are generally an accurate representation of the final product, their fine details take an extensive amount of time. Therefore, I usually prefer to spend more time at the first two stages to reduce the cost of pivoting ideas.

For this web design project, it is significantly different from app design as their focuses on functionality and aesthetics are distinct. Thus, I intentionally blurred the boundary of high-fidelity prototypes and the final product, as there is not much unexpected interactivitiy or function on a typical webpage. Instead, the information structure is the most critical part of this project.

PROCEDURE

Final Deliverables - Homepage


Shown on the right are the final deliverables of the homepage.

For this project, the high fidelity prototypes are almost identical to the finished product. I selected the desired CSS styles and themes based on previous ideation and provided the final deliverables. This final product had been tested by me on various types of devices, including phones, tablets, and computers to ensure that the responsive design works as expected.

Alternative Text
Alternative Text

PROCEDURE

Final Deliverables - Investors Relations


This investors relations page plays a significant part in this website. I made a very simple design without distracting elements. After the invitation text, there is a button available, allowing interested investors to read our white paper. We have a management system that regulates the access to these types of documents and certain areas of the website.

Showcase

Alternative Text

PROCEDURE

Final Deliverables - Developers


The Developer section was made for developers who are interested in joining our first beta. They can find API references and instructions on this page. We designed several RESTful APIs for developers and ourselves to experiment with.

PROCEDURE

Final Deliverables - Privacy & Security


People are concerned about privacy and data security nowadays. We show the Privacy & Security section with detailed privacy policy and explanation for how we protect users' data with high-standard encryption.

Alternative Text

Reflections

Prototyping and creating a website is distinct from designing an app or software. Most of the time, an online website consists of light interactivity but a great deal of information. The hierarchies of the sites are mostly like a tree instead of a net. Nevertheless, by no means I think UX thinking is less important in web design. Designing a smooth and efficient information flow still poses a challenge for designers, especially when a design is intended for multiple groups of audience. Although the interactivity is not as extensive as that found in app or software design, there are a significant amount of links between web pages and sections. UX design principles are much needed and indispensable to a good website.

Back to the homepage.