Company Overview:

Gemstar is a compay that deals with Technology, Real Estate ad Consulting to companies in Africa and America. I was hired by the Project Manager to design and develop the website for Gemstar.

Problem Statement:

Gemstar was planning to reach out to the international community with its new products and services (Real Estate & Tech) and thererfore required a modern website to help representt their brand and help show case their services to the world at large.

Project Details:

My Role: UI/UX Designer & Developer

Platform: Web

Industry: Real Estate, Technology & Consultancy

Client: Gemstar

Tools: Figma, Drawing Pad, Microsoft Word, Microsoft Excel

Scope and constraints:

The Scope of the project

1. Research

2. Ideate

3. Wireframe

4. Visual Design

Design Process & Solution:

Research:

I would have loved to start out with Primary research (i.e. using Surveys, Interviews etc.) but the time to deliver was short and primary research would take longer than that. So, my first role after having a stakeholders interview with the client was to start Secondary Research for the company. Companies I researched were as follows:

Red Swan

The MLS Properties

Sow Projects

Here are some takeaways I got from the research:

Make the design interface simple and easy to navigate

Choose more consistent fonts

Use more distinct icons for representation

Use Good Hierachy of Information

Use modern aesthestics in Website Design

Make design simple

Ideate:

With the information gotten from the research, I got into thinking mode. I started writing down ideas that could help solve the issues I got from the research so that I can have a great guide when designing the prototype of the website. Combined with the research they are summarized as follows:

Add Call Function/Button to allow users call tthe company directly by tapping the button

Make website be very responsive for all devices

Create a more expressive UX Write Up

Add newsletter input field in navigation for subscribers

Wireframe:

The information Architecture wasn’t well structured so I sketched the wireframe to give a structure for users when they are interacting. I organized it to make it easier for users to understand and interact.

I had an interview with the Head of their IT Department. I was able to get the company's primary(brand) colors from the interview and then I helped designt the logo for the company. I then started to visualize the design by picking the fonts to use. I created a low fidelity designs for the website and shared it with the client. He gave his corrections which I applied to the designs. I then designed the high fidelity designs and then coded the site. I developed the website using HTML, CSS and JavaScript. I also incorporated BootStrap fram work to enhance the responsiveness of the website for different screen sizes which included mobile screens, table screens and desktop screens. I also did some graphic designs for the logo's and enhancements of the sites aesthetics. I helped purchase the domain name and hosted the website online. The CEO was please as the website as I was able to match his desires.

Here is my development of the website using HTML Code

I was able to provide them with an up-to-date and responsive website that satisfied their need. They were very happy with the results and provided a glowing testimonial. To experience the full design and development of the site you can visit Gemstar, and remember “Design is Life”.

What did I learn?

I learnt about the value of stakeholder interviews with clients. This helps you reduce rejections and corrections in the designs.