Blog | Designing an EPOS system

17th July 2017

Mobility aids and disability equipment specialists Ability Superstore were looking for an EPOS solution to take their business to the next level and truly harness the power of the multi-channel Shopit platform. Here Lewis Briffa talks through the process of taking a client towards an omnichannel setup.

 

“I was immediately drawn to the prospect of being assigned such a project as I felt it was an opportunity to showcase an area that is currently going through an upward trajectory fuelled on by is progression towards mobile mediums.”

Observing the field

“Capitalizing on the convenient proximity of our King Street office here in Manchester,  I took to the high street to familiarize myself with existing solutions. Having checked out major brands such as Argos and Marks & Spencers to name but just a few it became evidently clear that just like the web, certain trends pertained throughout the world of EPOS. Search focused interfaces and self explanatory User Interface (UI) elements proved to be core facets throughout my studies.”

“For wider scope I sought inspiration through many online mediums, a lot of the current EPOS designs on Dribbble served as a great showcase for interfaces that oozed finesse. Even muted aspects of these designs such as the balancing of neutral colours such as greys would later serve as an aid when subtly trying to visually define scrollable regions.”

“A large wealth of EPOS systems currently exist across the web many from which have complex histories that span years if not decades, and as such, boast UIs that one would typically associate with legacy systems that sport technologies with limited graphical prowess. Being able to cater for tablet based devices means I was able to focus on delivering a modern age design that strived to be featured packed but clutter free.”

an epos tablet device is easy to use and portable

Sketching Out The Process

“As with any project, I work to rationalise the need behind any idea or approach I have to a problem. I start blitzing my ideas on paper to create a spider diagram of sorts. Eventually these ideas culminated into a 4 step process.”

Style Tiles

“Once I had an idea for how I wanted the system to look I began working on some style tiles which I find to be particularly helpful because they help present time efficient design deliverables.”

“Colour choice is often a picky affair, colour swatch collections from tools such as Adobe Kuler help ease the stress. Since I started off using style tiles a lot of my original colour choices that went astray were quickly noticeable amongst my chosen palette.”

“I eventually settled for a colour palette consisting of predominantly green and black with the intention of exploiting the contrast to take advantage of the isolation effect (known as the Von Restorff effect), thus in turn placing greater emphasis on important go to actions such as payment confirmation. In doing so less effort would be put on thinking, and more would be put on doing.”

“For fonts I chose to use sans-serif, which was complementary to the clean cut vision I had, along with the modern age gravitation towards minimalistic design, the iconography from IonIcons also followed the same ethos.”

User Flows

“From a user’s perspective having interacted first-hand with some of the existing EPOS solutions I could tell that the flow of a good user journey would bear a lot of weight on both the usability of the application, but also the speed through which the user would achieve their goals. In doing so it helped me identify areas that would produce higher quality clicks. Having this higher level abstract view also helped me strategically place tap targets in consistently designated areas to make for a more effortless UI.”

Mid-Fidelity Wireframes

“Having a sound vision in place, I shifted my efforts into designing the layout of the application. I paid particularly close attention to the displaying of product items which I opted to go for a grid based approach with a vertical scroll as opposed to a horizontal scroll found in other systems partly because of people’s habitual tendencies to favour vertical scrolling in mobile settings.”

“I had designed the sidebar with the intention of having it serve double duty serving as a main stay for on screen basket aggregation and product information all of which can be viewed from a single screen.”

High-Fidelity Wireframes

“Having gone forward with a layout, I incorporated elements from the style tile I produced earlier to produce a design that was representational of the final application.”

“These designs would mark a number of improvements to the UI including a reduction in the number of products shown in the current viewport to around nine, this fit into the rational in keeping the UI clean cut and offered greater levels of readability and lessened the risk of missed touch targets.”

Results

“I set out with the intentions of creating a UI that would ultimately be just as enjoyable to buy from as it would be to work from. Despite the abundance of systems that currently exist on the market, the final design incorporates enough familiar trends with enough novel features to make it innovative enough to stand out on its own accord.”

Learn more about our EPOS service.

Lewis Briffa

A current student of Software Engineering from the University of Salford, Lewis is naturally pragmatic minded and looks to take his learned theory and put it into practice. A dabbler of sorts who likes working across both design and development with the intention of gravitating towards a Full Stack role in the future. When he manages to free himself from his computer desk Lewis likes to write tutorials, read books and tend to his entomology collection.