To widen the service, the online food subscription company's website is redesigned.

My Role 

UX/UI Designer

- Notion for project management

- Slack for collaboration

- Miro

- Figma

- Google meet & Teams for communication

- They were using Shopify's web platform and it is difficult to update and maintain.

- The website's flow is not that desirable for the customers.

A short span of time to redesign the whole website conducting user research and better UX/UI design.

The Double Diamond design process model was based on research and design. I incorporated design thinking in this framework to get the job done quickly and effectively. It has four phases,

- Discover /Research— insight into the problem (diverging)

- Define/Synthesis — the area to focus upon (converging)

- Develop/ Ideation— potential solutions (diverging)

- Deliver /Implementation— solutions that work (converging)

I've done competitor research with other food subscription companies,

- To help with solving usability problems, as per this definition of usability

- To understand where KeteKai's service stands in the market

- To inform the design process

- To know the strengths and weaknesses of other companies

- To have reliable evidence when making product changes

- To focus on our efforts in a target market

It is a visual representation of the process a customer goes through to achieve a goal with the company. With the help of a customer journey map I've got a sense of the customer's needs, motivations and pain points.

The purpose of the stakeholder interviews is to obtain project-relevant information and to empathize with their suggestions. I chose the co-founder of KeteKai to interview. With the data and knowledge gained from the stakeholder interview, I did the empathy map based on the traditional 4 quadrant map.

- Think & Feel

- See & Do

- Pain

- Gain

I've created this basic proto persona to allow the the team to begin designing and building immediately without getting overly bogged down with the details of user behavior. The advantage of proto-persona is we can always update them, whenever we get more data from the user research.

Brainstorming is the method design teams use to generate ideas to solve clearly defined design problems. I did the brainstorming session on the Miro board with Post-Its. It gave me a clear perspective of which problem to focus on.
With the qualitative information, I grouped the data by categories and named them, that's how I've created the affinity map.

User stories are a vital, humanizing part of the design process. They are told from the perspective of the user and are used to inspire and direct design decisions. I've created the user stories from the data collected with the discover phase, especially with the empathy map.
The user story here is to mainly give the customers a more personalized experience.

Design and develop a new shopfront, which will provide expanded offering and accommodate more complex scenarios. 
For example: Giving the customers a personalized experience for better usability and inclusive mindset while using the website.

A User flow is a hierarchical diagram of a website or application. This shows how pages are prioritized, linked, and labeled. I did the basic site map to navigate to the customer's dashboard.
To begin with the redesign, we decided to start with the personalized experience for the customers by creating a dashboard for them. This is the new User flow of the customer dashboard.

Hand sketches are an important part of the design process because they are free of technical limitations. The sketching phase is about getting concepts and ideas down on paper, not making a design perfect. Keeping these in mind I've made some basic sketches for the customer dashboard.

For this project, I chose to do both the low-fidelity and high-fidelity wireframes.
Low-fidelity wireframes can be an excellent way of visualizing requirements and getting everyone on the same page early on.
High-fidelity wireframes will make sure that your design decisions are communicated to the team building the end product and that target users are accounted for.

The primary goal of building a prototype is to test designs before creating real products. The final product's success is directly related to whether we test it or not. Therefore, it’s always better to collect feedback during the low-risk research phase, and before public release. Thus, I've made the high-fidelity prototypes and did some testing before giving the pages to development. For every page, I basically did 3 iterations of testing.

Usability testing of the customer dashboard pages.

This testing will be focused on user as a customer of Ketekai, they could create a personalized account and check their orders and subscriptions.

3 Users

3 tasks - Direct and Scenario

Online and face-to-face

Jakob Nielson's Severity Rating Scale

0 being none - 4 being the usability catastrophe

Following the double diamond method gave me the confidence to work in a tight schedule. I've done the proper UX research and spent more time in designing because of the nature of this method. It usually allows more time on the development stage. I've achieved that because of the strong UX research in the early stages.

I almost went through each stage of the design thinking tasks to make sure I am solving the right problem and also solving the problem right. Working on an agile environment with the team helped me design more effectively and to collaborate more. I had fun learning new things and I definitely never going to stop learning!