Vivo Me Web & Mobile App

Product Design

The Brief

To develop a new content based edutech platform that allows students to build skills online, whilst better connecting schools with local organisations.

The Process

We began this process with discussions to try and understand the product that we were creating. During these early stages of development, it was important for us to map out all the proposed functionality and the objectives of the product through rough sketching and notation.

From these sketches and notes, we then began to experiment with low fidelity mockups and user personas. This helped us to pin point the product’s objectives and what we wanted to offer its users. Although it was important to understand the end goal of the product, I felt that more focus should have been on what was achievable by our small team in the allocated time frame.

For example; certain features were complicated and could of been brought in on later releases after more user testing and to a user base with a greater knowledge of the product.

From our mockups we then began to create flow charts detailing possible user journeys. This allowed us to outline all the stages of user interaction, critique them and to then iterate. From this we developed a low fidelity interactive prototype, in order to further test and analyse the key processes within the product.

As the project proceeded I began experimenting with the way content could be visually displayed and developing interesting potential user interactions for use on mobile. The application required content to appear enticing, and with it primarily aimed at students, I chose to use captivating images and a vivid colour palete to highlight the content. Once we had defined some basic style guidelines, I then began testing on specific areas of the product and creating high fidelity prototypes to be primarily used as sales tools, as well as for user testing.

User Avatars & Icons

Iconography Design and Process

Making the Icons

Alongside the development of the platform, I was tasked with creating a primary set of icons to identify content types in the new platform, as well as a set of User Avatars.

The Process

The grid I chose for the content types is 88x88 pixels and each square is 4x4 pixels. Intersecting curves provide restrictions for the extremes of the icons and help create consistency across the icon set, ensuring a higher level of finesse.

For the User Avatars, I stuck to a less complicated grid with little restrictions as I wanted these icons to feel more simplistic in comparison to the other UI elements. I chose to use a thick stroke on each icon to try and mimic the smooth curvature of the Vivo Branding.

I sketched each idea for the icons out on paper first and then progressed onto grided paper. This tested out the icons and found the best way to tackle them digitally. This proved itself to be an incredibly efficient way of approaching the icons.

The Outcome

The available set of User Avatars that will be available on initial release, features 32 individual user icons in 6 different colours for students, and 12 blue icons exclusively for teachers.