CurlHub
Lifestyle App design
UDACITY NANODEGREE PROGRAM
The purpose of this Udacity Facebook Scholarship Nanodegree program was to gain new skills and valuable experiences to stay engaged during the Summer, amidst the COVID-19 pandemic, and enhance my UI/UX portfolio with everything I learned through it.
The program comprised of a series of lessons and projects starting from UX research all through to creating and improving high fidelity prototypes based on a selected design problem. These projects/work showcased below demonstrate the knowledge I have obtained through this program.
UX and Design Research
Lesson: UX Fundamentals and Design Research
The first step in this project was to select a design problem that would form the basis of every other subject project in the program. The steps taken to select my unique design problem are illustrated below:
Select your design Problem:
​
1. Domain/Industry: Lifestyle/Education
2. Niche Market: Learning how to grow and/or take care of natural hair
3. User Group: Natural hair enthusiasts
4. Users narrowed down: People with type 4 natural hair
5. Critical user journey (tentative): Sign-up for app i.e. identify your hair specific (coarseness, porosity, etc.) type and complete the on-boarding process
Fig 1.1. Design problem selection process
NOTE: As the program progressed I decided to change the critical user journey I had decided on in order to better reflect the core functionality of the product I aimed to design.
The follow up to this step was to conduct some actual user research. This involved planning a research study which included my research goals, recruiting criteria, and methodology. All this can be viewed in my Research Plan. I also put together an interview guide designed to answer the questions that characterized said research goals.
Following the interviews, I analyzed my findings and date using the process of affinity diagramming to identify any patterns or key findings that existed in the data. These individual key insights were then grouped by differing single points/issues then further grouped by themes, and finally, high level themes.
​
My findings have been summarized in this Research Report. Inside the report, I formulated a brief and informative executive summary and presented my research findings as well as provided some actionable representations and outlined the next steps in the design process.
Fig 1.2. Affinity diagram of my research findings (click to magnify)
Having run a number of user interviews, analyzing the data helped me obtain a better idea of potential user's needs and hence gauge what my design should look like in order to meet those needs. For the final part of this project, my task was to sketch out at least one screen of the potential core experience by incorporating at least one of my findings from the study, and improve upon this using common design principles. This is the final Design sketch.
Low-Fidelity Prototyping Sprint
Lesson: Concept to Low-Fidelity Prototyping
This second project was broken up into three parts in order to demonstrate an understanding on the design process from customer understanding to low-fi prototyping.
PART 1
a)
PART 2
a)
b)
PART 3
The initial phase of this project was the Research Synthesis. This involved listening to recordings of the interviews I had conducted for the UX Research project and using the active listening method to take detailed interview notes which described: the highlights, pains, opportunities, and other observations derived from my conversation with research participants. These notes where then organized into sensible clusters representing different Themes and Opportunities I could explore. This was followed by some Feature Ideation in which I brainstormed and came up with at least 10 feature ideas which I then went on to prioritize using a Value-Cost grid. From this, 3 features were selected based on data synthesized from my interviews and their proposed importance.
b)
c)
Taking these feature ideas, I then went on to create 10 iterations of paper sketches each including a short paragraph text description of the proposed functionality. Next step was to improve the fidelity of some of the best drawings by creating 4 screens that represented my complete product concept and demonstrated my understanding of design principles. I then wired up these frames to create a Low-fi prototype on Figma.
The third and final phase of this project involved conducting a Usability Study and to interpret usability study results to identify areas of improvement in my first iteration of the Low-fi prototype. I utilized this Usability Study Guide to conduct the study and used my notes from this to map points of frustration or success to steps in my user flow onto a Customer journey map.
A second iteration of my Low-fi prototype was made by improving upon the first iteration to reflect new insights gathered from the usability study. The revised version reflects key changes as well as reasoning behind the revisions made.
​
This Miro board is single presentation of the entire project's design artifacts.
Using the digital design I created for the mobile application in in the Low-Fi Prototype project, my first task was to source inspiration for my final visual design using Mobbin and then create a Style Guide that included a number of visual elements.
Fig 2.1. Frames from Research synthesis including a)Interview Notes, b) Themes and Opportunities, and c) Feature Prioritization
Fig 2.2. a) Paper Sketches - Iteration 1 and b) Digital Prototype - Iteration 1
Fig 2.3. Customer Journey Map
High-Fidelity Design
Lesson: High-Fidelity Prototyping
Fig 3.1. Screenshot of Mobbin visual inspiration library.
Fig 3.2. Components of the Style Guide
I then created a Pattern Library/UI kit which was a collection of components - including buttons, navigation, other elements - that were used to design 5 High-Fidelity Mockups with Figma.
Finally, I created a clickable Prototype by linking the screens of my High-Fidelity Mockups together based on the User Flow from the Low-fi sprint, testing the flow intermittently for inconsistencies.
All assets can be viewed in full by clicking this Figma project link.
Usability Testing
The Usability Testing phase involved using Lookback.io to design a Usability Test for my High-Fidelity Prototype, then went on to recruiting 5 participants who were prompted to complete a set of tasks (listed in the box on the right) in order to assess the functionality and accessibility of certain features.
The results from this Usability test showed that many of the design’s features were intuitive and the general flows were easy to understand; however, others fell short of these positive insights as deduced from the struggles of several Users in trying to complete certain tasks. This due to non-intuitive iconography, and confusing naming conventions for features such as the ‘Forum/Discussion Page’.
Taking the insights from my Usability Tests, I gathered that the following needed to be considered/improved upon:
​
•Make feature iconography and naming for Forum/Discussion page more indicative of purpose
​
• Provide a detailed on-boarding experience/user guide for new users to explain the main features and how to use the app
​
• Have a help icon situated across the app in case users need guidance intermittently
​
• Consider having different versions that can adapt to devices of different sizes in case the interface changes from model to model and features are consequentially omitted.
(View Annotated changes on next slide)
I also conducted a full-on accessibility test in order to improved upon readability, element sizing and contrasts, etc. across all pages on the mockup. The Accessibility study and the following annotated changes can be viewed via this Figma link.
Fig 5.1. Iteration on the Discussion Page showing deletions (circled red) and additions (circled green)
Design Iteration
Reflection
This project provided me with the chance to truly experience the iterative design process from start to finish. The biggest take away is an overarching lesson to be intentional with every step taken along the process. This includes: Who you include in the initial UX research, what key insights are used to ideate features, why certain features should be prioritized, assessing design accessibility and iterating accordingly, etc.
Link: High-Fidelity Prototype showcasing final design iteration
Some screens from the final mockup
