Bhuku has started collecting data on popular books. Inspired by goodreads.com, Bhuku wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use. As a new company, Bhuku needs to create their brand which should also be reflected in their mobile app.
Create the Bhuku brand and design an end-to-end mobile application for the new company.
UX/UI Designer, Research, Interaction and visual designer.
A modern, minimal, and sophisticated mobile app for Bhuku that helps users discover, read and share books in addition to a gamified system that rewards users for the time they spend with the app and reading books.
Market & Industry Research
I conducted a rapid research session of secondary sources. I spent few hours gathering enough information to help determine the focus and scope of my research. I identified some key challenges and opportunities and made a list of initial assumptions and questions. From there, I conducted a competitive analysis comparing competitors’ strengths and weaknesses, as well as identifying where opportunities to design more innovative solution might exist.
Guided by my secondary research, I based each persona around behavioral patterns I assumed the target audience would have. I created provisional personas to begin thinking about who might make up The Bhuku’s customer base. These rough sketch personas helped bring focus to my contextual inquiry questions and allowed me to have a starting point for testing my hypotheses and assumptions regarding the goals, needs and frustrations of users.
Starting the primary research, I developed an interview guide to structure my contextual inquiry. After getting more familiar with the space I struck up conversation with people and persuaded them to talk to me for few minutes about their experiences with reading. During the interviews, I recorded the audio of each and took notes as I asked questions and observed.
Uncovering Insights + Identifying Needs
Following the interviews, I created an empathy map to synthesize the information gathered during my contextual inquiry. I looked for patterns, similarities, and contrasts in order to uncover insights from my observations and move towards identifying implicit user needs.
User don’t spend enough time reading book due to different couses. When they decide to read they discover books in different ways and also share these books with friends.
Sara’s needs and characteristics emerged from my research research. She cares the most about design and education. She has limited time and need for reading.
Defining The Design Problem
With my primary persona established, I moved into translating the insights and needs of Sara into defined Point of View statements, then crafting a set of "How Might We" questions to guide my design.
Comparing Business and User Goals
Moving into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations. With field research I gathered a good amount of information about business priorities and goals for Bhuku. With this information and data from my secondary research I articulated the goals in the diagram.
With having site map created I created a user flow based on use cases and scenarios intended for Sara. In this diagram, Sara moves thorough three tasks to discover a book, add it to collection and convert her rewards in Bhuku app
Referencing my site map and product roadmap, I created a detailed list of interface elements for pages within the user flows I'd established. This UI requirements document allows stakeholders to assess and weight in on details of the site before they're implemented.
I created a set of low-fidelity sketches of key frames corresponding to the user flows I'd mapped out. I referenced the UI requirements and site map to make sure I included priority elements for each page.
Working from my lo-fi wireframes, I began working in Sketch to create a set of mid-fidelity responsive screens. This set of wireframes shows the site pages that a user would encounter as they progress from the home page towards accomplishing their tasks. These frames were developed with the goal of quickly translating them into a prototype to begin testing my design early in the process. I also annotated each of the wireframes to include details about the intended content and interactivity for the site, including the responsive viewports.
With the key frames of the user flow designed, I brought my wireframe screens into Protopie and created a mid-fidelity prototype to share with users. I was very interested to see the result of interaction and animation work I did in protopie.
I developed a usability testing plan to outline my test objectives, goals and procedures. Due to time constraints, testing was kept to 3 people. I asked participants to use the prototype in order to complete two tasks according to the scenarios I provided, and I observed and took notes, voice and camera recording as they navigated the site.
Working with The SBBike’s existing branding, I looked for ways to expand upon it. I first created a list of attributes to help me articulate the brand, then a mood board inspired by those attributes and finally a style tile for the visual guidance of the website design.
With my recommended revisions list from the affinity map in hand, I moved forward with developing a revised set of high-fidelity responsive wireframes. These show how the visual design will be applied to the site and reflect changes made to site navigation, payment process and minor fixes.
With more time, I'd like to work a bit more on the flow design for the app. I'd also love to explore more by conducting more tests and iterate more. I'd also like to follow up with a second round of research targeted towards the group of users that I might have missed in the first set of research.
And most of all I would like to expand the user flow and and functionality of the website by adding more features.
Two tasks for testers to accomplish were: Navigating the site as they consider finding a book and adding it to their collection And: Navigating the site to cash out rewards.
Right away, some issues with the site revealed themselves. Testers all struggled with parts of the app’s architecture and navigation. After finishing the sessions I wrote down all the information I gathered in order to synthesize.
Drawing from the usability test results, I noted my observations and data on sticky notes, then organized them according to patterns and trends. I then created an affinity map as a way of interpreting and prioritizing my findings.
Revising the site's navigation and payment process was at the top of the list of recommendations that emerged from my insights.
Giving more emphasis to the brand values and “community”, content of the site came next.
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Sara’s needs and priorities were used to focus the exercise. The roadmap includes metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Informed by the features and priorities outlined in my product roadmap, I created a site map showing the information architecture of the new Bhuku app.
With HMW questions on board, I generated as many ideas as possible. I grouped them by theme and relationship and then moved into sketching, creating quick, rough sketches to expand on some of the ideas further in order to generate lots of ideas quickly. The reason is to create as many options as possible to then refine, review and sort out.
To got even closer to Sara’s experience, I went more in detail by creating task flows for each task in user flow, to understand what types of decisions the user will be making while using the app.
a Los Angeles Based
I brought these wireframes into Protopie once again, to create a prototype that offers another opportunity for user testing before going further with the app design and implementation.