Amir Khademi

Senior UX Designer

Off Channel

About the project

Off Channel is a fast-growing startup offering shopping deals and discounts.

In 2018 it was an idea from its managers; I made a quick coded prototype to validate. We got positive feedbacks and traffic.

Analyzing traffics, we saw most users are mobile, so I designed mobile-first mockups and helped developers implement them gradually.

 

We grew very fast and became the 500th visited website (Alexa) in the country.

I also made a great effort fixing usability and accessibility issues reported by Google Lighthouse.

A significant challenge in Offch is the highly competitive market and competitors.

Value Propositions
  • Up to date coupons
  • Extensive coverage of stores
  • Easy-to-use design
  • Helping startups get known
  • Easy access to coupons

My Role

I joined this startup from day first as a UX designer (as a part-time employee, not a stakeholder). At that time, we were a team of three, a project manager, a full-stack developer, and me. I was doing both UX design and development.

I designed and implemented the first version of the website. It was a simple version and used to get market feedback.

After initial success, the team hired more people, including a front-end developer, a marketing manager, and a content and SEO expert.

Then, with the cooperation of the front-end developer, I redesigned the website piece by piece.

Then I put a lot of time and effort into helping to solve accessibility issues.
I now spend most of my time doing user research as well as designing a dedicated mobile version.

Design Process

We use a combination of the “Design Thinking Framework” with the “Lean UX” process in this project.

1. Empathize

Defining pain points

We interviewed some users of the initial version of the site to know their pain points.

Creating Personas

Next, we created the personas by identifying the users and their pain points. 

Here are two of them:

User Stories

Further on, we defined user stories based on the interviews and personas we made.

Below are two of the user stories:

User Journey Maps

Succeeding, we created user journey maps. Below is one of them as an example:

2. Define

Problem Statements

Now we’re done with empathizing, and it’s time to define the user problems. We do use this format to write our problem statements. 

Below is an example:

3. Ideate

Running Design Studio

We use a simplified version of the design studio technique by Lean UX to brainstorm solutions for problem statements. Using Google Meet and Jam Board, we run online remote sessions to collaborate on ideation. (our developers are in different countries).

 

Below is a Jam Board we were ideating on some features: 

Wireframing

I use pen and paper to make structured wireframes with details before I go for mockups and prototypes. Below are some of the wireframes for this project (They are in the Farsi language).

3. Prototype

Mockups

Here is where colors and styles come to life! I do use Adobe XD to create high-fidelity mockups.

Prototyping

I use the same tool (Adobe XD) to create interactive prototypes. Here is an example: