Wemos header.png
 

Overview

Introduction

For my final project for my Introduction to Web Design class, I redesigned a shopping website for an electrical hardware company that produces cheaper replicates of Arduino products, called Wemos. My group and I used HTML/CSS to code the website after doing user testing and prototyping

Task:

Design and code a fully responsive website

My Role:

UX/UI, Wireframes, Illustrations, Research, Code, Copywriting

Collaborators:

Hongyu Chen, Aaron Wong, Hyun Kyu Oh


 

Design Process

Artboard+5.jpg
 

Background Research

We firstly went on the original Wemos website to analyze what problems the website faced. On Wemos, you can buy and read information about each board, but it hyperlinks everything to Alibaba instead of having their own shopping system.

Some Problems with the Original Website:

  • The website lacks consistent branding and colors, making the product seem illegitimate and cheap

  • There is no tutorial or “get started” to help you install the device

  • The landing page is confusing as it doesn’t tell you what the board is and what it can be used for

  • All buttons lead to different web pages with different branding, making it less usable and confusing to click

 

Interview

Firstly we interviewed 6 target users who would be interested in Arduino boards. We mainly interviewed programmers and new media artists who would be interested in art and robotics.

We found these main reasons for why they would go to the website:

  • We found that most users want to go to the website to see if it’s a legitimate company

  • If there is a tutorial on how to use the boards

  • If there was a way to buy the boards

  • If the boards were similar to the boards that the more known company Arduino produces

 
arudino.png

Insights and Think Aloud

We then asked the users to go through Wemos’s original website and to think aloud their thoughts on the website experience.

Many found that it was hard to use because:

  • Everything was hidden

  • There were no prominent buttons

  • They couldn’t find any resources to help them install the boards.

However, they found the price to be a high-selling point, as it directly compared to the Arduino model. We found that it would be good to out right say that the boards are directly compared to Arduino since Arduino is a well known company that sells legitimate boards.

 

Ideation

After identifying the main problems, we ideated solutions in a list format

Group 66.png
 

Design

Brainstorming sketches for home page, cart. and overall feel

Our Design Plan

Because many users found it difficult to read and look for the information on the website, we wanted to make the website highly organized with different links on the homepage as you scroll down to link to different sections.

The grid structure is varied throughout the website to make the website more interesting to look at, and we made playful illustrations to market the product as more exciting, innovative, and fun. We revised the copy writing to be less technical and highlight more of it’s positive or comparable features to Arduino. We also added diagrams to make it easy to read.


Screen Shot 2018-11-11 at 11.26.36 PM.png

Information Architecture

We created an information architecture to make sure that all the functionalities of the website were there. We focused on 5 basic pages - home, products, resources, community, about us, and my account - that met the users’ needs in shopping for a new product.

 

Wireframe


Final Design

In the time frame of 6 weeks, we needed to complete a fully responsive website, so we chose to have only 5 pages. We chose the most important pages, including, Home, Product, Get Started, Cart, About Us, and Community.

Home Page

For the landing page, we focused our design on making the product seem legitimate, and the aesthetic nerdy & cool. We made sure that everything was navigable.

Features:

  • Customer rating and consistent branding to elevate it’s credibility and and aesthetic presence

  • Board diagram to clearly show aspects and positives about the board

  • What boards are available to buy and buttons to learn more about the boards

  • Clearly state that it is directly an affordable version of Arduino with the same models

  • Buttons throughout to navigate to pages easier and quicker


Product Page

For the product page, we focused on putting information about the boards in a clear, aesthetic, and dynamic way.

Features:

  • Key features, technical specifications, and board information clearly stated and listed

  • Dynamic animations to magnify parts of the board and clearly point to different features

  • “Add to cart” button that travels with you to make ease of buying easier

  • “Get Started” and “Get Inspired” buttons at the bottom to lead users to find a tutorial or project after purchasing the board


Shopping Cart

For the shopping cart, we focused on making it clear what you were buying and how much it was going to cost.

Features include:

  • Clearly stated description, price, and title of product

  • Small trash icon to get rid of unwanted items

  • Quantity of products that can be changed

  • “Save for later” option and “recommended” option to encourage users to buy things

  • Small robot icon to make the shopping experience fun



Photography by littleBits.

Resources

For the resources page, I focused on making different types of useful resources that are customizable to users’ skill levels. There are learning modules (beginner level, intermediate, etc.) to match users’ knowledge and video tutorials within each module

Features include:

  • Get Started tab to view a step by step process on how to set up Wemos

  • Library tab to view documentation on code for your Wemos board

  • Learning modules with different beginner, intermediate, and expert levels to reveal the tutorials that are fit for your skill level

  • Thorough video tutorials to explain each step

  • Navigation to jump through different steps of the tutorial process


Photography by littleBits

Community

We created this page to build a community around the wemos product. We also wanted users to see what incredible projects can be made with the Wemos board

Features include:

  • A search bar to type in keywords that are relevant to your interests

  • Projects grouped into categories to easily discover the type of project you’re interested in

  • Ratings of projects for people to choose the right one

  • Author’s name to give credit and recognition to the artist


About

We created this page to show more information about the company and allow users to contact the company for questions and concerns. This page is meant to humanize the product.

Features include:

  • FAQ

  • Contact us message

  • Biography of company

 

Hi-Fi Wireframe

 

UI Screens

resources pg wemos.png
 

Illustrations

All these illustrations below were done by me. Other illustrations are done by Hong Yu Chen

 

Final Thoughts

This project was a good way for me to define what functions users needed to buy a product, and also how to use marketing and business thinking to best sell a product. If I had to do things differently, I would like to better define the aspects of the products by magnifying the parts of the product and having the features come out as well. I think it would be good to feature more projects in the community section, and have filters to further personalize the projects that the user wants to see.

This project was a great way for me to organize information and learn how to create responsive web design through code. I also enjoyed working with my teammates because I learned alot about their approach code and illustration through our social interactions.