Mobile E-Commerce Exercise

UI UX

Client N/A Industry Retail Year 2020

Overview

The digital age has ushered in a need to bring a seamless mobile experience to consumers looking to make online purchases on-the-go. Users expect to be able to find their retailer of choice, find their product, and purchase it within one minute or less in a way that is easy and satisfies their goal. As a professional exercise, I acted as the UI/UX Designer to mock up a web interface for college students and instructors looking to purchase their education materials using their mobile devices.

Exploration

Objectives and guidelines for this exercise were given by an administrator.

Only a mobile experience would need to be designed from wireframes to high-fidelity concepts.
Design three pages – a home page, a category page, and an individual product page.
Branding guidelines required the use of a given logo, a set of colors, and two font families.
Audience or users would be tech-savvy college students and instructors

The Approach

Sketches

I spent a short amount of time quickly sketching out the layouts and functions of each page adding quick notes that would be helpful down the road. This would help me quickly confirm or exclude ideas that I had in my head before going on to something a little more time intensive like the wireframes or high-fidelity concepts.

Wireframing

Using Sketch, I started creating wireframes that would be the blueprint for the overall layout of content and functions. I wanted to give users the ability to have some control over the content that was visible to them while also creating a seamless experience. To this end, I provided a variety of functions including CTAs to category pages and secondary navigation bars that would make content easily accessible to users. To allow users to remain on the pages they were viewing, functions like the search would appear over the page without requiring navigation to a separate page.

Wireframe for Mobile eCommerce Experience

High-Fidelity Concepts

Using the wireframes, I used Sketch to bring the concept to life. Drawing upon the given brand guidelines, the site would give a sense of warmth and friendliness to college students and instructors. Colors were used to draw attention or drive users through the layout. Orange, a color often associated with friendliness and was could draw users’ attention, was often used for call-to-actions (CTAs) or buttons.

Results

The finalized high-fidelity concepts reflected the overall ideas from the sketches and wireframes. After a peer review, some changes were made to some of the functions and layouts. Originally, the products section used a three-column layout but it was suggested to switch to a two-column layout for better visibility of individual products on mobile devices. The category navigation, originally showing ten categories, was revised to only show three with the addition of navigation functions to scroll through those that were off-screen. Overall, the finalized results of the home page, the category page, and the individual product page reflected a friendly, easy-to-use retail site for college students and instructors.

Mobile E-commerce Home Page + Search Filter Concept

Mobile E-commerce Product Page + Cart Modal Window Concept

Epilogue

This project provided an excellent chance to exercise my skills in UI/UX design. It is always great to have the opportunity to be both creative and logical at the same time in creating a seamless, intuitive experience for people to use to accomplish their goals in a satisfactory manner. Some lessons learned from this project:

Change Happens

From the sketches to the wireframes to the high-fidelity concepts, as work progressed, I found that my initial ideas could easily change. It may have worked out in my head, maybe even as far as my wireframes, but seeing your ideas on screen can quickly change your perspective.

Importance of Peers

Your peers, while they can agree with you on much of your project, see things through a different perspective that can help you see things that you are missing. Always have good people around you to critique your work at each stage of your process.