Company Overview:

Microscale, a tech company in Sub-Saharan Africa made an initial design of the AVAC Smart Farm as a Frame work, but the UX Engineer for the project needed a UI Designer to help convert their first design to a more user friendly, top notch design and also added extra pages to help users get a better experience of the App. This is where I come in.

Problem statement:

The problem I was trying to solve was to transform the first low fidelity design to a modern High Fidelity Design as well as to properly structure the mobile application. They had already handled some research for the app.

This is the previous design before I came on board

Scope and constraints:

The Scope of the project were defined as follows:

1. Research

2. Define

3. Information Architecture

4. Wire Framing

5. Visual Design

When I was working on the project the constraint I had was on the payment time which meant I worked a lot and payments were delayed

Design Process & Solution:

Research

Regardless of the fact that the company had done research for the app before I came on board I did a few Secondary reseach of mine to help with my design decisions.

I researched Agricultural Research Papers to understand what data users deisre to view through the app.

I researched Smart farm apps on playstore to help with my design directions

I reveiwed creative designs on Dribbble to inspire my designs and creativity

Define

I also created user journey maps to help me define users problems and understand their flow through the app. A couple of problems defined were:

The apps UI is should have modern aesthetics

Theres no way to personalize an account with an avatar/picture

The iconography on the app was quite unclear

Farm couldn’t e monnitored graphically for better

No live farm statistics on the app

Information Architecture

First of all after reviewing the first design I realized it wasn't complete, so I had to put the pieces together and have a guide while before designing. I therefore developed a site map after having several discussions with the stakeholders. When this was done I had a brighter picture of the project.

Wire Framing

With the site map in view my creative juices started flowing. I had another meeting with the stakeholders and I drew up the wireframe. The Wireframes brought clarity to the project, allowing me to work through all the interactions and layout needs. It also helped the client to think about what their needs really were and helped them define the project goals and what their primary focus should be.

Visual Design

I was the lead UI designer for the project. A couple of the services I had was the develop high fidelity design for the mobile app. Also, I handled the Graphic designs for some of the pages for the App as part of my specializations is interaction design and visual designs. I upgraded the Icon designs to to make it more new age and user friendly. Also, the project had up to 17 pages in the design so my interaction design skills helped me map out the flow of the pages throughout the app.

Conclusion

Our design was able to deliver what our UX Engineer wanted for the design as it was able to guide him through his engineering process. The simplicity and ease of the design for the app was what they required and while working with the UX Engineer, I provided the Information Architecture which made it easier for me to solve the design issues and deliver a wonderful design.

What did I learn?

I learnt about the power of great UI designs can attract the eyes of users and how colors can help express more about a brand/undustry to users.