top of page
TRANGBIA.png

KINOSOL

Redesign ux/ui Website and create a Mobile app

Project Overview

MY ROLE

User Interview

Domain Research

Wireframe

Prototype

UI Demo

TOOLS

Sketch

Adobe XD

Adobe Illustrator

DESIGN PROCESS

Research

Survey/User Interview

Research Synthesis

Wireframe

Prototype

User Testing

Wireframe Iteration

Design Website and Mobile App Demo

DURATION

4 weeks

DATE

April 2020

About Kinosol

KinoSol is focused on addressing food waste and food insecurity and does this via solar-powered food dehydrators and study abroad programs that teach university students about global issues and social entrepreneurship.

The Challenge 

To create a new website and mobile app which helps users understand thoroughly two different projects of Kinosol that are the study abroad and the solar-powered food dehydrators.

MANGO.png

Problem statement

"Users need more information about the Kinosol study abroad program and the website should be clear about its products."

Research

Research methods

Competitive Analysis 

Domain Research

Survey  

User Interview

COMPETITIVE ANALYSIS

INTERVIEW RESULT ABOUT CURRENT WEBSITE

  • For the users who are unfamiliar with Kinosol, they don’t really understand what is Kinosol doing because it lacks information and has a vague mission at the homepage.

  • Gathering feedback from the users who are familiar with Kinosol. Although the users already knew about Kinosol, they still confuse about the layouts, less information when using the current website.

Screen Shot 2020-05-14 at 3.34.17 PM.png
Screen Shot 2020-05-14 at 3.35.30 PM.png

1 = Poor   5 = Excellent

Discoveries

We were provided with insights on their persona based on Kinosol user's past interviews including students and university faculties. We created visuals to showcase what we think the persona is and refined it after receiving further clarification from the client.

A4 Copy 3.jpg
A4 Copy 2.jpg
A4 Copy 4.jpg
A4 Copy 7.jpg
  • 80% University Faculties

  • 20% Students

personas.jpg
persona2.jpg
User Flow

Architect User Flow for Website

UntitledDiagram_rev1.png

SCENARIOS

University Faculty:

You are a University faculty member, and you are looking for a company to collaborate study abroad courses. You hear about KinoSol through another faculty worker at another university. You refer to the KinoSol Website to find the following:

  • Information and details about the study abroad program.

  • Contact the company for more information.

  • Get involved and become a university partner.

 

Students:

You are a university student and have an interest in KinoSol's study abroad program in Uganda, Africa after hearing about the program from another university student. You refer to the KinoSol website for more information.

Now, please show me how you find:

  • The program information & details

  • Contact or request more information.

STUDENT.png

Architect User Flow for Mobile App

Mask Group 12.jpg
Prototype

Wireframe Website

To address the two different projects of Kinosol, we reorganized the home page, all layouts, and navigation. The company's mission and its products are shown at the top of the homepage. Moreover, the two main products are located at the menu bar navigation, which helps users easily find what information they want to get.

Prototype

studyabroad.gif

Students:

The flow for students find information about:

  • The program information & details

  • Contact or request more information.

FACULTY.gif

University Faculty:

The flow for University Faculty find information about:

  • Information and details about the study abroad program.

  • Contact the company for more information.

  • Get involved and become a university partner.

KINOSOLPRODUCT.gif

KINOSOL Products

The flow for users find information about:

  • Information and details about the Kinosol product

  • Contact the company for more information.

  • Buy the products.

handdraw.png

Wireframe Mobile

For the mobile app, I design 3 landing pages that introduce the company’s products.

5 main pages are home page, get involved page, products page, study abroad page, and chat page that are located at the bottom navigation.

  • Home: including a video introduction, coming courses, the main product, and blogs.

  • Get involved: there are 4 options that are university partner, sponsor a student, sponsor a food dehydrator, and get connected. This page is designed to be fast and convenient for users’ interaction.

  • Products: list all Kinosol products with price and information.

  • Study Abroad: list all Kinosol study abroad courses.

  • Chat: with just 1 click, users can connect with the Kinosol support center and get their questions answered quickly.

Web_1280_–_11.jpg
mobile2@2x.jpg
mobile3@2x.jpg
Design Style

Mood board

The mood boards are inspired by Kinosol's businesses such as agriculture, people, and dried food at Uganda, where Kinosol organizes study abroad courses. Besides keeping the orange color as it is the main color of Kinosol's logo, I add new complementary colors to make the design look more vibrant and become more attractive to the students.

A4.jpg
A4 Copy.jpg
Hi-fidelity design
gif.gif
homescreen.png

Website and Mobile App Demo

bottom of page