Discovery and Research
User Survey
While I didn't create or conduct the survey, I analyzed the results and found the following:
35%
don't have a design background
47.5%
find bootcamps the most useful resource
32.5%
find online resources the most useful
100%
find the discovery of resources challenging due to not knowing which resources are helpful and credible
55%
use a notebook to keep track of design research or learning experiences
90%
find having a community of aspiring designers makes things easier
Information Architecture
User Journey Mapping
Taking the User Persona created from the Survey results as well as the User Stories and User Flows (which I separated into Task Flows) all created by my group mates, I created a User Journey Map. It explores the motivation and need for using the app, how the user would discover the resource, and their experience using the app and fulfilling their initial need.
MEGAN WADE
Scenario: Megan needs to find online resources to supplement her UX/UI education. She has no idea what she needs to to read so she wants an app that can point herin the right direction.
EXPECTATIONS
- Ability to search for resources by topic(s) of interest
- Ability to see what the UX/UI community thinks of the quality and relevance of available resources
- Ability to keep track of resources
RESEARCH
- Learns new topic in school
- Wants to read more about the topic on her own
- Is overwhelmed by the amount of resources found from a google search
DISCOVER
- Someone recommends DesignReads to her
- Downloads the app and creates an account
REVIEW
- Searches for resources based on the topic she's interested in
- Selects resource and views the reviews left by design peers
SELECT
- Bookmarks resource for easier recall
- Reads resource and finds it very helpful
OPPORTUNITIES
- Recommend books in feed based on past searches and profile information
- Provide way to chat with other users
- Provide way to acquire resource directly from the app
INTERNAL OWNERSHIP
- Dev team: maintain database of resources
- Customer Support: monitor chat system for inappropriate conduct
- Marketing: advertise app to UX/UI Design bootcamps
Lo-fi Testing
While I didn't create the wireframes or implement the changes based on testing, I conducted the usability tests that gave our UX designer the feedback for implementation.
Problem: Users were frustrated that they needed to navigate back up the screen to add their new piece of content.
Solution: The button was placed towards the bottom of the ‘add content screen’ so the users would not have to navigate back up the screen to save.
Problem: Users found that the content added screen was too similar to the former screen.
Solution: The added content now becomes a card when added and will display on the now trending feed.
Problem: Users found that the add icon was hard to find.
Solution: The button was increased in size to improve visibility.
Problem: Users found the post review button hard to find.
Solution: Button size was increased to make it more visible.
Visual Design
Branding
Looking at our competitors, I got some inspiration for how I want this app to look. I decided on a modern, inviting, and dynamic brand.
Next I created a
mood board and
style guide to complete the branding process. The warm light tan color is meant to represent books and pages (inviting), while the hues of blues and greens are a manifestation of the digital aspect (modern). This juxtaposition emphasizes the dynamic characteristic.
Using Fontjoy for inspiration, I grabbed a few different combinations of fonts that would best represent the brand characteristics. We decided on Muli for the headings and subheadings as the bold sans serif gives off a modern vibe and is very easy to read. Lora would be our paragraph font as it’s an elegant serif reminiscent of the typefaces used in books, inspiring the inviting characteristic. Again, juxtaposing a serif and sans serif represents the dynamic nature of the app
H2, Muli, Regular, 32px
Large Text, Lora, Regular, 18px
Logo Iterations
I drew out some sketches, then transferred them into lo-fi digital versions. I showed these designs to the group and we voted on our favorite one. I then made some iterations playing with different fonts and backgrounds and we chose the one we’d move forward with. Finally, I played with different color combinations and we decided on the final version.
Hi-Fi Mockups
Hi-fi Testing
At this point we realized the app was this weird hybrid of Android and iOS. So, one of our designers pulled up the iOS Human Interface Guidelines and got to work on aligning the app with Apple's standards while I pulled up the Google Material Design and created a more unified and consistent app that you would find in the Google Play Store. I then took both versions of our app and tested them with users again.
- The background color was lightened as the previous color was thought to be too pink.
- The status bar and the pixel sizing of the frame were changed to appropriately represent Android.
- Google and Facebook were added to the sign up screen.
- Titles returned to normal case as all caps was seen as outdated.
- Review stars changed to a more typical color.
- Bookmark color changed to darker green from color palette.
- "Add Content" text added to navigation for clarity.
Conclusion
I am very excited that I had the opportunity to collaborate with fellow designers and work on an idea that I really liked. The four of us got to grow and learn together and I feel more prepared for the next collaboration opportunity. The biggest struggle was coordinating our meetings and dividing the tasks evenly. Due to some life events, each group member dropped off and came back to the project at some point which was a challenge for continuity and flow. However, I truly believe that the end result was better than what I could've produced alone. To quote the African Proverb:
If you want to go fast, go alone. If you want to go far, go together.
If we had more time, we'd add more functionality such as the ability to scan ISBN for adding content, the ability to sort content by topic, the ability to sort reviews, and a details page for the pieces of content. We would also have liked to get a mobile developer to help us get at least one of our versions to their respective storefront.
