The document provides details about a UX portfolio project for an app called Bookley. The summary is: 1) The project involved conducting user research through interviews and personas to understand skills sellers and buyers on the Bookley app. Competitive analysis was also performed to analyze usability. 2) Scenarios, user flows, and information architecture like sitemaps and card sorting were developed to map out the app's information structure and user flows. 3) Low-fidelity wireframes and interactive prototypes were created and tested with stakeholders and users. 4) The project improved the UX and usability of Bookley's 2.0 version through discovery, design, and testing iterations with

1. UXPortfolio
Bahtiyar Ahmatjan
CV >

2. My UX Process
DISCOVERY DESIGNDEFINE
Validate 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
METHODS & DELIVARABLES
User scenario, story mapping
User flow
Information architecture
Card sorting
METHODS & DELIVARABLES
Low fidelity mockups
High fidelity wireframes
Interactive prototypes
Test
and
repeat

3. 1
Case Study

5. Project Metadata
Metadata 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

6. 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 >

7. 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 >

8. 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.

9. User flow
After 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.

11. 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

12. Card Sorting
During 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.

13. 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
职场·考证
办公软件
会计培训

14. Wireframes
SCHEDULE
SCHEDULE
The 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.
ME
Me 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.
ACTIVITIES
Here shows all of the
activities that the user
participated in or created
herself in a chronological
order with the calendar. The
two kind of activities
(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.
DISCOVER
Themes 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

15. Wireframes
1.1 新建活动⻚ 1.2 活动⾸⻚ 1.2.4 订单详情⻚

16. Wireframes
1.2.4.1.1 评价⻚ 1.2.4.1.2 取消订单⻚ 1.2.5 ⽀付模块

17. Wireframes
2.1 选择地点⻚ 2.2 主题筛选⻚ 2.3 主题⾸⻚

18. Wireframes
3.1 登录模块 3.2 ⽤户⾸⻚ 3.2.1 编辑个⼈资料⻚

19. Wireframes
3.4 我的订单⻚ 3.4.1 筛选订单⻚ 3.7 主题活动⻚

20. Wireframes
3.8 新建主题⻚ 3.5 我的钱包⻚ 3.5.2 提现⻚

21. 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 ↓

22. Before After

23. Before After

24. Before After

25. Before After

26. 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.

27. 2
Case Study

29. CEC Information
Architecture
Information
Architecture

30. Wireframes
2.注册⻚⾯ 1.1 菜单⻚ 1.1.1 我的积分⻚

31. Wireframes
1.1.2 注册产品⻚ 1.1.2.2.1.1 注册成功⻚ 1.1.3 我的产品⻚big

32. Wireframes
1.1.3 我的产品⻚small 1.1.3.1 产品主⻚ 1.1.4 会员商城⻚

33. Wireframes
1.1.5 个⼈资料⻚ 1.1.5.2 家庭状况⻚ 1.1.6 分享⻚

34. Thank you.