Zaveapp.com

zaveapp

website for Mexican mobile app

March to May 2016 I spent in Mexico-city designing and developing website for a Mexican start-up company ZaveApp. It was a part of AIESEC internship program that allows young people travel and experience work at other contries. For me it was a very valuable experience, both from design perspective and as an opportunity to see how start-ups function in Mexico. I was amazed and inspired by fast growing and developing market in Mexico, and by how many ideas and highly educated professionals from all over the world work in this huge city. Thanks to ZaveApp team, I was able to attend Google Mexico Digital Marketing conference and some other web-related events.

zave app logo

Given:

ZaveApp had website but they weren't planning to reuse anything from it, even the copy. We had logo, brand colors and some other guidelines.

Task:

create a new one-page responsive website, easy to update via Wordpress. Develop a new information architecture and give some art direction.

Skills used:

Developing Information Architecture, wireframing in Adobe Illustrator, Bootstrap, CSS3 animation, PHP&Wordpress developing, jQuery.

Time:

2.5 months

As of April 2017 Zaveapp.com still keep using my visual design, frontend and information architecture, but they changed some of the animation and some of the backend code. Also, I'm glad to see that my picture is still in the Team section of the website!

zave app team

Staging area

Website on my server space

(the version above is of May 2016, no final copy/imagery in this version)

Current website zaveapp.com

Process

My process included the following steps:

  • Content audit of the previous website.
    Although the team didn't plan on reusing the samy copy or imagery from the previous website, I did content audit to get all the valuable information that it had, and also I had a detailed interview with the team about what they actually disliked the most about the old website.
  • Competitors' research.
    ZaveApp marketing team had already done some research on key competitors, they target audience and strategy. I went through they websites, documenting the features they decided to include, the trends and technologies. Also, I took time to look at other mobile apps websites that weren't included in the competitors' list but had the same goal: to inspire people to click and download the app from AppStore or Google Play.
  • Developing the information architecture of the new website.
    Together with the marketing team, we created a list of the most important features we need on the new website, and made a card sorting. First, the goal was to make sure that one-page layout will work better than multiple page website. When we decided that one page will be our choice, we created a paper prototype with the main sections and tried several order.
  • Wireframes of the website.
    I created black and white wireframes for the website (mobile and desktop views). Some of the details and features changed based on the team feedback and new needs but the main order and sections stayed the same.
  • wireframe
  • Visual mockup of the website
    These designs were created to show the team what they can expect from the website because black and white wireframes were too generic to actually show it.
  • Coding Wordpress and Bootstrap.
    I've used several technologies, and several Wordpress plugins including several specific plagins for MailChimp, Contact forms, Booking.com and Chat.
  • Animation and art-direction.
    We were
  • Creating a manual for the company, to make further updates easier. Here is an example of one of the tasks from the manual.
manual example

Reflection

Among the things that I found especially important:

  • Collaboration.
    It was an opportunity to work with marketing department. I designed the website considering the strategy, research that they already havd made by that point, and their opinions. I learned a lot about the collaboration.
  • International experience.
    Web design and development is under a big influence of the USA way of doint it, but there is still a lot of differencies in attitude towards things, different perception of the imformation on the page or even of Internet surfing in general. For example, we were talking about people who will use the website from their mobile phones only, because they had never had personal computers in their lives, at all.
  • Learning things on the go.
    When I came to the office first day, I was presented with a set of requirements. Some of the technologies were rather new for me, for example, developing the Wordpress website in the Vagrant environment (virtual machine). I've learned to install Vagrant and use it.
  • Flexibility.
    Making changes in the initial wireframe layout while developing it, depending on the comments and goals of the end users.
  • Thinking of end users.
    Developing a one-page Wordpress layout was a challenge because I needed all sections to pull the information from CMS logically.