portfolio bahtiyar

UX Portfolio

Bahtiyar Ahmatjan

CV >

https://www.slideshare.net/BahtiyarAhmatjan/resume-bahtiyar

My UX Process

DISCOVERY DESIGNDEFINEValidate the problem, end users, project goals

Organize discovery, explore options, develop user flow and IA

Commit to internally validated ideas, develop wireframe, interactive prototype

METHODS & DELIVARABLES

User research, interview Persona analysis Competitive analysis


User scenario, story mapping User flow Information architecture Card sorting


Low fidelity mockups High fidelity wireframes Interactive prototypes

Testandrepeat

1

Case Study

Project MetadataMetadata Category Metadata Input

Project Name UX research and design for Bookley app 2.0

Project Tagline Skills selling, transaction recording and reminding tool

Project Summary

Bookley is a tool that helps people sell their skills within their acquaintance circles. With its built-in payment method, it records every transaction that's been made, provides a clear picture for both skill seller and buyer. It also reminds users of events that they booked with its built-in calendar and SMS. This app already has its 1.0 version, but due to the shortage on the aspect of user experience and usability, my role has been to improve the information architecture and usability of the app. I collaborated with the stakeholder and the technical director to discuss about usability, business model and technical barriers.

Company/Client Name

Project Date or Timeframe 10/07/2016 - 11/07/2016

Your Tasks & Responsibilities Develop wireframes and eventually simple UIs to showcase as a demo to stakeholders

Platforms Mobile app & webapp

Design Tools / Methods Used Sketch, Gliffy, OmniGraffle, flinto, Story Mapping, Card sorting

Key Performance Metrics # of downloads, engagement time

Team Members & Collaborators UX Designer: Bahtiyar Ahmatjan(me), Technical Lead: Steven, Stakeholder: Bernard

Persona After the first meeting with the client, I

did persona analysis in order to deeply understand the users motivations, frustrations and their context of use. Moreover, it establishes a common understanding of target user segments between client and us. First of all, I got the information about our target users from the client, and based on that information, I found several individuals which is considered as our potential users, and did user interviews on them. The result of the interview helped me build my persona.

User interview report >

https://docs.google.com/document/d/1MD7SDW7p56Dos2QLaL90a8McI63P-fLzAZ-HIMebzZU/edit?usp=sharing

Competitive Analysis

After creating our persona, we want to get the idea of how other similar products are handling usability issues. So we conducted a competitive analysis based on all of the products that we think might be the competitors for us. Since the major goal of this project is to improve usability, we focused more on the product's information architecture and usability. Below is the link to the competitive analysis:

Usability competitive analysis report >

https://docs.google.com/document/d/1lBSTy8WHCpvv6h6q8sskehi-BPJh-3Fzhm0Zcisvoig/edit?usp=sharing

Scenario

After creating our persona, we had enough information to build an user scenario. In communicating what we are trying to achieve with stakeholders, user scenarios can be great tool. It also help us understand user behavior, and help us define product taxonomy and interface. I created three user scenarios featuring three use cases, and I did so with story mapping technique.

User flowAfter building user scenario, we created user flow using Omnigraffle and Gliffy, in order to translate the abstract user scenario into more logically rigid flow chart. In this way, it help our developers better understand the product and how to build it.

Information Architecture

We created sitemaps in order to show how the navigation should be constructed and identify where content will sit. We have gathered many information from previous processes like user scenario and user flow, which became very helpful when we produce a sitemap that helps the users to achieve their goal efficiently and effectively. We found mind mapping tools are the most efficient in creating sitemaps, and we used it.

Bookley Information Architecture

Card SortingDuring creating sitemap, we noticed that we have many group types in our app. In order to determine group categorization of the app, we used card sorting technique. We figured out as many group types that our users might create on our app, and wrote each of them on a piece of sticky note. Then we found 6 potential users and conducted an open card sorting.

After conducting an open card sorting, first I listed all of the categories that participants have made, and then calculated every item's occurrence time on each category. Then I decided the category that occurred the most to be its final category.

However, participants have made some categories like and , and the problem is those are too general to be category. So I did some modification based on the raw materials that we got from the experiment.

2 4

2 4

1 1 2 1 1

1 2 3

4 2

5 1

6

5 1

1 1 2 1 1

4 2

1 2 2 1

6

1 2 1 1 1

4 2

5 1

3 1 2

2 2 1 1

6

3 3

IELTS 1 2 3

4 1 1

6

4 2

6

3 1 1 1

IELTS

WireframesSCHEDULE

SCHEDULEThe main page that a user will see is schedule page. The reason here is to give an immediate feedback of what kind of activities she has today or any other day. With the click of the arrow next to the year/month data, the week calendar will extend into a month calendar. Swiping left or right will change the month into the next or the previous month .

MEMe has shown all the themes that I followed and all the transaction records. As usual, it also includes functions like settings, Login/Sign up entry, wallet and notification center. It's also the place where users can create their own themes.

ACTIVITIESHere shows all of the activities that the user participated in or created herself in a chronological order with the calendar. The t wo k i n d of a c t i v i t i e s (participated and created) are easily distinguishable, has different background color, one has the creator's photo at the right side, while the other one has illustrated the participation situation of the activity.

DISCOVERThemes have two different kinds in this app, one is private theme, and the other is public theme. Discover is the place where you can find the later. You can filter the themes to see the themes that belong to different category.

DISCOVER ME

Wireframes

1.1 1.2 1.2.4

Wireframes

1.2.4.1.1 1.2.4.1.2 1.2.5

Wireframes

2.1 2.2 2.3

Wireframes

3.1 3.2 3.2.1

Wireframes

3.4 3.4.1 3.7

Wireframes

3.8 3.5 3.5.2

Prototypes

As the client agreed on the design proposal after we had showed them the wireframes, they asked us to build prototypes to feel how the app works, and more importantly to present it to the client in the higher authority. So we did it.

Download the Flinto file

Download the Flinto file

https://pan.baidu.com/s/1hsgcJxahttps://www.dropbox.com/s/2np08elzc1qqs7q/25Yuding%20flinto.flinto?dl=0

Before After

Conclusion This has become my first project that I directly communicate with the client. During the design process, I have spent

much time with the client, discussing about the product vision, information structure and the overall usability of the app. We also invited the technical director from the client side into our conversation, and made many critical decisions based on what we can do and cannot. I gained enormous experiences in communication with the client, including how to understand the client quickly, how to raise a proposals that the client would be happy about, and how to persuade the client to go to the right direction when it's necessary.

During the user research process, I was genuinely surprised to see how important that the users think of the nearby recommendation feature. After discussion, this feature still was ignored by the client, regarding to the development budget that we had.

The project had many challenges, but the most difficult piece was communicating with the client. This was also the aspect that was new to me. After the first meeting, I did user research and submitted some deliverables. And the client's feedback was that I didn't understand him properly. Then we had our second meeting, in which we made the product vision very clear.

While the whole project was a huge learning experience, I especially enjoyed the user interview and the user scenario building process using user story mapping technique. Through user interview, you can notice many aspects of the service or the product that you took for granted, and actually really important for the end users. Story mapping is really a handy technique that can show the entire aspect, both the details and the big picture of the product. Scenario building using this technique can make your understanding to the product deeper and deeper.

2

Case Study

CEC Information Architecture

Information Architecture

Wireframes2. 1.1 1.1.1

Wireframes1.1.2 1.1.2.2.1.1 1.1.3 big

Wireframes1.1.3 small 1.1.3.1 1.1.4

Wireframes1.1.5 1.1.5.2 1.1.6

Thank you.