ecommerce app


We had to innovate grocery shopping- fast

With a team of 3 and a two week sprint the journey began. ABC Market needed to enter the technology arena so that it could compete with major players such as Amazon and Walmart. However, their goal was more than just creating an online grocery app. ABC wanted to keep their premium shopping experience even in their new application. With the goals laid out, our team began the adventure.



  • Step One - Understand

    Client Brief

    understand client needs and objectives

    ABC Market is looking to enter into the ecommerce industry

  • Step Two - Empathize

    User Research

    understanding the user

    Learn the motivations, pain-points and habits of grocery shoppers

  • Step Three - Define


    construct a point of view

    Step into the shoes of the user and understand the context of their unmet needs

  • Step Four - Ideate


    Brainstorm all possible solutions

    Approach ideas with a "Yes &" mindset

  • Step Five - Prototype

    Rapid Prototyping

    Time Boxing + Concept sketching

    For the ABC Market app the designs needed to be clean and premium. This gave us direction.

  • Step Six - Testing

    Usability & Desirability

    Guerilla style testing

    For this project the user base was easily accessible at any local market. So we set out to test the designs.

Business Analysis

Although ABC is a prominent figure in their region they are behind many stores that have already adapted to the technological advances. Their strengths have kept them in the market but their strengths will not be enough as technology proceeds.

ABC Market is competing with companies that have set the precedent on what the online grocery shopping experience is. However, ABC is a premium shopping experience that sets them apart from other stores. This premium experience is what will uniquely set them apart in the online arena.

Market Analysis and Blue Ocean

abc market competetive analysis
abs market blue ocean territory

A features comparison chart was the first step in the process to creating the ABC Market app. The chart shows the users mental models which will allow our team to maintain the users expectations . After understanding the mental models of the user the opportunities in the market started to become apparent. The market positioning map illustrates the opportunities in the market which is the blue ocean area ABC Market needs to inhabit.

Research & Discovery

Qualitative Data

The research process included many trips to grocery stores and many snacks to fill the time of observing shoppers. Our team conducted 15 guerrilla interviews. This qualitative research provided many insights for our team and gave the project direction and focus. The data collected gave light to peoples relationship with grocery shopping- most of those relationships were cast in a negative and tedious light.

abc market qualitative data

Synthesizing the Data

abc market affinity map

The data gathered was synthesized using many methodologies. The method I found to be most useful was the affinity map. The affinity map grouped related data and allowed our team to spot any trends in the data. The pain points, gains, and motivations of the user were all in one diagram where we could see them clearly.

User Persona & Journey Map

abc market user persona
abc market user journey

After discovering the users needs and motivations a persona needed to be created. The persona is used in user-centered design to keep us designers focused on the users needs and not our own. The persona is based off of data gathered during the research process. In this project the persona is Busy Stacy- a doctor who is always on the go but wants to maintain a healthy lifestyle. Busy Stacy represents the tribe that ABC Market wishes to cater to.



During this phase our team got together to brainstorm for solutions on saving Busy Stacy’s time. The solutions needed to push past the obvious ideas. ABC Market needed to stand out in the market which means we needed to find a key distinguishing feature. The only way to find this feature is through a process of brainstorming and filtering.

abc market ideation and how-might-we

Feature Prioritization

abc market feature prioritization moscow method map

The filtering process, or the feature prioritization process is where all the solutions go through a check point. Two methodologies were used: the MoSCoW method and an impact vs. effort chart. It is through this process that we get ABC Market’s minimum viable product. And from there- the key distinguishing feature. For ABC the KDF is “set & forget” a recurring delivery option for the products the user gets repeatedly.

User Interface

Low Fidelity Wireframes

abc market lofi concept sketches

We time boxed ourselves and did a couple rounds of crazy 8. Crazy 8 is where a timer is set for 8 minutes and each individual must draw 8 design concepts (in our case we did 9). The sketches are then voted on. The sketches with the most votes moves on to the low fidelity wireframing phase. Here- a flow starts to be established and the information architecture becomes the priority.

Style Tile

abc market style tile

The UI for ABC Market had to reflect the premium shopping experience. They needed to stand out from the rest as they do with their brick and mortar stores. The color orange was chosen for it’s uniqueness and vibrant energy. The white gave the clean simplistic feel that would give the user a sense of ease. Our team created a mood-board as well as the style tile you see here. These were run through desirability tests to see if the brand attributes of ABC Market were apparent with the style we established- and they were right on point.

High Fidelity Wireframes

abc market hifi prototypes

Finally- the end product an e-commerce app for ABC Market. During testing we found some issues where the user felt like the “set & forget” feature needed to take less time. We started off with a pop up module with 4 input boxes. Using agile methodology we were able to test as we moved forward. Finally, we left it off with 2 input boxes. The “set and forget” feature was not ready for hand off.


This project was a challenge and a learning experience. The needs of the client were straight foward and simple. The pains of the user were universal. This project required my team to think outside of this box and push past the obvious. Having the user in the center guided us through difficult questions and design chaos. However- in the end we achieved order and victory.


Contact Me

Phone Number

561 213 5083


Social Network

Your message was sent successfully! I will be in touch as soon as I can.

Something went wrong, try refreshing and submitting the form again.