eTrusted Developer Center
A website for developers working with integrations on the "eTrusted" platform - a B2B product by Trusted Shops.
The Process
We followed an iterative, user centred design process beginning with discovering and understanding the user through user research. To achieve this understanding we conducted a survey and interviews, and from the analyses, developed a persona and a user journey map. Taking this understanding of the user, we defined the specification of the app which outlined the goals and functionalities of the system.
​
Product and screen ideation took place through participatory design (design session with users) and team design (general brain storming, wireframing). A low fidelity prototype was then created which was evaluated through testing with users. Following user feedback, a high fidelity prototype was created and tested again with users.
We took an iterative approach to the creation of the final high fidelity prototype. Specifically, we implemented significant changes to the product concept following user feedback from the participatory design session and user testing of the low fidelity prototype, which resulted in a significant redesign.
Being the UX designer in a multidisciplinary product team, I was responsible for researching and designing this product. I also worked closely with developers in the testing and implementation phase.
My Role
To replace the existing Developer Center with an improved version - in terms of navigation, content layout and usability for developers. To structure the API pages, which are notoriously complex, in a clean and understandable way.
The Challenge
Discover
User Research
Survey
We used an online survey to quickly obtain relevant quantitative data and discover behaviour and opinion tendencies from a large number of users.
Key Insights
As most students used smartphones, particularly iPhones, designing an iOS app would be suitable. Regarding hobbies, students had varied interests and most enjoyed meeting friends and socialising - which confirmed the potential of our project idea.
Interviews
To create a user centred product, we acquired an in-depth understanding of the users’ experiences, habits, preferences, attitudes, tasks and goals through user interviews. We conducted 8 interviews with questions such as - "Why do you want to meet new people?", "What do you do about it?", "Think of a time you set out to meet new people. How did you do this? How effective was this?".
Key Insights
- Ownership of a smartphone and more than one social media app installed and used frequently
- A desire to meet people with same interests and to do activities together
- Interested in meeting new people, and exchanging experiences and cultures
- Have hobbies and activities that they practice, or would like to practice in their free time
- Live alone and would like to have friends/a partner to spend free time together
Persona
A persona was necessary to understand and clearly see how our user behaves, how they think, what they desire and why. The persona allowed us to focus on our users' needs, check our progress regularly, make decisions and refine our work.
User Journey Map
We created a user journey map to show the user's desires and their experience of our app - before, during and after engagement. The map showed the intersections between user expectations and system requirements, and also the thoughts and emotional states of the user. The map also demonstrated the potential of our app for addressing user needs.
Specification
1. Registration & profile
2. Login
3. Create new post
4. Edit your post
5. Delete your post
6. Search posts
7. Respond to post
Goal of System
To provide an effective and easy-to-use way for users to find and get in contact with other users based on similar interests.
​
Functionality
8. Reply to a message
9. View another user’s profile
10. Block user
Define
Ideation & Prototyping
Participatory Design
This small group session allowed us to receive user feedback on the concept of the app, understand users' mental models and expectations, and facilitate discussions on the topic. It helped us to ensure that the interaction design would be focused on the user expectations and needs.
In the session, we asked users to sketch four key screens and provide a rationale behind their designs, which provided us with a better understanding of how the users think and what they expected from the app.
Key Insights
​
- Profile, messages, post list, create post, search post should be visible on Home screen.
- Posts listed in order of event date (not creation date).
- Posts to have expiration.
- User to see if they have previously viewed a post.
- Button function on post to message post creator.
- Minimalism, simple interface, necessary information only.
Team Design
Following the participatory design session, we reviewed and discussed the designs, and sketched wireframes of the screens required for the app to function. We took into account the suggestions made by users in the participatory design session, and made other important design decisions.
Key Decisions
​
- An ‘offers’ or posts based concept that users can browse and choose to contact.
- Home screen featuring interest channels (e.g. sport, music, art). User taps to reach list of offers/posts within that interest, to add their own post & view their posts.
- Floating bottom bar on all screens with access to Home (therefore, interest channels and posts), my Profile, Messages & Settings.
- Messaging - viewer sends first message to post owner and suggests date and time to meet. Post owner responds and direct chat begins.
Low Fidelity Prototyping
We developed a low fidelity prototype in Mockplus to bring together and communicate our decisions and creation, to be used in user testing.
Key Insights
Generally, users managed to perform all tasks easily and comments were that the app was ‘straightforward’, ‘familiar’ and ‘easy to use’. Useful feedback was also received:
- Discard the interest channels on Home screen - it limits the way to search and create posts.
- Block other users directly within the chat and view a list of blocked users.
- See which messages are read/unread.
- See the post owner’s profile from the post details screen - to associate a face with a post.
- Visit post owner’s profile details from the post details screen.
User Testing - First Iteration
The user testing at this stage focussed on verifing the app’s main functions, and seeing whether the app and its interactions met the user’s requirements and expectations. We developed a test that asked users to perform 8 tasks:
5. Edit your posts.
6. Respond to a message.
7. Delete your post.
8. Look through all recent posts.
1. Search for posts.
2. Respond to a post.
3. Add your own post.
4. Find your posts.
Further Prototyping
High Fidelity Prototype
We received enough feedback from the user testing to create an improved iteration of the prototype. At this stage, we wanted to create the visual look and feel of the app. To this end, we designed a simple, clean interface using Sketch, and created the interactivity using InVision.
The suggestions were implemented in another iteration of the high fidelity prototype but were not tested due to project time constraints.
User Testing - Second Iteration
The goal of the testing at this stage was to verify the changes we made, and see whether the interaction and experience had improved. We also wanted to find out users' thoughts on the look and feel of the app. We developed a test that asked users to perform 9 tasks:
6. Respond to a message.
7. Delete your post.
8. Edit your profile.
9. Block a user.
1. Search ‘What’s new’.
2. Search using search bar.
3. View post details & respond.
4. View your posts & add a post.
5. Edit your posts.
Key Insights
Users said the app was “clear and simple to navigate.” They liked the home screen because they found it “clear and easy to see what you can do on this page”. Useful suggestions from users included:
- Publish or Save button at the top when keyboard is covering the usual buttons.
- More informative profile section by adding more categories (eg. language, hobbies).
- Profile icons to lead to the users’ profiles when tapped.
