SearchogiOS Ecommerce App

The Challenge

Ve interactive are specialists in abandoned basket technology and already have vast numbers of clientele to whom there technology works with. Ve interactive approached me with a proposition to design and build an eCommerce platform which for all of their clients, which would operate collectively on abandoned basket technology.

Introducing Searchog, which is the clients suggested name and brand for the new eCommerce platform. The requirements were simple, and the app needed to be simple to operate, easy to discover and effortless in purchasing products.

searchog Cover Image
The Solution

I began the project with a competitor analysis and looking at the eCommerce industry and where problems may occur. I discovered that search functionality was complex and often confusing in various platforms, but also the checkout process was prolonged and unintentionally created a barrier between business and consumer.

Following this, I then looked at user flows, and commenced conceptualising ideas, layouts and functionality for the app which would improve the process and make online shopping an enjoyable and inspiring experience.

I then started transforming my ideas and research into low fidelity wireframes which would also later become prototypes to be tested internally to reinforce my concepts and functionality.
I completed a series of user testing sessions, which all strengthened my intentions for Searchog, which then allowed me to continue with the design language.

searchog Wireframe 01
Connector
searchog Wireframe 02
Connector
searchog Wireframe 03
searchog Wireframe 04
Connector
searchog Wireframe 05
Connector
searchog Wireframe 06
searchog Wireframe 07
Connector
searchog Wireframe 08
Connector
searchog Wireframe 09
Design systems

A section of the branding for Searchog had previously been complete, and the brand so far existed of a logotype and a large selection of possible colour schemes that stakeholders envisioned the app to be.

I started with a grid system and baseline grid, which could be adapted later on to further devices, this was a requirement as there was scope for a desktop, tablet and android version in the future.

I then started experimenting with typography and chose to use the Open Sans typeface as this is clean and legible for all device sizes. The typeface also has an extensive range of weights which gave me flexibility and the ability to produce hierarchy.

Colour was then refined from the existing selection the stakeholders had chosen. I decided upon a bold red as the primary colour as this portrayed qualities of excitement, energy and stimulation. I also chose an earth green which has qualities of balance, reassurance and refreshment.

Grid System
9 columns | 25px width | 15px Margin | 8px Baseline
searchog Columns
searchog Baseline
Colour
All colours used for the project
searchog Primary Colours
searchog Secondary Colours
Typography
All typefaces used for the project
searchog Typography 01
searchog Typography 02
searchog Typography 03
searchog Typography 04
Iconography
24px grid system, 2px outline
searchog Iconography 01
searchog Iconography 02
searchog Iconography 03
UI Components
Atomic design system
searchog UI Components
searchog Device 01
Final UI

The final app is a strong, bold and daring eCommerce platform. Form, type, colour and iconography have all been carefully considered to enhance the user experience and to create a unique encounter. The app has been simplified in its functionality to ensure only the vital elements exist allowing more space for content which has the most relevance in this app.

searchog Device 02
Searchog screen 01
Searchog screen 02
Searchog screen 03
Searchog screen 04
Searchog screen 05
Searchog screen 06
Searchog screen 07
Searchog screen 08
Searchog screen 09
Searchog screen 10
Searchog screen 11
Searchog screen 12