Gabriel Djan,
BCompSc
UX Designer who loves problem solving and emphasising users and clients.
Redesign a Website Concept Through Workshop
Develop an annual festival visual design to enhance mobile user experience
Sector
Art/Music, Community
Challenge
The website needs to be redesigned to more user-friendly and consistency visual design to enhance their targeted audience
My Role
Information Architecture, Web Design and Testing
Project Time
Eight weeks
PROJECT #1: ST JEROME'S LANEWAY FESTIVAL - Student Project at Design Centre Enmore
Planning And Analysis
To kick-off, we started with analysing the current existing website to get the big whole picture of the system, within team members. It's not our goal to have extensive discussion or to find perfect solutions at this stage, but rather to enable us to make quick decisions and drive us to where we want to achieve in limited time span. We then broke it down into seven steps.
Step One
Brand analysis and site structure analysis as per worksheet
Step Two
Based on our knowledge of the brand and our observations of the website, define the user persona
Step Three
Everyone writes three 'user stories' to define the features for a new App. What you think the user wants?
[User] says, I want [a feature} so that I can [achieve some goals]
Carolina wants food easy to find for lunch after the festival.
The user story defines needs and possible pathways for the user through our site or app. It doesn't not describe the actual solutions or UI.
Step Four
Draw 'Storyboards' describing the user using the App. Pick one story and redraw as a story board
Consider the environments they are in. Consider the difference time makes: before, during and after the festival. Morning, daytime, evening? The aim here is to consider the experience of the user rather than the interactions with UI.
Step Five
Based on the website and user stories define the elements of an APP DASHBOARD
Step Six
Try not to get bogged down the content- focus on the journey Content Analysis is the next day? How many steps is practical? Use real words for the headings and boxes with thumbnail drawings but try not to over plan the content.
Step Seven
Photograph with the start paper prototyping of our App as a whole. If we have time photograph the paper prototype with the Marvel App on our phone.
Analysis of Brands, Users, Stakeholders, Customers Interactively
We examined the website and did a brainstorming to answer the questions that we believe are essential to information for this exercise, and came out with the answers.
1. Vision (subjective aims - usually drive by a leader)
2. Mission (objective aims - what the organization wants to achieve)
3. Brand Essence (what makes it authentic and its differentiation from other brands)
4. Value Proposition (the promise and benefits to customers)
5. Key Beliefs (ethics or ideals embedded in the organization)
6. Target Audience (people)
7. Key Market (location)
8. Key Competitors (who are they?)
9. Competitive Advantage (practical distinctions from competitor)
10. Three words to describe their audience (Voice Words)
User Persona
The next step will be identifying our target groups, which will be the user personas. These user personas that we developed here are purely based on our knowledge, experience and assumptions to serve as starting point to identify the needs and challenges (pain points) of the user and identify the possible solutions to address them. For this exercise, it's been decided to pick one user persona due to limited time.
User Story
After defining the user personas, we get our team members to write three stories each describing what the users want. These user stories are the key in developing the story board. For this exercise, it's decided to pick only one user story due to limited time.
Voice Words
Swot Analysis
User Persona
Storyboards
A storyboard was drawn based on one of the user stories that I wrote earlier stage, and story no.1 was picked.
Elements of App Dashboard
Based on each of our storyboards, we collectively identifying the elements that will be on the app dashboard.
Content Analysis, User Journey, Information Architecture
Based on each of our storyboards, we collectively identifying the elements that will be on the app dashboard. We defined that an effective user interface should be not more than three steps to get into what user wants to achieve. From all elements that we assembled, we developed an overview site structure. And from here, based on this, I drew the Site Structure on paper.
Then from this stage onward, we individually create the App Flow and Site Map that serve as the base reference to paper-prototyping and wireframing.
Storyboard of user has the issue to find his friends in the venue
Site Structure
Card Sorting - App Dashboard Elements
App Flow
Prototyping
After developing the App Flow and Site Map, I began to draw the paper prototype based on the App Flow, Site Map and Site Structure (App Dashboard Elements)
Paper Protoyping
This is the simplest form of all the prototyping. It serves as the basic layout, allows for easy and inexpensive modification to existing designs which makes this method useful in the early phases of design. Paper prototyping is the quick way to generate the digital ideas by sketching on the paper. It also preferred tool to generate the ideas by visually and evaluate in the team and with target customers
Paper Prototype- 1
Paper Prototype- 2
Wireframing
Moving to next step, creating wireframe. This wireframe is for designing a website service at the structural level. It also to lay out content and functionality on a page which takes into account user needs and user journeys.
Wireframing Testing & User Interview
After finishing the wireframe, I tested it in Adobe XD on device before putting it into user testing. While user was testing the wireframe, feedback from the users were collected through one to one interview.
Visual Research
At this stage, I started doing research on visual design to define the colour, typography, graphic styling, web and device design and collected ten best pictures from current existing site. The purpose of this exercise is to define the style guide.
Style Guide
After gather all the data that extracted from my visual research, it's time to define the style guide. Element of the style guide are colours, fonts, sprites, glyphs, icons, symbols and buttons.
Wireframe
Visual Research - Colour
Visual Research - Graphic Styling
Visual Research - Ten Best Pictures
Wireframe Testing
Visual Research - Typography
Visual Research - Web and Device Design
Style Guide
Low-Fi Prototype
I developed paper Low-Fi wireframe before developing the Low-Fi prototype to help me with better visualization and information flows/architecture.
The interactive Low-Fi protoype can be viewed at https://xd.adobe.com/view/d77c8266-c4ff-4e1c-aae3-727245f56e3b
Hi-Fi Prototype
Finally, I came to develop the Hi-Fi prototype, which is the closest resemblance to the final design in terms of details and functionality. The Hi-Fi prototypes cover the user interface (UI) of the product - visuals and aesthetics, and the user experience (UX) aspects - interactions, user flow and behaviour.
The interactive Hi-Fi prototype can be viewed at https://xd.adobe.com/view/29bee66d-1d37-4f88-bd75-108c8eaaab61
Hi-Fi Protoype Testing & User interview
As with the wireframe, I conducted Hi-Fi Prototype testing where I observed users navigate and interact with the interactive Hi-Fi prototype. The users were interviewed one to one based on my questionnaires sheet. The questions are broken down into four sections: Structure, Content, Aesthetics and Communication. On the right-hand side there are numbers (number 1 to 10) to rate how good is the corresponding item with number 10 is the highest score.
Low-Fi Paper Prototype - 1
Low-Fi Paper Prototype - 3
Low-Fi Interactive Prototype - 2
Low-Fi Interactive Prototype - 4
Low-Fi Interactive Prototype - 6
Hi-Fi Interactive Prototype - 1
Hi-Fi Interactive Prototype - 3
Hi-Fi Interactive Prototype - 5
Hi-Fi Interactive Prototype - 7
Low-Fi Paper Prototype - 2
Low-Fi Interactive Prototype - 1
Low-Fi Interactive Prototype - 3
Low-Fi Interactive Prototype - 5
Low-Fi Interactive Prototype - 7
Hi-Fi Interactive Prototype - 2
Hi-Fi Interactive Prototype - 4
Hi-Fi Interactive Prototype - 6
Hi-Fi Interactive Prototype Testing
Prototyping- Desktop
With designing for desktop prototype, all elements that present in mobile prototype will be carried forward into the desktop prototyping with some additional extra elements added in.
Wireframing - Desktop
I did a number of research of what were trending at the time and browsed through websites to find the suitable visual design, layout and structure. Once I decided with the design that I would go with, I started to build the wireframe. The reason I picked this design for desktop device, is I wanted to make the "Get Ticket" section appealing and will be located at most obvious location and at the center of the page, just right in front of the users' nose when they landed on this page.
The next things that I wanted to go with the "Get Ticket" section would be the list of the artists that are performing at the festivals, with a brief descriptions about the artist. The description should be kept brief, not to overwhelming users with too much texts/information details, unless the users wants more details then they would be able to find out more by clicking the "Artist Info" button at the bottom of the artist picture.
I designed five wireframes: Main page, Line Up, News, History and Laneway Presents.
Line Up page is very similar to the main page in term of layout, except that in Line Up page, is where all the artist performers and the information details dedicated to.
While News, History and Laneway Presents pages follow same format, with some extra additional menus (Tours, News, Side of The Stages) are added in Laneway Presents page.
Desktop Visual Research
Desktop Wireframe - 3
Desktop Wireframe - 1
Desktop Wireframe - 4
Desktop Wireframe - 2
Desktop Wireframe - 5
Lo-Fi Prototype - Desktop
Now, it's time to define the content and refine the wireframe with the Lo-Fi Prototype.
In the "Artist Profile" page: there are artist portrait, artist's social media details, artist background and artist's album songs on Google Play app.
Desktop Lo-Fi Prototype- 1
Desktop Lo-Fi Prototype- 2
Desktop Lo-Fi Prototype- 4
Desktop Lo-Fi Prototype- 3
Hi-Fi Prototype - Desktop
Finally, I came to the Hi-Fi prototype. Putting all the elements and information together in details and start drawing the prototype in colour to simulate the real life end product.
Desktop Hi-Fi Prototype- 1
Desktop Hi-Fi Prototype- 2
Desktop Hi-Fi Prototype- 4
Desktop Hi-Fi Prototype- 3
Conclusion
Due to limited time and resources, I kept the Hi-Fi interactive prototype testing to three times. The testing questionnaires are broken down into four sections: Structure, Content, Aesthetics, and Communication.
Overall, this project was a success with excellent results. Two users indicated the new design is worth to score above average (8 and above) and I received scores ranging from 4 to 8 from one user, mostly at score 7, she is a typical perfectionist type of user.
If time permitted, in the future, I will develop two or three user personas and do the testing more thoroughly with each different type approach, .e.g. A/B testing and with more variety of user groups. These will enable me to understand users more and to gain better insights on user behavior with wider targeted user groups.